javascript之DOM节点

javascript之DOM节点详细剖析，以下列出的基本是最常用的

childNodes

//注释节点不会被解析
//在主流浏览器里获取对象下的所有节点(包括 文本节点/元素节点),
//在IE8及以下浏览器里会忽略掉文本节点,只会返回元素节点(标签节点)
var box = document.getElementById("box");
alert(box.childNodes.length)

children

推荐使用
//只会返回对象下的所有的元素节点
//没有兼容性问题
var box = document.getElementById("box");
alert(box.children.length)

getAttributeNode

//属性节点，获取当前元素的属性的值。
var box = document.getElementById("box");
alert(box.getAttributeNode('id').nodeValue);// box

nodeType

//返回节点类型  元素节点类型(1) ，文本节点类型(3)
var box = document.getElementById("box");
alert(box.children[0].nodeType)//返回1

firstChild

//返回对象下的第一个子节点(可能文本节点或元素节点)
//主流浏览器可能文本节点或元素节点
//IE678下会返回元素节点
var box = document.getElementById("box");
alert(box.firstChild)

lastChild

//返回对象下的最后一个子节点(可能文本节点或元素节点)
//主流浏览器可能文本节点或元素节点
//IE678下会返回元素节点
var box = document.getElementById("box");
alert(box.lastChild)

firstElementChild

//返回对象下的第一个子元素节点
//IE678不支持
var box = document.getElementById("box");
alert(box.firstElementChild)

lastElementChild

//返回对象下的最后一个子元素节点
//IE678不支持
var box = document.getElementById("box");
alert(box.lastElementChild)

nextSibling

//返回对象的下一个节点
//主流浏览器可能文本节点或元素节点
//IE678下会返回元素节点，如果没有就返回null
var box = document.getElementById("box");
alert(box.nextSibling)

previousSibling

//返回对象的上一个节点
//主流浏览器可能文本节点或元素节点
//IE678下会返回元素节点，如果没有就返回null
var box = document.getElementById("box");
alert(box.previousSibling)

nextElementSibling

//返回对象的上一个元素节点
//主流浏览器返回上一个元素节点
//不兼容IE678，会返回undefined 
var box = document.getElementById("box");
alert(box.nextElementSibling)

previousElementSibling

//返回对象的下一个元素节点
//主流浏览器返回下一个元素节点
//不兼容IE678，会返回undefined 
var box = document.getElementById("box");
alert(box.previousElementSibling)

parentNode

//返回元素的父节点
//没有兼容问题 
var box = document.getElementById("box");
alert(box.parentNode)

offsetParent

//找到元素的定位父级
//没有兼容问题
var box = document.getElementById("box");
alert(box.offsetParent)

常用获取对象到文档的值

function getoffset(obj) {
     var json = {
               left:0,
               top:0
      };
     while(obj !== document.body){
            json.left += obj.offsetLeft;
            json.top += obj.offsetTop;
            obj = obj.offsetParent;
     };
     return json;
 }

insertBefore

//把新建的p放到已经存在的box的前面(参数2个必须) 
var box = document.getElementById("box");
var op = document.createElement("p");
box.insertBefore(op,box)

cloneNode()

//复制节点
var box = document.getElementById("box");
var obj = box.cloneNode();
alert(obj.tagName)

深度复制（cloneNode(true)）

//深度复制，连行内样式的属性/事件也一起复制(必须是行内的才能复制下来)
var box = document.getElementById("box");
var obj = box.cloneNode(true);
alert(obj.tagName)

removeChild

//通过父级来删除自己
//仅仅是把这个对象移除了HTML页面，他还会保存在JS里
var box = document.getElementById("box");
box.parentNode.removeChild(box);
box1.parentNode.appendChild(box)//通过兄弟元素box1找到父级，还能把被removeChild(box)被移除的box添加进去

nodeName

//返回的标签名是大写
var box = document.getElementById("box");
if (box.nodeName ==="DIV") {
      alert(1)
}或者用正则匹配
if (/DIV/i.test(box.nodeName)) {// i 在正则里是忽略大小写
      alert(1)
}