[TOC] ### 节点和元素 #### DOM结构  文档:document * 元素:页面中所有的标签,元素---element, 标签----元素---对象 * 节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node 节点大于元素 * 根元素:html标签 #### 属性 节点的属性:(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来) nodeType:节点的类型:1----标签,2---属性,3---文本 nodeName:节点的名字:标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text nodeValue:节点的值:标签节点---null,属性节点---属性值,文本节点---文本内容 #### 对应关系 DOM文档树（文档对象模型）与HTML元素的对应关系 **DOM节点 HTML文档** 元素节点 标签 属性节点 属性 文本节点 文本内容 注释节点 注释 ### 各个节点和元素的获取 标签、属性、文本、注释等所有html的内容在DOM中被封装成了类型为**节点类型**的对象，称为**节点对象Node**。 标签、属性、文本、注释分别对应的节点对象是**元素节点（Element）**、**属性节点（Atrr）**、**文本节点（Text）**、**注释节点（Comment）**。 ``` ~~~ <div id="dv"> <span>这是div中的第一个span标签</span> <p>这是div中的第二个元素,第一个p标签</p> <ul id="uu">哈哈 <li>乔峰</li> <li>鹿茸</li>嘿嘿 <li id="three">段誉</li>呵呵 <li>卡卡西</li> <li>雏田</li>嘎嘎 </ul> </div> ~~~~~~ <script> var uObj = document.getElementById("uu"); console.log(uObj.parentNode);/*父级节点 div*/ console.log(uObj.parentElement);/*父级元素(标签) div*/ console.log(uObj.childNodes);/*子级节点 11个（换行也是节点） 返回值是个数组 */ console.log(uObj.children);/*子级元素 5个li 返回值是个数组*/ console.log(uObj.firstChild);/*第一个子节点 哈哈*/ console.log(uObj.firstElementChild);/*第一个子元素 <li>乔峰</li>*/ console.log(uObj.lastChild);/*最后一个子节点 嘎嘎*/ console.log(uObj.lastElementChild);/*最后一个子元素 <li>雏田</li>*/ console.log(my$("three").previousNode);/*three 的前一个兄弟节点 嘿嘿*/ console.log(my$("three").previousElementSibling);/*three 的前一个兄弟元素 <li>鹿茸</li>*/ console.log(my$("three").nextSibling);/*three 后一个兄弟节点 呵呵*/ console.log(my$("three").nextElementSibling);/*three 后一个兄弟元素 <li>卡卡西</li>*/ </script> ~~~ ``` #### 获取属性节点 ``` ~~~ <ul id="uu"> <li>乔峰</li> <li>鹿茸</li> <li id="three">段誉</li> <li>卡卡西</li> <li>雏田</li> </ul> var dv = document.getElementById("uu").getAttributeNode("id"); console.log(node.nodeType,node.nodeName,node.value); ``` ### 创建元素的方法 （三种） **document.write()**：将一个文本字符串写入到由 document.open() 打开的一个文档流中； **innerHTML**：设置或获取HTML语法表示的元素的后代； **document.createElement( tagName )**：创建由 tagName 指定的HTML元素； #### document.write ``` ~~~ <input type="button" value="创建一个p" id="btn"/> 小明是一个快乐的小男孩,人家今年才38岁.好帅哦 ~~~ ~~~ my$("btn").onclick = function () { document.write("<p>哈哈哈</p>"); } ~~~ ``` **注意：document.write 在页面加载之后执行会覆盖前面所有的内容** #### innerHTML ``` ~~~ <input type="button" id="btn" value="p标签创建"> <div id="dv"></div> ~~~ my$("btn").onclick = function () { my$("dv").innerHTML = "<p>啦啦啦</p>"; } ~~~ ~~~ ``` #### document.createElement( tagName ) ``` ~~~ #dv{ width: 200px; height: 500px; border: 1px solid #ccc; } ~~~ <input type="button" id="btn" value="点击创建"> <div id="dv"></div> ~~~ my$("btn").onclick = function () { //第一步：先创建元素 var pObj = document.createElement("p");//创建元素 pObj.innerText = "这是一p标签"; //第二步：追加到父元素里面 my$("dv").appendChild(pObj);//把创建好的元素追加到父元素里面 } /* * 第三种创建元素分两步：第一步，先创建元素document.createElement("标签名字") * 第二步：然后把创建好的元素追加到父元素身上appendChild ```