DOM
2017-04-04 本文已影响0人
想个名字真难ing
- DOM是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
<html>
<head>
<meta charset="UTF-8">
<title>hellow world</title>
</head>
<body>
<div class="div">
</div>
</body>
</html>
- 文档节点是每个文档的根节点。在这个例子中，文档节点只有一个根节点，即<html>元素称之为文档元素，每个文档只能有一个文档元素。在HTML页面中，文档元素时钟都是<html>元素。每一段标记都可以通过树中的一个节点表示：HTML元素通过元素节点表示，特性（attribute）通过特性节点表示，文档类型通过文档类型节点表示，而注释则通过注释节点表示。总共有12种节点类型，这些类型都继承自一个基类型。
1.Node类型
javascript中的所有节点类型都继承自Node类型，因此所有类型都共享着相同的基本属性和方法。每个节点都有一个nodeType属性，用于表明节点的类型。要了解节点的具体信息，可以使用nodeName和nodeValue这两个属性。这两个属性的值完全取决于节点的类型，在使用这两个值之前，可以像下面一样检测一下
if(someNode.NodeType == 1){
value = someNode.nodeName;
alert(value);
}
2.节点关系。
在HTML中，可以将<body>看成是<html>元素的子元素，每一个节点都有一个childNodes属性，其中保存着一个NodeList对象。这个时候打印出来第一个的Nodename是文本类型，childNodes把第一个空格当做第一个child作为文本类型。（好不靠谱的感觉）
<div id="div">
<h1>111111</h1>
<P>1111111</P>
<P>1111111</P>
<P>1111111</P>
<h3>1111111</h3>
</div>
</body>
<script type="text/javascript">
var oDiv=document.getElementById("div");
var array=Array.prototype.slice.call(oDiv.childNodes,0);
for (var i=0;i<array.length;i++) {
alert(array[i].nodeName)
}
</script>
下面列出一些常用的操作节点的方法：
someNode.lastChild
someNode.firstChild
someNode.nextSibling
someNode.previousSibling
someNode.appendChild //添加至子节点的最后一个节点
someNode.insertBefore(newNode,前一个同胞节点）
//替换第一个节点
someNode.replaceChild(newNode,someNode.firstChild)
//移除第一个节点
someNode.removeChild(someNode.firstChild)
- cloneNode()方法
这个方法接收一个布尔值的参数，表示是否执行深复制，深复制也就是复制节点及其整个子节点树，即只复制节点本身，复制后返回的节点副本属于稳当所有，但没有为他制定父节点，除非appendChild()、insertBefore()将它添加到文档中。
<ul id="ul">
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<script type="text/javascript">
var oUl=document.getElementById("ul");
var deepList=oUl.cloneNode(true);
alert(deepList.childNodes.length); //3
var qianList=oUl.cloneNode(false);
alert(qianList.childNodes.length); //3
</script>
