JavaScript入门（三）

DOM操作指南

最新推荐文章于 2025-04-27 10:19:20 发布

原创最新推荐文章于 2025-04-27 10:19:20 发布 · 410 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #对象

HTML/CSS/JS 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何使用JavaScript通过DOM访问和处理HTML文档。主要内容包括通过ID获取元素、改变HTML样式、显示和隐藏元素及控制类名。

DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
如下代码：

将HTML代码分解为DOM节点层次图:

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
文本节点：向用户展示的内容，如<li>…</li>中的JavaScript、DOM、CSS等文本。
属性节点：元素属性，如<a>标签的链接属性href=”http://www.imooc.com”。

（1）通过ID获取元素

学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。语法为：

document.getElementById("id");

该函数获取的是一个对象。innerHTML 属性用于获取或替换 HTML 元素的内容，如object是使用document.getElementById()获取的对象，则object.innerHTML即为该object地内容。

（2）改变HTML样式

HTML DOM 允许使用 JavaScript 改变 HTML 元素的样式。语法为：

object.style.property=new style;

其中object是获取的元素对象，属性有很多，CSS的样式属性都可以通过该方法设置和修改。下图是属性的一部分：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>改变HTML样式</title>
</head>
<body>
  <h2 id="con">I love JavaScript</h2>
 <script type="text/javascript">
    var mychar= document.getElementById("con");
    mychar.style.color= "red";
    mychar.style.backgroundColor= "#CCC";
    mychar.style.width= "300px";//注意""不能缺少
  </script>
</body>
</html>

（3）显示和隐藏

网页中经常会看到显示和隐藏的效果，可通过display属性来设置。语法为：

object.style.display = value;

当value=”none”时，元素将被隐藏；
当value=”block”时，元素将显示出来；

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset = UTF-8">
<title>display</title>
    <script type="text/javascript"> 
        function hidetext()  
        {  
        var mychar = document.getElementById("con");
        mychar.style.display= "none";
        }  
        function showtext()  
        {  
            var mychar = document.getElementById("con");
            mychar.style.display= "block";
        }
    </script> 
</head> 
<body>  
    <h1>JavaScript</h1>  
    <p id="con">JavaScript是必不可少的工具。</p> 
    <form>
       <input type="button" onclick="hidetext()" value="隐藏内容" /> 
       <input type="button" onclick="showtext()" value="显示内容" /> 
    </form>
</body> 
</html>