Node对象是什么提供了

DOM的标准规范提供了Node对象，该对象主要提供了解析DOM节点树结构的属性和方法，DOM树结构主要是依靠节点进行解析，称为DOM节点树结构。Node对象是解析DOM节点树结构的主要入口。

Node对象时继承于EventTarget对象的，EventTarget是一个用于接受时间的对象。
Document对象和Element对象是继承于Node对象的。

判断节点类型

<body>
<button id="but" name="btn">按钮</button>
<script>
    //元素节点
    var elenode = document.getElementById('but');
    //元素节点的nodeName属性为元素名大写
    console.log(elenode.nodeName);//BUTTON
    console.log(elenode.nodeType);//1
    console.log(elenode.nodeValue);//null

    //属性节点
    var attrnode = elenode.getAttributeNode('name');
    //属性节点的nodeName属性为当前属性名
    console.log(attrnode.nodeName);//name
    console.log(attrnode.nodeType);//2
    //属性节点的nodeValue属性为当前属性值
    console.log(attrnode.nodeValue);//btn

    //文本节点
    var textnode = elenode.firstChild;
    //文本节点的nodeName属性为#text
    console.log(textnode.nodeName);//#text
    console.log(textnode.nodeType);//3
    //文本节点的nodeValue属性为当前文本内容
    console.log(textnode.nodeValue);//按钮
</script>
</body>

遍历节点

获取父节点与父元素节点

父节点与父元素节点的区别

parentNode：获取指定节点的父节点，其父节点不一定是元素节点
parentElement：获取指定元素的父元素节点，其父节点必须是元素节点

<body>
<ul id="parent">
    <li>苹果</li>
    <li id="mi">小米</li>
    <li>锤子</li>
</ul>
<script>
    //子节点
    var mi = document.getElementById('mi');
    //通过子节点获取父节点
    var parent1 = mi.parentNode;
    console.log(parent1);

    //通过子节点获取父元素节点
    var parent2 = mi.parentElement;
    console.log(parent2);
    
    var html = document.documentElement;
    console.log(html.parentNode);//文档节点
    console.log(html.parentElement);//null
</script>
</body>

空白节点

主流浏览器浏览器解析HTML页面内容为DOM节点树结构时，由于HTML中的源代码换行，会产生空文本的空白节点。

// 创建对象 - 专门用于封装解决空白节点问题
var myTools = {
    // 解决获取其所有子节点childNodes属性的问题
    childNodes : function(parentNode){
        var children = parentNode.childNodes;
        var arr = [];
        for (var i=0; i<children.length; i++) {
            var child = children[i];
            if (child.nodeType === 1) {
                arr.push(child);
            }
        }
        return arr;
    },
    firstChild : function(parentNode){
        var firstChild = parentNode.firstChild;
        firstChild = firstChild.nextSibling;
        return firstChild;
    }

获取子节点

通过html页面中置顶元素查找其子节点，通过Node对象的属性实现：

childNodes：获取指定节点的所有子节点
firstChild：获取指定节点的第一个子节点
lastChild：获取指定节点的最后一个子节点

<body>
<ul id="parent">
    <li>苹果</li>
    <li id="mi">小米</li>
    <li>锤子</li>
</ul>
<script>
    var parent = document.getElementById('parent');
    //获取所有的子节点
    var childnode = myTools.childNodes(parent);
    console.log(childnode);

    //获取第一个子节点
    var firschild = myTools.firstChild(parent);
    console.log(firschild);

    //获取最后一个子节点
    var lastchild = parent.lastChild;
    lastchild=lastchild.previousSibling;
    console.log(lastchild);
</script>
</body>

获取相邻兄弟节点

proviousSibling:获取指定节点的相邻兄弟节点
nextSibling：获取指定节点的后面相邻节点

<body>
<ul id="parent">
    <li>苹果</li>
    <li id="mi">小米</li>
    <li>锤子</li>
</ul>
<script>
    var mi =document.getElementById('mi');
    //获取上一个相邻的兄弟节点
    var presib = mi.previousSibling;//空白节点
    var presib = presib.previousSibling;
    console.log(presib);//苹果

    var nextsib = mi.nextSibling;
    var nextsib = nextsib.nextSibling;//空白节点
    console.log(nextsib);//锤子
</script>
</body>

插入节点

Node对象的appendChild()方法可以向指定节点的子节点列表的最后添加一个新的子节点

<body>
<ul id="parent">
    <li>苹果</li>
    <li id="mi">小米</li>
    <li>锤子</li>
</ul>
<script>
    var parent = document.getElementById('parent');

    var newli = document.createElement('li');
    var textnode = document.createTextNode('华为');
    newli.appendChild(textnode);
    /*
    parentNode.appendChild(childNode)
    * 说明
      * parentNode - 表示指定节点(作为父节点)
      * childNode - 表示被添加的节点(作为子节点)
    * 特点 - 被添加在指定节点所有子节点列表的最后
 */
    parent.appendChild(newli);

insertbefore()方法

insertbefore()方法将一个新节点插入节点的某一个子结点之前

<body>
<ul id="parent">
    <li>苹果</li>
    <li id="mi">小米</li>
    <li>锤子</li>
</ul>
<script>
    var parent = document.getElementById('parent');
    //创建子节点
    var newli = document.createElement('li')
    var textnode = document.createTextNode('华为');
    newli.appendChild(textnode);

    //获取指定的子节点
    var mi = document.getElementById('mi');
    //添加子节点
    parent.insertBefore(newli,mi);
    
</script>
</body>

删除节点

Node对象提供了removeChild()删除指定节点

<body>
<ul id="parent">
    <li>苹果</li>
    <li id="mi">小米</li>
    <li>锤子</li>
</ul>
<li id="hua">爆米花</li>
<script>
    var parent = document.getElementById('parent');
    var mi = document.getElementById('mi');
    parent.removeChild(mi);

    //删除不是子节点的节点
    var hua = document.getElementById('hua');
    parent.removeChild(hua);//无法删除  报错
</script>
</body>

替换节点

Node对象提供了replaceChild()方法用于替换节点

<body>
<ul id="parent">
    <li id="hua">化物语</li>
    <li>伪物语</li>
    <li>猫物语</li>
</ul>
<ul id="ms">
    <li>燃尽人间色</li>
    <li id="re">东进不太热</li>
    <li>提灯照河山</li>
</ul>
<script>
    //定位要替换节点的父节点
    var parent = document.getElementById('parent');
    //定位被替换的子节点
    var hua = document.getElementById('hua');
    //创建新的子节点
    var newli = document.createElement('li');
    var textnode = document.createTextNode('恋物语');
    newli.appendChild(textnode);
    //替换节点
/*    对于新的节点用于替换，就是替换节点
*     已有的节点用于替换，移动+替换->原有节点从原来位置删除*/
    parent.replaceChild(newli,hua);

    //定位用于替换的原有节点
    var re = document.getElementById('re');
    //用原有节点替换节点
    parent.replaceChild(re,newli);
</script>
</body>

复制节点

Node对象提供了cloneNode()方法实现节点复制功能

<body>
<div id="ms1">白衣渡我</div>
<script>
    var ms1 = document.getElementById('ms1');
    /*   node.cloneNode.(deep)
    *     deep参数 - 设置是否复制节点后代
    *       true - 复制后代
    *       false - 不复制后代*/
    var ms2 = ms1.cloneNode(true);
    var body = document.body;
    body.appendChild(ms2);
</script>
</body>

textContent属性、innerText属性

通过textContent属性可以获取和修改节点及其后代的文本属性
IE引入的innerText属性，类似于textContent，但有一定的区别。

<body>
<div id="sixia">提灯照河山</div>
<script>
    var sixia = document.getElementById('sixia');
    //设置节点文本内容
    //具有浏览器兼容问题，ie6/7/8 不支持，undefined
    sixia.textContent = '千秋此意';

    var content;
    if (sixia.textContent===undefined){
        //IE6/7/8 不支持
        content=sixia.innerText;
    }else {
        //其他浏览器支持
        content=sixia.textContent;
    }
    console.log(content);
</script>
</body>

Node对象的一些方法