DOM学习笔记
一、什么是DOM
??? 本人认为，DOM和Java中的包JDOM是一样的东西，就好像是一个包，在包里面提供了一些方法可以让程序员对XHTML中的节点进行访问和操作。
??? DOM是文档对象模型（document objec model）的缩写。
?
在这里不详细介绍DOM的其他情况，只是记录了一些方法
?
二、操作：1.访问DOM节点：1.1 按id取元素：getElementById()
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DOM</title><script>function displayNodeInfo(){var x = document.getElementById("test");alert("nodeName:"+x.nodeName+";nodeValue:"+x.nodeValue+";nodeType:"+x.nodeType);}</script></head><body><input type="button" value="测试" onclick="displayNodeInfo();"/><br/><div id="test">Test</div></body></html>???? 取到的节点是id值为"test”的div节点。
???? 在DOM中一共有四种类型的节点：
????
nodetype的值节点类型1元素节点2属性节点3文本节点4注释节点1.2 按标签名取元素集：getElementByTagName()
???
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DOM</title><script>function displayNodeInfo2(){var x = document.getElementsByTagName("li");alert("长度为："+x.length);}</script></head><body><input type="button" value="测试2" onclick="displayNodeInfo2()"/><ul> <li>太极1：从零开始</li> <li>白鹿原</li> <li>二次曝光</li></ul></body></html>?
??? getElementByTagName将会返回一个对象数组，每个对象分别对应着document对象中的一个列表项li元素，因此可以利用length属性查出这个数组里的元素个数。因为x是一个数组，因此可以用循环语句来遍历这个数组中的元素。
2.操作元素内的文本??? 想要获取元素内文本内容，首先需要理解，DOM中元素并不是直接包含文本的，而是包含在一个子文本节点的。理解这一点非常关键。
??? 但是这个操作会因浏览器的不同而不同（某书上说的）
??? 方法：元素.innerText不适用于火狐，适用于IE
??? 方法：元素.firstChild.nodeValue适用于火狐，也适用于IE
???
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DOM</title><script>function displayNodeInfo3(){var x2 = document.getElementById("test3");/*alert(x2.innerText);*/alert(x2.firstChild.nodeValue);}</script></head><body><input type="button" value="测试3" onclick="displayNodeInfo3()"/><div id="test3">我是一个程序员</div></body></html>?
?3.操作元素内的HTML??? 用法和innerText相似，但是可以适用于所有的浏览器，但是他会获取的不仅仅是文本，还有标签，举个例子：
???
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DOM</title><script>function displayNodeInfo3(){var x2 = document.getElementById("test3");alert(x2.innerText);/*alert(x2.firstChild.nodeValue);*/}function displayNodeInfo4(){var x2 = document.getElementById("test3");alert(x2.innerHTML);}</script></head><body><input type="button" value="测试3" onclick="displayNodeInfo3()"/><div id="test3">我是<br/>一个<br/>程序员</div><br/><input type="button" value="测试4" onclick="displayNodeInfo4()"/><div id="test4">我是<br/>一个<br/>程序员</div></body></html>?
??? 上面两个方法分别用的是innerText和innerHTML方法，运行之后，会发现，按钮“测试3”点击之后，弹出来的对话框是按照格式输出的，而按钮“测试4”弹出来的对话框没有按格式输出，而是一行输出，同时输出了HTML标签<br>
4.修改DOM节点4.1 创建DOM节点
??? 常用方法如下：
???
方法描述createAttribute(name)用给定名称name创建属性节点createCDATASection(text)用包含文本text的文本子节点创建一个CDATA SectioncreateComment(text)创建包含文本text的注释节点createDocumentFragment()创建文档碎片节点createElement(tagname)创建标签名为tagname的元素createEntityReference(name)创建给定名称的实体引用节点createProcessing Instruction(target,data)创建包含给定target和data的PI节点createTextNode(text)创建包含文本text的文本节点?
??? 举个例子：
????
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DOM节点操作</title><script>function createDiv(){var newDiv = document.createElement("div");newDiv.setAttribute("id","test");var bodyTags = document.getElementsByTagName("body");var thisBody = bodyTags[0];thisBody.appendChild(newDiv);var textNode = document.createTextNode("这是一个新的div");newDiv.appendChild(textNode);}</script></head><body><input type="button" value="创建一个新的div" onclick="createDiv()" /></body></html>?
??? 首先创建一个div元素，但是为了以后方便对此元素的引用，要给此元素添加一个id因此用setAttribute的方法，为div添加了一个id，之后要用appendChild方法将div元素添加到HTML中，此方法会将div添加到父节点的尾部，所以我们要找到目标父节点，我们想要将div添加到body标签里面，就要获取body元素，bodyTags是getElementsByTagName("body");返回的一个数组，因此body节点就是此数组中的第一个元素，之后将div添加至body里面，再创建一个text节点，添加到div元素里面。
?
4.2 插入DOM节点
??? 在已有的HTML文档中插入一个DOM节点，首先要考虑插入的位置，是在某些元素之前还是之后，下面介绍两种常用方法：insetBefore和appendChild
?
1. insertBefore函数：
??? 此函数可以在另一个子元素前插入一个元素：父节点.insertBefore(待插入节点，基准节点)
??? 例子：
???
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DOM节点操作</title><script>function insertBeforeE(){var liNode = document.createElement("li");liNode.setAttribute("id","newOne");var textNode = document.createTextNode("女朋友，男朋友");liNode.appendChild(textNode);var targetNode = document.getElementById("flag");var ul = document.getElementsByTagName("ul")[0];ul.insertBefore(liNode,targetNode);}</script></head><body><input type="button" value="前插入一个节点" onclick="insertBeforeE()"/><ul> <li>疯狂愚蠢的爱</li> <li id="flag">蓝精灵</li> <li>暮光之城</li></ul></body></html>?
??? 2.appendChild函数
??? 在前面的例子当中已经用过了
??? 用法：父节点.appendChild(待插入节点)；
??? 他不需要指定其兄弟节点的位置，因为他的作用是添加到末尾。
?
4.3 删除DOM节点
??? 函数及用法：父节点.removeChild(待删除节点)
??? 例子：
???
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DOM节点操作</title><script>function deleteNode(){var ul = document.getElementsByTagName("ul")[0];var deleteLi = document.getElementById("bang");ul.removeChild(deleteLi);}</script></head><body><input type="button" value="删除一个节点" onclick="deleteNode()"/><ul> <li>向左走，向右走</li> <li>重庆森林</li> <li id="bang">瑞恩.高斯林</li></ul></body></html>?
?? 由于可以用parentNode方法获取元素的父节点，因此亦可以用一下方法来实现：
???
???
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DOM节点操作</title><script>function deleteNode(){var deleteLi = document.getElementById("bang");remove(deleteLi);}function remove(elem){if(elem){elem.parentNode.removeChild(elem);}}</script></head><body><input type="button" value="删除一个节点" onclick="deleteNode()"/><ul> <li>向左走，向右走</li> <li>重庆森林</li> <li id="bang">瑞恩.高斯林</li></ul></body></html>?
??? 删除全部节点：
???
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DOM节点操作</title><script>function deleteNode(){var ul = document.getElementsByTagName("ul")[0];emptyNode(ul);}function emptyNode(elem){while(elem.firstChild){remove(elem.firstChild);}}function remove(elem){if(elem){elem.parentNode.removeChild(elem);}}</script></head><body><input type="button" value="删除全部子节点" onclick="deleteNode()"/><ul> <li>向左走，向右走</li> <li>重庆森林</li> <li id="bang">瑞恩.高斯林</li></ul></body></html>?
?
?