⽂档对象模型（DocumentObjectModel）
DOM(Document Object Model,⽂档对象模型) 最早于1998年由万维⽹联盟（W3C）标准化，只是表现和处理XML、XHTML和HTML 数据的⼀种⽅法。简⽽⾔之，DOM为⽂档提供了结构化表⽰，并定义了如何通过脚本来访问⽂档结构。⽬的其实就是为了能让js操作html 元素⽽制定的⼀个规范。
DOM将数据表⽰为⼀棵树，从单⼀的主⼲（称为根）开始。在HTML页⾯中，起始点是HTML标记。根之上是树枝，每根树枝是HTML页⾯的另⼀个元素，这样，每个HTML元素及其属性和值都可以由DOM表⽰。
元素在DOM中表现为节点(Node)。节点有⾃⼰的分⽀，这些分⽀也是节点。这种结构通常以家族的⽅式描述：双亲(Parents)节点有⼦(Child)节点，节点还有兄弟(Sibling)节点，等等。⽹页中的根节点docume
nt没有双亲节点，只有⼀个⼦节点:html。DOM中的每个节点代表⼀个对象。这些对象有特殊的属性，反应每个节点与其直接家族成员的关系。
（⼀）访问节点的⽅法
(1).getElementById() 通过 id 访问节点，可以到特定的元素。
function$(id){ElementById(id);}
(2).getElementsByTagName() 通过 标签（元素）访问节点，可以到特定类型的所有元素。该⽅法返回选中元素的⼀个类数组列表(注意，⽅法名称中的复数形式Elements). getElementsByTagName() 可以在任何元素上调⽤，所以你可以使⽤特定的起始点，限制搜索范围。
var header = ElementById(‘header’);
var hLinks = ElementsByTagName(‘a’);
(3).getElementsByClassName() 通过类名访问节点，但是此⽅法有兼容性问题（IE6、IE7、IE8），此⽅法在IE9之前的版本中不存在。解决⽅法，可以封装⾃⼰的class类。
(⼆)
节点间的访问关系
parentNode⽗节点：
兄弟节点：显⽽易见存在兼容性问题(IE678)⽀持nextSibling,previousSibling
其他主流的浏览器⽀持nextElementSibling,previousElementSibing 要想兼容，我们不妨合写 ⽤||
<script  type ="text/javascript">
//封装⾃⼰的class 类名
function  getClass (classname){
//如果浏览器⽀持，则直接返回
if (ElementsByClassName){
return  ElementsByClassName(classname);
}
// 不⽀持的浏览器
var  arr=[]; //⽤于存放满⾜的数组
var  dom = ElementsByTagName("*");
//alert(dom.length);sibling什么时候用复数
for  (var  i = 0; i<dom.length;i++) {
if  (dom[i].className == classname) {
arr.push(dom[i]);
}
}
return  arr;
}
getClass("demo");
var  dom = ElementsByClassName("demo");
alert(dom.length);
}
</script >
<body >
<div ></div >
<div  class ="demo"></div >
<div ></div >
<div  class ="demo"></div >
<div ></div >
<div  class ="demo"></div >
</body >
<script  type ="text/javascript">
var  x = ElementById("x");
this .parentNode.style.display ="none";
}
}
</script >
注意：必须先写 正常浏览器 后写 ie678
同理⼦节点。
孩⼦节点：
(1).childNodes选出所有的孩⼦ ，它是标准属性，它返回指定元素的⼦元素集合，包括HTML节点，所有属性，⽂本节点。 ⽕狐 ⾕歌等⾼
版本会把换⾏也看做⼦节点：
解决⽅法：利⽤ nodeType == 1 时才是元素节点 来获取元素节点（标签 元素 ）
(2).children 选取所有的孩⼦ （只有元素节点）
注意：ie 678 包含 注释节点 这个要避免开。
(三)DOM 节点的操作
<script>
window .onload  = function(){
var one = document .getElementById ("one");
//one .nextSibling.style.backgroundColor  = "red"; 这个之后IE 678⽀持
// 注意：必须先写 正常浏览器⽀持的 再写IE678⽀持的
var div = one .nextElementSibling  || one .nextSibling ;
div .style.backgroundColor  ="red";
var divp = document .getElementById ("parent");
var fir = div .firstElementChild  || div .firstChild ;
fir .style.backgroundColor  = "purple";
}</script>
<script >
var  ul = ElementById("ul");
var  childrens = ul.childNodes;
//alert(childrens.length);//  9 这个换⾏也算
//解决⽅法
for  (var  i = 0;i<childrens.length;i++) {
if  (childrens[i].nodeType== 1) {
childrens[i].style.backgroundColor="pink";
}
}
</script >
(1)创建节点
var div = atElement(“div”);
创建⼀个新的div标签
(2)插⼊节点
1. appendChild(); 添加孩⼦ 放到盒⼦的 最后⾯。
2. insertBefore(插⼊的节点，参照节点) ⼦节点 添加孩⼦ 写满两个参数
var demo = ElementById("demo");
var childrens = demo.children;
var firstDiv = ateElement("div");
//插⼊节点添加孩⼦放到盒⼦的最后⾯
demo.appendChild(firstDiv);
var test = ateElement("div");
demo.insertBefore(test,childrens[0]);
//如果第⼆个参数为null，则默认这个新⽣成的盒⼦放到最后⾯
demo.insertBefore(test,null);
(3)移出节点
var xd = ElementById("xiongda");
(4)克隆节点
cloneNode()；复制节点
括号⾥⾯可以跟参数 ，如果 ⾥⾯是 true 深层复制， 除了复制本盒⼦，还复制⼦节点 如果为 false 浅层复制 只复制 本节点 不复制 ⼦节点。
var last = childrens[0].cloneNode();
demo.appendChild(last);
（四）设置节点属性
1. 获取属性 getAttribute(属性)
通过这个⽅法，可以得到 某些元素的 某些属性 。
2. 设置节点属性 setAttribute(“属性”,”值”);
⽐如说，我们想要把 ⼀个 类名 改为 demo
div.setAttribute(“class”,”demo”);
3. 删除某个属性 removeAttribute(“属性”);
这个盒⼦就没有title 属性 给删掉了 。
先总结到这⾥，也希望各位⼤神也能给予⼀些指点

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。