js中关于节点的操作

基础理论

顶级对象：文档对象document
元素：页面上所有的标签
节点（node）页面上所有的内容（标签，属性，文本（文字，换行，空格））node
根节点：html
节点的属性：
.nodeType:节点的类型：1>>>标签 2>>>属性 3>>>文本
.nodeName:节点的名字：大写的标签名字>>>标签节点 ，小写的属性名字>>>属性的节点
#text>>>文本节点
.nodeValue:节点的值：null>>>标签节点 ， 属性的值>>>属性节点 ，文本内容>>>文本节点

获取节点和元素

//获取父节点
console.log(obj.parentNode);
//获取父元素
console.log(obj.parentElement);
//获取子节点
console.log(obj.childNodes);//在ie8中获取的是子元素
//获取子元素
console.log(obj.children);
----------------------------------------
//第一个子节点
console.log(obj.firstChild);//在ie8 显示的是第一个子元素
//第一个子元素
console.log(obj.firstElementChild);//在ie8中不支持
//最后一个子节点
console.log(obj.lastChild);//在ie8 显示的是最后一个子元素
//最后一个子元素
console.log(obj.lastElementChild);//在ie8中不支持
----------------------------------------
//获取前一个兄弟节点
console.log(obj.previousSibling);//在ie8中 显示的是前一个兄弟元素
//获取前一个兄弟元素
console.log(obj.previousElementSibling); //在ie8中 不支持
//获取后一个兄弟节点
console.log(obj.nextSibling); //在ie8 显示的是最后一个兄弟元素
//获取后一个兄弟元素
console.log(obj.nextElementSibling); //ie8中不支持

解决四种节点兼容代码

 //获取第一个子元素
 function getFirstElementChild(element) {
        if (element.firstElementChild) {
            return element.firstElementChild;
        } else {
            // element.firstChild;
            var node = element.firstChild;
            while (node && node.nodeType != 1) {
                node = node.nextSibling;
            }
            return node;
        }
    }
	//获取最后一个子元素
    function getLastElementChild(element) {
        if (element.lastElementChild) {
            return element.lastElementChild;
        } else {
            var node = element.lastChild;
            while (node && node.nodeType != 1) {
                node = node.previousSibling;
            }
            return node;
        }
    }
    //获取上一个兄弟元素
     function getPreviousElementSibling(element) {
            if (element.previousElementSibling) {
                return element.previousElementSibling;
            }
            else {
                var node = element.previousSibling;
                while (node && node.nodeType != 1) {
                    node = element.previousSibling;
                }
                return node;
            }
        }
        //获取后一个兄弟元素
        function getNextElementSibling(element) {
            if (element.nextElementSibling) {
                return element.nextElementSibling;
            }
            else {
                var node = element.nextSibling;
                while (node && node.nodeType != 1) {
                    node = element.nextSibling;
                }
                return node;
            }
        }