DOM对象(DHTML)
7.1 什么是 DOM？
DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：
"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
- 什么是 XML DOM？ －－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
- 什么是 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
7.2 DOM 节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：
- 整个文档是一个文档节点(document对象)
- 每个 HTML 元素是元素节点(element 对象)
- HTML 元素内的文本是文本节点(text对象)
- 每个 HTML 属性是属性节点(attribute对象)
- 注释是注释节点(comment对象)
画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。
节点(自身)属性:
- attributes - 节点（元素）的属性节点
- nodeType – 节点类型
- nodeValue – 节点值
- nodeName – 节点名称
- innerHTML - 节点（元素）的文本值
导航属性:
- parentNode - 节点（元素）的父节点 (推荐)
- firstChild – 节点下第一个子元素
- lastChild – 节点下最后一个子元素
- childNodes - 节点（元素）的子节点
注意：
<div id="div1"> <div id="div2"></div> <p>hello yuan</p> </div> <script> var div=document.getElementById("div2"); console.log(div.nextSibling.nodeName); //思考:为什么不是P? </script>
推荐导航属性：
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分，以及节点之间的关系：
访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：
页面查找：
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
- 通过使用 getElementsByName() 方法
局部查找：
<div id="div1"> <div class="div2">i am div2</div> <div name="yuan">i am div2</div> <div id="div3">i am div2</div> <p>hello p</p> </div> <script> var div1=document.getElementById("div1"); ////支持; // var ele= div1.getElementsByTagName("p"); // alert(ele.length); ////支持 // var ele2=div1.getElementsByClassName("div2"); // alert(ele2.length); ////不支持 // var ele3=div1.getElementById("div3"); // alert(ele3.length); ////不支持 // var ele4=div1.getElementsByName("yuan"); // alert(ele4.length) </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> </head> <body> <div class="div1" id="d1"> <p class="p1" name="littleP">hello p1</p> <div class="div2">hello div2 <div class="div3">hello div3</div> <a href="#">hello</a> </div> </div> <script> /* DOM节点 */ // 节点(自身)属性 // var ele=document.getElementById('d1'); // 通过id获取标签 // var ele=document.getElementsByClassName('div2')[0]; // class属性值可以重复，所以是Elements，返回是数组可通过索引取值 // console.log(ele); // <div class="div2">hello div2</div> // console.log(ele.nodeName); // DIV，节点名称 // console.log(ele.Type); // undefined，节点类型 // console.log(ele.Value); // undefined，节点值 // console.log(ele.attributes); // NamedNodeMap {0: class, class: class, length: 1}节点（元素）的属性节点 // console.log(ele.innerHTML); // 'hello div2'节点（元素）的文本值(重要) // ele.innerHTML='hello world'; // 导航属性 var p_ele=document.getElementsByClassName('p1')[0]; // <p class="p1">hello p1</p> console.log(p_ele.parentNode.nodeName); // DIV节点的父节点 console.log(p_ele.nextSibling.nodeName); // #text，p标签下一行是div标签，但是行与行之间有空格，如果把p标签与div标签紧贴，那么结果为div(下一个兄弟标签/不推荐) console.log(p_ele.nextElementSibling.nodeName); // DIV，下一个兄弟标签 var d_ele=document.getElementsByClassName('div1')[0]; console.log(d_ele.children[1].children); // [div.div3, a]所有子标签；刚上面也获取了此div2标签没有注释，这里获取不到div2标签的子标签数据 // 推荐导航属性 // parentElement // 父节点标签元素 // children // 所有子标签 // firstElementChild // 第一个子标签元素 // lastElementChild // 最后一个子标签元素 // nextElementtSibling // 下一个兄弟标签元素 // previousElementSibling // 上一个兄弟标签元素 // 访问节点(HTML元素) var ele1=document.getElementById('d1'); // 不支持局部查找(先拿到一个节点再在这个节点往下找) console.log(ele1); // 把div1及下面所有的标签都拿到了 var ele2=document.getElementsByName('littleP')[0]; // 不支持局部查找(先拿到一个节点再在这个节点往下找) console.log(ele2); // 拿到了p标签 var ele3=document.getElementsByTagName('div')[2]; console.log(ele3); // 拿到了div3标签 var ele4=document.getElementsByClassName('div3')[0]; console.log(ele4); // 拿到了div3标签 </script> </body> </html>