js中的节点操作

节点概述

网页中所有的内容都是节点(标签，属性，文本，注释等)
每一个节点都有nodeType属性，nodeName属性和nodeValue属性
常用的节点

		元素节点
            nodeType:   1
            nodeName:   大写的标签名
            nodeValue:  null

        属性节点
            nodeType:   2
            nodeName:   属性名称
            nodeValue:  属性值

        文本节点
            nodeType:   3
            nodeName:   #text
            nodeValue:  文本内容

        注释节点
            nodeType:   8
            nodeName:   #comment
            nodeValue:  注释内容

节点操作与DOM获取元素比较

获取元素通常使用两种方式
1.利用DOM提供的方法获取元素

• document.getElementById()
• document.getElementsByClassName()
• document.querySelector()等
• 逻辑性不强，繁琐

2.利用节点层级关系获取元素

• 利用父子兄弟节点关系获取元素
• 逻辑性强，但兼容性差

节点操作

    <ul id="ul">
        <li>我是li标签1</li>
        <li id="li2">我是li标签2</li>
        <li>我是li标签3</li>
        <li>我是li标签4</li>
        <li>我是li标签5</li>
    </ul>
    
    <script>
    	var ul = document.getElementById("ul");
    	var li2 = document.getElementById("li2");

        // 获取父节点  : 子元素.parentNode
        console.log(li2.parentNode);	
        // 获取所有子节点
        console.log(ul.childNodes);
        // 获取所有子元素
        console.log(ul.children);
        
		//获取子节点
        console.log(ul.firstChild);
        console.log(ul.lastChild);

        //获取子元素
        console.log(ul.firstElementChild);	//不支持IE8
        console.log(ul.lastElementChild);	//不支持IE8
	
		//获取兄弟节点
        console.log(li2.previousSibling);
        console.log(li2.nextSibling);

        //获取兄弟元素
        console.log(li2.previousElementSibling);	//不支持IE8
        console.log(li2.nextElementSibling);	//不支持IE8

    </script>

IE8不兼容兄弟元素,子元素的操作，执行得到undefined，而且 在IE8里面没有任何替代方案
IE8要获取兄弟元素，子元素 只能通过节点获取，所以需要兼容代码

		// 获取上一个兄弟元素的封装
        /**
        @param  ele  : 需要查找的目标参数
        @return  node  : 返回的是一个元素节点
        */
        function getPreviousElement(ele) {
            // 能力检测
            if(ele.previousElementSibling)  {  // 谷歌火狐
                return ele.previousElementSibling;
            } else {  // IE8
                // 获取上一个节点  :  null  元素  文本  注释
                var node = ele.previousSibling;
              // 1. node必须存在, 不是null,  2. node不是元素节点
              while(node != null && node.nodeType != 1) {
                 node =  node.previousSibling
              }
              // node == null  或者  node.nodeType == 1
              return node;
            }
        }
        
        // 获取下一个兄弟元素的封装
		/**
        @param ele : 需要查找的目标参数
        @return node : 返回下一个元素节点
        */
        function getNextElement(ele) {
            if (ele.nextElementSibling) {
                return ele.nextElementSibling;
            } else {
                var node = ele.nextSibling;
                //node必须存在，不是null node不是元素节点
                while (node != null && node.nodeType != 1) {
                    node = node.nextSibling;
                }
                return node;
            }
        }
        
		// 获取第一个子元素兼容性封装
        /**
        @param ele : 需要查找的目标参数
        @return node : 返回第一个子元素
        */
        function getFirstChild(ele){
            if(ele.firstElementChild){
                return ele.firstElementChild;
            }else{
                return ele.children[0];
            }
        }
        console.log(getFirstChild(ul));
        
        // 获取最后一个子元素兼容性封装
		/**
        @param ele : 需要查找的目标参数
        @return node : 返回最后一个子元素
        */
        function getLastChild(ele){
            if(ele.lastElementChild){
                return ele.lastElementChild;
            }else{
                return ele.children[ele.children.length-1];
            }
        }
        console.log(getLastChild(ul));

克隆节点

1. 克隆节点只会在内存中克隆一份, 不会添加到页面上 只能手动添加
2. 克隆会把id也克隆过去
3. 参数默认为false不克隆任何子节点，包括自身的文本，true克隆所有子节点

<div id="box">我是盒子内容</div>

<script>
		var box = document.getElementById("box");
        var box1 = box.cloneNode()
        console.log(box1);
        // 为了保持页面id的唯一性,  需要修改克隆元素的id
        box1.id = "box1"
        // 添加子元素到页面中(父元素中)   父元素.appendChild(子元素)
        document.body.appendChild(box1)
</script>