JavaScript 使用DOM
访问并更新DOM树需3个步骤：
1、找到与需要操作的元素所对应的节点
2、缓存到一个变量中
3、操作这些元素，使用它的文本内容、子元素或属性
第一步：访问元素
访问元素有多种方法：
| 访问元素方法 | 方法 |
| 选择单个元素节点 | document.getElementById ()按元素ID查找 document.querySelector() 使用CSS选择器查找 |
| 选择多个元素 | document.getElementsByClassName() 选择所有指定的class属性的元素 document.getElementsByTagName() 按标签查找元素 document.querySelectorAll() 使用CSS选择器查找 |
| 在元素之间遍历 | parentNode 选择当前元素的父节点 previousSibling nextSibling 选择当前元素的兄弟节点 firstChild lastChild 选择当前节点子节点 |
第二步：缓存到一个变量，使用变量声明和赋值
|
1
|
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>
示例网站：https://www.runoob.com/js/js-htmldom.html
