DOM

最新推荐文章于 2023-09-05 09:26:32 发布

diuxieyu2483

最新推荐文章于 2023-09-05 09:26:32 发布

阅读量57

点赞数

原文链接：http://www.cnblogs.com/tangzhirong/p/4808186.html

版权

　　DOM即文档对象模型。IE中的DOM是以COM对象形式存在的，与其他浏览器不太一样。

　　整个网页文档可以看做一颗节点树，其中<html>标签为根节点。

　　我们在html中经常把标签称为元素。节点分为三类：1.元素节点 2.文本节点 3.属性节点

A.元素节点：

1.getElementById();

var box=document.getElementById(box);

　　alert(box);

　　PS：DOM操作必须等待HTML文档加载完毕，才可以获取。解决办法有:

　　(1)将<script>置后

　　(2)用onload事件来加载HTML文档

　window.οnlοad=function(){

　　    var box=document.getElementById(box);

　　    alert(box.tagName);   //获取节点的标签名

　　　 alert（box.innerHTML）;   //获取纯文本，包含html标签

　　　 box.innerHTML="玩转<strong>JS</strong>";   //innerHTML可以解析JS

　　}

2.getElementsByTagName();

　　返回查找标签名的节点元素数组。

3.getElementByName();

4.setAttribute("属性"，“属性值”)

5.removeAttribute("属性")

B.文本节点

　　html:

<div id='box'>测试DIV<em>倾斜</em>结尾</div>

　　js:

　　var box=document.getElementById('box');

　　alert(box.childNodes.length);  //3个子节点，其中测试DIV、结尾为文本节点；<em>倾斜</em>为元素节点

　　alert（box.childNodes[0].nodeType）;   //输出1，表示‘测试DIV’为文本节点

　　alert（box.childNodes[0].nodeValue）;  //输出‘测试DIV’

PS：innerHTML和nodeValue的区别为：innerHTML只适用于元素节点，且可以解析JS；nodeValue只能用于当前节点。

　　alert（box.firstChild.nodeValue）;   //box的第一个子节点值

　　alert（box.lastChild.nodeValue）;   //box的最后一个子节点值

　　alert(box.ownerDocument);  //返回根节点

　　另外，还有parentNode、previousSibling，nextSibling等方法，不再赘述。

C.节点操作

　　1.创建元素节点p：

　 var p=createElement('p');  //还没有添加到文档中

　　box.appendChild(p)； //在某元素节点的最后一个子节点后添加一个节点

　　var text=document.createTextNode('测试DIV4');  

　　p.appendChild(text);  //把文本添加到P里

　　2.学会编写insertBefore、insertAfter函数

　　3.掌握克隆节点方法cloneNode()、replaceChild()，removeChild()等方法。

转载于:https://www.cnblogs.com/tangzhirong/p/4808186.html