[js笔记整理]DOM 篇

一、节点类型

1.元素节点：HTML元素

2.文本节点：元素标签中的内容

3.属性节点：元素的属性

(检测节点类型：node.nodeType　　//元素=1，属性=2，文本=3)

二、使用DOM获取元素

1.通过名称类型访问节点

（1）getElementById();

（2）getElementsByTagName();

2.利用父子关系查询节点

（1）.ChildNodes //获取全部子节点数组(在Firefox chrome ie9中会包含文本节点）

（2）.children //只选择标签节点的子元素

（3）.parentNode　　//父节点

（4）.offsetNode　　//绝对定位的父节点

（5）.hasChildnNodes()　　//判断是否有子节点 返回布尔值

（6）.firstChild　　//第一个子节点　　(在Firefox chrome ie9中会包含文本节点）

（7）.lastChild　//最后一个子节点　　(在Firefox chrome ie9中会包含文本节点）

3.利用兄弟关系访问节点

（1）.nextSibling

（2）.previousSibling

兼容性：在Firefox、chrome等浏览器中会包含文本节点（空节点）

(兼容处理nextSibing)

 1 function(node)
 2 {
 3     var tempLast=node.parentNode.lastChild;
 4     if(node==tempLast)
 5         return null;
 6     var tempObj=node.nextbiSing;
 7     while(tempObj.nodeType !=1 && tempObj!=tempLast)
 8         tempObj=tempObj.nextSibling;
 9     return (tempObj.nodeType==1)?tempObj;null;
10 }

三、获取节点属性

（1）gitAttribute(属性名);　　//获取属性值

（2）setAttribute(属性名,属性值);　　//设置属性值

（3）removeAttribute(属性名);　　//删除属性值

四、创建和添加节点

1、创建节点

（1）createElement("标签名");

（2）createTextNode("文本内容");

（3）createDocumentTragment();

2、添加节点

appendChild(nodename);　　//添加子节点//默认插入到末尾//动作删除创建位置，插入到新位置

3、删除节点

removeChild(nodename);　　//找的父元素删除。。。。 x.parentNode.removeChild(x);

4、替换节点

replaceChild(newNode,oldNode);　　//查找父元素替换。。。 x.parentNode.replaceChild(oNewP,oOldP);

5、在特定节点前插入

insertBefore(newNode,targetNode);　　

6、在特定节点后插入

1 function insertAfter(newElement,targetElement)
2 {
3     if(oParent.lastChild==targetElement)
4         oParent.appendChild(newElement);
5     else
6         oParent.insertBefore(newElement,targetElement.nextSibling);
7 }