DOM(Document object Model)文档对象模型,用来描述Javascript脚本怎样与HTML或XML文档进行交互的Web标准
DOM规定:整个文档是一个文档节点,每个标签是个元素节点,元素包含的文本是文本节点,元素的属性是一个属性节点
<!--本例演示如果借助节点的nodeType属性检索当前文档中包含元素的个数--> <!doctype html> <html> <head> <meta charset="utf-8"> <title>19DOM基础</title> <script src="19DOM基础.js"></script> </head> <body> <h1>DOM</h1> <p>DOM 是<cite>Document Object Model</cite>首字母简写,中文翻译为<b>文档对象模型</b>, 是<i>W3c</i>组织推荐的处理可扩展标识语言的标准编程接口。</P> <ul> <li>D表示文档,HTML文档结构。</li> <li>O表示对象,文档结构的Javascript脚本化映射。</li> <li>M表示模型,脚本与结构交互的方法和行为。</li> </ul> <script> function count(n){ var num=0; if(n.nodeType == 1) num++; var son = n.childNodes; for(var i=0; i<son.length; i++){ num+=count(son[i]); } return num; } console.log("当前文档包含" + count(document) + " 个元素"); </script> </body> </html>
节点类型 nodeType属性返回值 nodeName返回值 nodeValue返回值
Element 1 标签名称 null
Attr 2 属性的名称 属性的值
Text 3 #text 节点的内容
访问节点:
ownerDocument:返回当前节点的根元素(document对象)
parentNode:返回当前节点的父节点。所有节点都仅有一个父节点
childNodes:返回当前节点的所有子节点的节点列表
firstChild:返回当前节点的首个子节点
lastChild:返回当前节点的最后一个子节点
nextSibling:返回当前节点之后相邻的同级节点
previousSibling:返回当前节点之前相邻的同级节点
本例展示了如何访问保存在nodeList中的节点:通过方括号,也可以使用item()方法
<ul> <li>D表示文档,HTML文档结构。</li> <li>O表示对象,文档结构的Javascript脚本化映射。</li> <li>M表示模型,脚本与结构交互的方法和行为。</li> </ul> <script> var tag = document.getElementsByTagName("ul")[0]; var a = tag.childNodes; console.log(a[0].nodeType); console.log(a.item(1).innerHTML); //显示第二个节点包含的文本 console.log(a.length); </script>
parentNode属性返回节点永远是一个元素类型节点,因为只有元素节点才能包含子节点
node.childNodes[0] = node.firstChild node.childNodes[node.childNodes.length-1] = node.lastChild
添加节点
<body> <div id="box"> <p>测试Div1</P> <p>测试Div2</P> <p>测试Div3</P> </div> <script> var box = document.getElementById("box"); var p = document.createElement("p");//只是创建了一个元素节点p,还没有添加到文档中去,只是存在在内存中 box.appendChild(p);//将新节点p添加到id=box的div的子节点列表的末尾上 var text = document.createTextNode("测试Div4"); //p.appendChild(text);//把文本添加到P里面 //box.appendChild(text); document.body.appendChild(text); </script> </body>
<body> <div id="box"> <p>测试Div1</P> <p>测试Div2</P> <p>测试Div3</P> </div> <script> var box = document.getElementById("box"); var p = document.createElement("p"); box.parentNode.insertBefore(p,box);// 在box的父节点添加一个P,就是在box前面添加一个元素节点 </script> </body>
//向后添加节点 <body> <span>开始</span> <div id="box"> <p>测试Div1</P> <p>测试Div2</P> <p>测试Div3</P> </div> <span>结束</span> <script> var box = document.getElementById("box"); var p = document.createElement("p"); insertAfter(p, box); function insertAfter(newElement, targetElement){ //得到父节点 var parent = targetElement.parentNode; //span节点的前面添加 parent.insertBefore(newElement,targetElement.nextSibling); } </script> </body>
替换节点
<body> <span>开始</span> <div id="box"> <p>测试Div1</P> <p>测试Div2</P> <p>测试Div3</P> </div> <span>结束</span> <script> var span = document.getElementsByTagName("Span")[0]; var em = document.createElement("em"); span.parentNode.replaceChild(em, span); </script> </body>克隆节点
<body> <span>开始</span> <div id="box"> <p>测试Div1</P> <p>测试Div2</P> <p>测试Div3</P> </div> <span>结束</span> <script> var box = document.getElementById('box'); var clone = removeWhiteNode(box).firstChild.cloneNode(true); box.appendChild(clone); //移除空白节点 function removeWhiteNode(node){ for(var i=0; i<node.childNodes.length; i++){ if(node.childNodes[i].nodeType==3&&/^\s+$/.test(node.childNodes[i].nodeValue)){ node.removeChild(node.childNodes[i]); } } return node; } </script> </body>合并同一级别的文本节点
<body> <span>开始</span> <div id="box"></div> <span>结束</span> <script> var box = document.getElementById('box'); var text1 = document.createTextNode("Mr."); var text2 = document.createTextNode("Lee"); box.appendChild(text1); box.appendChild(text2); box.normalize();//合并同一级别的文本节点 alert(box.childNodes.length); </script> </body>