JS DOM节点的介绍与获取

DOM节点的介绍

网页的内容是由标签组成的这句话并不完全正确，网页的内容是由节点组成的
节点分别有：
元素节点
属性节点
文本节点
注释节点
文档节点

节点的三要素

节点的类型：nodeType
节点的名称：nodeName
节点值：nodeValue

元素节点

nodeType：1
nodeName：标签名的大写
nodeValue：null

<div id="box">
	<p id="pOne"></p>
</div>

var box =document.getElementById("box");
var pOne =document.getElementById("pOne");

console.log(box.nodeType);//1
console.log(box.nodeName);//DIV
console.log(box.nodeValue);//null

console.log(pOne.nodeType);//1
console.log(pOne.nodeName);//P
console.log(pOne.nodeValue);//null

属性节点

nodeType：2
nodeName：属性名
nodeValue：属性值

获取属性节点要用attribute

<div id="box" class="bbb">
	<p id="pOne"></p>
</div>

box.id或者box.className这种获取的是节点值，不是属性节点

attribute
console.log(box.attributes);获取的是元素属性的一个数组

console.log(box.attributes[0].nodeType);//2
console.log(box.attributes[0].nodeName);//id
console.log(box.attributes[0].nodeValue);//box

console.log(box.attributes[1].nodeType);//2
console.log(box.attributes[1].nodeName);//class
console.log(box.attributes[1].nodeValue);//bbb

获取元素子节点：childNodes
获取元素的所有子节点（文本、注释、元素）
在谷歌火狐中获取的是：文本（包括空文本（不可见字符））、注释、元素
在IE8及以下版本获取的是：文本（不包括空文本）、注释、元素

<ul id="ul">
	<li>我是li1</li>5555
	<!--我是注释行-->>
	<li>我是li2</li>
	<li>我是li3</li>
	<li>我是li4</li>
	<li>我是li5</li>
</ul>

	var ul=document.getElementById("ul");	
	console.log(ul.childNodes);

文本节点

nodeType：3
nodeName：#text
nodeValue：文本内容

console.log(ul.childNodes[2].nodeType);//3
console.log(ul.childNodes[2].nodeName);//#text
console.log(ul.childNodes[2].nodeValue);//5555

注释节点

nodeType：8
nodeName：#comment
nodeValue：注释内容

console.log(ul.childNodes[3].nodeType);//8
console.log(ul.childNodes[3].nodeName);//#comment
console.log(ul.childNodes[3].nodeValue);//我是注释行

文档节点

nodeType：9
nodeName：#document
nodeValue：null

console.log(document.nodeType);//9
console.log(document.nodeName);//#document
console.log(document.nodeValue);//null

获取子节点和子元素

获取子元素：父元素.children
谷歌火狐：获取到的是元素节点
IE8及以下版本：获取到的是注释和元素

<ul id="ul">
	<li>我是li1</li>6666
	<!--我是注释行-->>
	<li>我是li2</li>
	<li>我是li3</li>
	<li>我是li4</li>
	<li>我是li5</li>
</ul>

console.log(ul.children);

获取子节点：父元素.childNodes
谷歌火狐：获取到的是文本(包含空文本)、注释、元素
IE8及以下版本：获取到的是非空文本、注释、元素

console.log(ul.childNodes);

获取兄弟节点和兄弟元素

获取兄弟节点 :
上一个节点 :previousSibling
下一个节点 :nextSibling
获取兄弟元素 :
上一个元素 :previousElementSibling
下一个元素 :nextElementSibling

  <ul id="ul">
        666666
        <!-- 我是注释 -->
        <li>我是li标签1</li>
        <li id="li2">我是li标签2</li>
        <li id="li3">我是li标签3</li>
        <li>我是li标签4</li>
        <li>我是li标签5</li>
    </ul>

<script>

    // 获取元素
    var ul = document.getElementById("ul");
    var li2 = document.getElementById("li2");
	var li3 = document.getElementById("li3");
    // 1. 获取兄弟节点
    // 上一个节点
    console.log(li2.previousSibling);  // 文本节点
    // 下一个节点
    console.log(li2.nextSibling);  // 文本节点


    // 2. 获取兄弟元素
    //上一个元素
    console.log(li2.previousElementSibling);
    // 下一个元素
    console.log(li2.nextElementSibling);

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;
    }
}

console.log(getPreviousElement(li2));

获取下一个元素的兼容性封装

  function getNextElement(ele) {
        // 能力检测
        if(ele.nextElementSibling)  {  // 谷歌火狐
            return ele.nextElementSibling;
        } else {  // IE8
            // 获取下一个节点  :  null  元素  文本  注释
            var node = ele.nextSibling;
          
          // 循环次数不确定
          // 1. node必须存在, 不是null,  2. node不是元素节点
          while(node  && node.nodeType != 1) {
             node =  node.nextSibling
          }
          // node == null  或者  node.nodeType == 1
          return node;
        }
    }
    
    console.log(getNextElement(li3));

获取第一个子元素和子节点

获取第一个子节点 : 父元素.firstChild
获取第一个子元素 : 父元素.firstElementChild

<ul id="ul">
        wwwwww
        <!-- 我是注释 -->
        <li>我是li标签1</li>
        <li id="li2">我是li标签2</li>
        <li>我是li标签3</li>
        <li>我是li标签4</li>
        <li>我是li标签5</li>
    </ul>

var ul = document.getElementById("ul");

console.log(ul.firstChild);
console.log(ul.firstElementChild);

IE8无法执行元素的操作
获取第一个子元素的兼容型封装

	function getFirstElementChild(ele){
	 // 能力检测
      if(ele.firstElementChild != undefined){// 谷歌火狐
            return ele.firstElementChild;
      }else{// IE8
        // 第一个子节点  :  null  元素  文本  注释
            var nodeFirst = ele.firstChild;
		// 循环次数不确定
		// 1.  nodeFirst必须存在, 不是null,  2.  nodeFirst不是元素节点
            while(nodeFirst && nodeFirst.nodeType != 1){
                  nodeFirst = nodeFirst.nextSibling;
            }
		//  nodeFirst == null  或者   nodeFirst.nodeType == 1
            return nodeFirst;
      }
}

获取最后一个子元素和子节点

获取最后一个子节点 : 父元素.lastChild
获取最后一个子元素 : 父元素.lastElementChild

var ul = document.getElementById(“ul”);

 <ul id="ul">
        wwwwww
        <!-- 我是注释 -->
        <li>我是li标签1</li>
        <li id="li2">我是li标签2</li>
        <li>我是li标签3</li>
        <li>我是li标签4</li>
        <li>我是li标签5</li>
    </ul>

 	console.log(ul.lastChild);
    console.log(ul.lastElementChild);

IE8兼容性的封装 获取最后一个子元素

function getLastElementChild(obj){
	      if(obj.lastElementChild != undefined){
	            return obj.lastElementChild;
	      }else{
	            var nodeLast = obj.lastChild;
	            while(nodeLast && nodeLast.nodeType != 1){
	                  nodeLast = nodeLast.previousSibling;
	            }
	            return nodeLast;
	      }
	}

获取父节点

获取父节点 : 子元素.parentNode

<ul id="ul">
        wwwwww
        <!-- 我是注释 -->
        <li>我是li标签1</li>
        <li id="li2">我是li标签2</li>
        <li>我是li标签3</li>
        <li>我是li标签4</li>
        <li>我是li标签5</li>
    </ul>

// 获取子元素
var li2 = document.getElementById("li2");

console.log(li2.parentNode);
// 获取的父节点 一定是元素节点(只有元素才会有子节点)

克隆节点

元素.cloneNode(参数)
参数 : 布尔类型 true false(默认)

 <div id="box"> 
        我是外面的大盒子
        <h1>我是标题</h1>
    </div>

var box = document.getElementById("box");

        var box1 = box.cloneNode(true)
        console.log(box1);
        // 1.  克隆节点只会在内存中克隆一份,  不会添加到页面上  只能手动添加   
        //2.  克隆会把id也克隆过去


        // 为了保持页面id的唯一性,  需要修改克隆元素的id
        box1.id = "box1"


        // 添加子元素到页面中(父元素中)   父元素.appendChild(子元素)
        document.body.appendChild(box1)