JavaScript 使用DOM

最新推荐文章于 2024-11-04 10:13:26 发布

ajaejpb2472710

最新推荐文章于 2024-11-04 10:13:26 发布

阅读量54

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hzyhx/p/11161136.html

版权

访问并更新DOM树需3个步骤：

1、找到与需要操作的元素所对应的节点

2、缓存到一个变量中

3、操作这些元素，使用它的文本内容、子元素或属性

第一步：访问元素

访问元素有多种方法：

访问元素方法	方法
选择单个元素节点	document.getElementById ()按元素ID查找 document.querySelector() 使用CSS选择器查找
选择多个元素	document.getElementsByClassName() 选择所有指定的class属性的元素 document.getElementsByTagName() 按标签查找元素 document.querySelectorAll() 使用CSS选择器查找
在元素之间遍历	parentNode 选择当前元素的父节点 previousSibling nextSibling 选择当前元素的兄弟节点 firstChild lastChild 选择当前节点子节点

第二步：缓存到一个变量，使用变量声明和赋值

 
         var 
         elul = document.getElementById( 
         'ul' 
         );

第三步：操作这些元素

访问或更新文本节点
操作HTML

访问或更新属性值示例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>DOM</title>
 6 </head>
 7 <body>
 8 
 9 <div id="div1">
10 <p id="p1">这是一个段落。</p>
11 <p id="p2">这是另外一个段落。</p>
12 </div>
13  
14 <script>
15 /**21行  用于创建 <p> 元素
16   *22行  为 <p> 元素创建一个新的文本节点*
17   *23行  将文本节点添加到 <p> 元素中*
18   *                             *
19   *25行  查找已存在的元素*
20   *26行添加到已存在的元素中*/
21 var para = document.createElement("p");
22 var node = document.createTextNode("这是一个新的段落。");
23 para.appendChild(node);
24  
25 var element = document.getElementById("div1");
26 element.appendChild(para);
27 </script>
28 
29 </body>
30 </html>