DOM（Document Object Model）

DOM介绍DOM树节点类型 获取DOM节点获取节点获取元素节点获取属性节点 节点的常用属性节点间关系父节点子节点第一个子节点最后一个子节点所有子节点 兄弟节点下一个兄弟节点上一个兄弟节点 操作DOM节点创建节点插入(移动)节点appendChildinsertBefore移动节点 删除节点复制节点 操作节点属性获取属性直接操作作为节点操作 删除属性设置属性直接操作和作为节点操作注意事项 innerHTML和innerText的区别document常用节点获取

DOM介绍

DOM树

HTML加载完毕后会生成一个DOM树

DOM document html head body a href='http://www.xxx.com' innerText html、head、body、a等节点称为元素节点href等节点称为属性节点innerHTML等节点称为文本节点

---

节点类型

<div> <!-- 注释 -->text1 text2 <p>段落</p> </div>

假设父元素是div标记，则：

第一行<div>后的换行和制表符被划分为一个文本节点(#text)第二行的<!-- 注释 -->是一个注释节点(#comment)第二行<!-- 注释 -->后的text1和换行和制表符和text2和换行被划分为一个文本节点第三行的<p>段落</p>是一个元素节点第三行的<p>段落</p>后的换行是一个文本节点

所以div一共有5个子节点

获取DOM节点

获取节点

获取元素节点

//单个 document.getElementById(); //数组 document.getElementsByClassName(); document.getElementsByTagName();

获取属性节点

元素节点.getAttributeNode(attributeName);

节点的常用属性

例：

<div id="d">this is a div<!-- 注释 --></div> var d=document.getElementById("d"); console.log(d.firstChild);

输出：

nodeName: "#text" //节点名（文本节点） nodeType: 3 //节点类型（1:元素 2:属性 3:文本） nodeValue: "this is a div" //节点value parentNode: HTMLDivElement //父节点 parentElement: HTMLDivElement //父元素节点 previousSibling: null //上一个兄弟节点 nextSibling: Comment //下一个兄弟节点（注释） length: 13 //长度 ...

节点间关系

父节点

节点.parentNode

子节点

注意：指的是下一级子节点，不是所有级

第一个子节点

IE6、7、8仅支持firstChild fireFox、Chrome、IE9+支持firstChild和firstElementChild

IE6、7、8中的firstChild指第一个子标签节点 fireFox、Chrome、IE9+中的firstChild指第一个子节点(包括换行、标签、空文档) fireFox、Chrome、IE9+中的firstElementChild指第一个子标签节点

所以考虑兼容性：

//IE 6、7、8 节点.firstChild //fireFox、Chrome、IE9+ 节点.firstElementChild

两个属性可以这样合并：

var 第一个子节 = 点节点.firstElementChild || 节点.firstChild //优先使用firstElementChild，若是IE 6、7、8，因为不支持所以会用后者；而其他浏览器则会使用前者

最后一个子节点

同上具有兼容性问题，语句为：

节点.lastChild 节点.lastElementChild

所有子节点

标准属性：childNodes

IE6、7、8中的childNodes指所有子元素节点 fireFox、Chrome、IE9+中的childNodes指所有子节点(包括换行、标签、空文档)

非标准属性（虽不是标准属性，但几乎所有浏览器都支持）：children

fireFox、Chrome、IE9+中的children指所有子元素节点 IE6、7、8中的children还包含了注释节点，要注意注释不要写操作节点里面

使用时建议用children（注意不要写注释节点）来达到多浏览器兼容

兄弟节点

下一个兄弟节点

同获取第一个子节点一样具有兼容性问题，语句为：

节点.nextSibling 节点.nextElementSibling

上一个兄弟节点

同获取第一个子节点一样具有兼容性问题，语句为：

节点.previousSibling 节点.previousElementSibling

操作DOM节点

创建节点

var a=document.createElement("div"); var b=document.createElement("abc"); console.log(a); //<div></div> console.log(b); //<abc></abc> console.log(typeof a); //object console.log(typeof b); //object

插入(移动)节点

appendChild

在指定节点内的最后插入

节点.appendChild(object)

insertBefore

在指定节点内的参考节点前插入，若找不到参考节点则按appendChild插到最后

节点.insertBefore(object,参考节点)

移动节点

<div id="d1"> <p>1</p> </div> <div id="d2"> <p>2</p> </div> var d1=document.getElementById("d1"); var p2=document.getElementById("d2").firstElementChild; d1.appendChild(p2); //p2移动到d1 d1.insertBefore(p2,d1.firstElementChild); //p2移到p1前面

删除节点

格式：

父节点.removeChild(object)

若要删除自己，可以：

node.parentNode.removeChild(node)

复制节点

格式：

节点.cloneNode(Boolean)

参数为false(默认为false)时，表示仅复制节点本身 参数为true时，表示复制还所有子节点

例：

<div> 111 <a>baidu</a> </div>

为true时复制全部 为false时仅复制：<div></div>，任何子节点都不复制（不仅只有元素节点）

操作节点属性

获取属性

例：

<img src="1.jpg" id="i1" class="imgs" alt="img1" /> var i1=document.getElementById("i1");

直接操作

i1.src 或 i1["src"] --> http://localhost/test/1.jpg i1.className 或 i1["className"] --> imgs i1.alt 或 i1["alt"] --> img1 i1.width 或 i1["width"] --> 63

直接操作获取的src是绝对路径，因为直接读取的是系统属性 class要写为className，因为系统中存储的是className属性 获取width时虽然标签中没有声明，但因为是读取系统属性所以仍可以读出来

作为节点操作

i1.getAttribute("src") --> 1.jpg i1.getAttribute("class") --> imgs i1.getAttribute("alt") --> img1 i1.getAttribute("width") --> null

使用getAttribute相当于直接读取html文档中的属性节点，不是读取系统属性 所以获取src和class时不用考虑系统属性名和系统中属性值是否与html文档相同的问题 读取width时因为标签中没有声明，所以找不到width，此时应该用直接操作

删除属性

格式：

node.removeAttribute(attribute)

设置属性

格式：

node.setAttribute(attribute,value)

直接操作和作为节点操作注意事项

直接操作操作的是系统中的属性，作为节点操作操作的是标签上的属性节点 例子：

i1.a="abc"; console.log(i1.a); //abc console.log(i1.getAttribute("a")); //null i1.setAttribute("b","def"); console.log(i1.b); //undefined console.log(i1.getAttribute("b")); //def

所以两者不可混用

innerHTML和innerText的区别

<div id="d"> aaa <div> div2 </div> </div>

上面的HTML片段中，运行以下打码：

console.log(d1.innerText); // aaa div2 console.log(d1.innerHTML); //2-5行全部输出 d1.innerText="<p>text</p>"; //此时的 < > 被作为字符串被转换为 < > console.log(d1.innerHTML); //<p>text</p> //！在设置 文本节点 时同时覆盖了所有 其他节点 d1.innerHTML="<p>text</p>"; //p标签作为正常的元素节点，不会被转换

document常用节点获取

属性document.title获取head里的titledocument.head获取head标签document.body获取body标签document.documentElement获取html标签(注意不是.html)