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.onload=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()等方法。