dom提供了很多实用的api，这些api让我们可以轻松的访问html文档。所谓api（应用程序接口），简单来说，就是让我们可以直接使用它访问程序的一些属性或方法，而不用了解程序内部的运作过程和原理。
前面我们已经了解了dom把html文档解析为节点树，实际上html节点树只是整个dom树的一个分支，另一个分支则是xml。在详细介绍html dom节点的操作之前，先来看一下完整的dom树：
网上没找到关于完整的dom树的图，所以自己大致做了一个。准确说这个应该叫dom继承树，因为很多我们常用的dom对象的方法都绑定在document和element对象上。我们从html文档获取的dom元素上使用的方法，其实大部分都继承自这俩。关于javascript的继承，以后会在讲原型的时候专门讲解。
这里放一段html代码供后面测试使用：
1 <body> 2 <h1 class="h1">h1</h1> 3 <h3 id="h3">h3</h3> 4 <div name="div"> 5 <p> 6 <span>span</span> 7 </p> 8 </div> 9 </body>
一 查找节点
1， 元素(标签)查找
document代表整个文档。
document.getelementbyid():通过标签id属性查找元素。绑定在document上所以只能使用document调用。
document.getelementsbyname()：通过标签name属性查找元素（所有的）。绑定在htmldocument上，只能使用document调用。
.getelementsbytagname()：通过标签名查找元素（所有的）。document和element上均有绑定。
.getelementsbyclassname()：通过标签class属性查找元素（所有的）。document和element上均有绑定。
.queryselector()：通过css方式查找元素。document和element上均有绑定。
.queryselectorall()：通过css方式查找元素（所有的）。document和element上均有绑定。
注意，最后两个虽然速度快，但它不是实时的查找元素，而是这一时刻的静态快照，使用的时候请务必小心。
我要评论1 var h3 = document.getelementbyid("h3"),
2 h1 = document.getelementsbyclassname("h1")[0],
3 div = document.getelementsbyname("div")[0],
4 p = document.getelementsbytagname("p")[0],
5 span = p.getelementsbytagname("span")[0];
除了.getelementbyid和.queryseletor是获取单个元素外，其他方式都是获取一组元素，返回值都是类数组，所以访问需遵循数组访问方式。
2， 节点树遍历（包含所有类型节点）
node.parentnode：获取节点的父节点。
node.childnodes：获取节点的所有子节点。
node.firstchild：获取节点的第一个子节点。
node.lastchild：获取节点的最后一个节点。
node.nextsibling：获取节点紧邻的下一个兄弟节点。
node.previoussibling：获取节点紧邻的上一个兄弟节点。
多数情况下我们都是访问元素节点，所以这里就不举例说明了。
3， 元素节点树遍历（只包含元素）
node.parentelement：获取节点的父元素节点。
node.children：获取节点的所有子元素节点。
node.firstelementchild：获取节点的第一个元素子节点。
node.lastelementchild：获取节点的最后一个元素子节点。
node.nextelementsibling：获取节点的紧邻的下一个兄弟元素。
node.previouselementsibling：获取节点的紧邻的上一个兄弟元素。
元素节点都有一个attributes属性，值是该元素节点的属性集合,诸如id，class，name等等，也是一个类数组。
1 h3.parentelement;//body 2 p.children[0];//span 3 document.body.firstelementchild;//h1 4 document.body.lastelementchild;//div 5 h1.nextelementsibling;//h3 6 div.previouselementsibling;//h3
二 创建节点
1，创建
document.createelement();创建元素节点。
document.createtextnode();创建文本节点。
document.createcomment();创建注释节点。
2，插入
parentnode.appendchild();向父元素内部的最后一个位置插入节点。
parentnode.insertbefore(a,b);向父元素内部b节点之前插入a节点。
1 var strong = document.createelement("strong");
2 p.appendchild(strong);
3 console.log(p);//<p><span>span</span><strong></strong><p>
4 var text = document.createtextnode("some text");
5 div.insertbefore(text,p);
6 /*
7 <div>
8 some text
9 <p>
10 <span>span</span>
11 <strong></strong>
12 </p>
13 </div>
14 */
三 删除节点
删除
parentnode.removechild()；父节点删除子节点，从页面剪切出来，有返回值。
node.remove();节点自己，直接删除，无返回值。
替换
parentnode.replacechild(new,old)；用new节点替换父元素内部old节点。用的很少。
1 var removedh1 = document.body.removechild(h1); 2 console.log(removedh1);//<h1 class="h1">h1</h1> 3 var removedh3 = h3.remove(); 4 console.log(removedh3);//undefined
补充：元素节点的属性和方法
属性
node.innerhtml;获取父节点内部的html结构。
node.innertext/textcontent；获取父节点内部的文本内容。
方法
node.setattribute();设置元素的属性和值。
node.getattribute();获取元素的属性值。
1 div.innerhtml;//<div><span>span</span></div>
2 span.innertext;//"span"
3 h1.getattribute("class");//"h1"
4 h1.setattribute("id","idh1");//<h1 class="h1" id = "idh1"></h1>
节点操作整理的有些凌乱，请见谅！下一篇将详细介绍dom事件处理。
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
网友评论