DOM编程系列之Node对象个人分享

Node对象

Node对象是什么

所谓Node对象就是DOM的标准规范中提供了Node对象,该对象主要提供了用于解析DOM节点树结构的属性和方法

示例代码:

<body>
<button id="btn"> 哒哒哒 </button>
<script>
    console.log(document);
    // 1. Node对象并不像Document对象一样 - 提供直接使用对象
    // console.log(node);

    // 2. Node类型不允许通过new关键字创建对象的
    /*var node = new Node();
    console.log(node);*/

    var btnElement = document.getElementById('btn');
    console.log(btnElement instanceof HTMLButtonElement);//调用结果为 true

    // 定位页面元素其实就是Node对象 - 称为元素节点
    console.log(btnElement instanceof Node);// 调用结果为 true

    console.log(Node.prototype);

    //拓展
    var btn = document.createElement('button');
    console.log(btn instanceof Node);// 调用结果为 true
</script>
</body>

继承链关系

Node对象是继承于Event Target对象的, EventTarget是一个用于接收事件的对象

示例代码:

<body>
<script>
    /* 判断Node原型是否在目标事件上 */
    console.log(Node.prototype instanceof EventTarget);// 调用结果为 true

    console.log(Document.prototype instanceof Node);// 调用结果为 true
    console.log(Element.prototype instanceof Node);// 调用结果为 true
</script>
</body>

判断节点类型

<body>
<button id="btn" class="cls">哒哒哒</button>
<script>
    // 1. 元素节点
    // 在页面上查找指定ID属性名字的元素
    var btn1 = document.getElementById('btn');
    // 元素节点的nodeName属性值为标签名 (大写的)
    console.log(btn1.nodeName);// 调用结果为 BUTTON
    console.log(btn1.nodeType);// 调用结果为 1
    console.log(btn1.nodeValue)// 调用结果为 null

    // 2. 文本节点
    // 获取第一个子节点
    var textNode = btn1.firstChild;
    // 文本节点的nodeName属性值是固定值(#text)
    console.log(textNode.nodeName);// 调用结果为 #text
    console.log(textNode.nodeType);// 调用结果为 3
    // 文本节点的nodeValue属性值是文本内容
    console.log(textNode.nodeValue);// 调用结果为 哒哒哒

    // 3. 属性节点
    // 获取属性节点
    var attrNode = btn1.getAttributeNode('class');
    // 属性节点的nodeName属性值为当前元素的属性名称
    console.log(attrNode.nodeName);// 调用结果为 class
    console.log(attrNode.nodeType);// 调用结果为 2
    // 属性节点的nodeValue属性值为当前元素的属性名称对应的值
    console.log(attrNode.nodeValue);// 调用结果为 cls
</script>
</body>

遍历节点

获取父节点

通过HTML页面中指定元素查找其父节点,可以使用Node对象的parentNode属性实现

示例代码:

<body>
<ul id="parent">
    <li>舒克</li>
    <li id="bt">贝特</li>
    <li>小龙人</li>
</ul>
<script>
    // 作为子节点
    var bt = document.getElementById('bt');
    // 通过子节点获取其父节点
    var parent1 = bt.parentNode;
    console.log(parent1);

    // parentElement属性 - 表示获取其父元素节点
    var parent2 = bt.parentNode;
    console.log(parent2);

    var html = document.documentElement;
    console.log(html.parentNode);// 调用结果为 文档节点
    console.log(html.parentElement);// 调用结果为 null
</script>
</body>

获取子节点

通过HTML页面中指定元素查找其子节点,可以通过以下Node对象的属性实现
- childNode - 获取指定节点的所有子节点
- firstChild - 获取指定节点的第一个子节点
- lastChild - 获取指定节点的最后一个子节点

示例代码:

<body>
<ul id="parent">
    <li>舒克</li>
    <li id="bt">贝特</li>
    <li>小龙人</li>
</ul>
<script>
    var parent = document.getElementById('parent');

    var children = myTools.childNodes(parent);
    console.log(children);

    /*var firstChild = parent.firstChild;
    firstChild = firstChild.nextSibling;
    console.log(firstChild);*/

    var firstChild = myTools.firstChild(parent);
    console.log(firstChild);

    var lastChild = parent.lastChild;
    lastChild = lastChild.previousSibling;
    console.log(lastChild);
</script>
</body>

获取相邻兄弟节点

通过HTML页面中指定元素查找其相邻兄弟节点,可以通过以下Node对象的属性实现
- previousSibling - 获取指定节点的前面相邻兄弟节点
- nextSibling - 获取指定节点的后面相邻兄弟节点

示例代码:

<body>
<ul id="parent">
    <li>舒克</li>
    <li id="bt">贝特</li>
    <li>小龙人</li>
</ul>
<script>
    var bt = document.getElementById('bt');

    var prev = bt.previousSibling;
    prev = prev.previousSibling;
    console.log(prev);

    console.log(prev.previousSibling);
    console.log(prev.previousSibling.previousSibling);

    var next = bt.nextSibling
    next = next.nextSibling;
    console.log(next);
</script>
</body>

空白节点

childNodes属性 - 获取指定节点的所有子节点,同时也会获取到所有的空白节点

示例代码:

<body>
<ul id="parent">
    <li>舒克</li>
    <li id="bt">贝特</li>
    <li>小龙人</li>
</ul>
<script>
    var parent = document.getElementById('parent');
    // childNodes属性 - 获取指定节点的所有子节点,同时也会获取到所有的空白节点
    var children = parent.childNodes;
    console.log(children);
</script>
</body>

代码分析图:
图片描述

处理空白节点方法

示例代码:

<body>
<ul id="parent">
    <li>舒克</li>
    <li id="bt">贝特</li>
    <li>小龙人</li>
</ul>
<script>
    // 1. 利用循环 + 判断筛选
    var arr = [];// 定义一个空数组
    /* 利用循环遍历出所有子节点 */
    for (var i=0; i<children.length; i++){
        var child = children[i];
        /* 判断语句 */
        if (child.nodeType === 1) {
            /* 将得到的结果放回去 */
            arr.push(child);
        }
    }
    console.log(arr);

    // 2. 利用getElementsByTagName()方法
    var lis = parent.getElementsByTagName('li');
    console.log(lis);
</script>
</body>

插入节点

appendChild()方法

parentNode.appendChild(childNode)
- parentNode - 表示指定节点(作为父节点)
- childNode - 表示被添加的节点(作为子节点)
特点 - 被添加在指定节点所有子节点列表的最后

示例代码:

<body>
<ul id="parent">
    <li>舒克</li>
    <li id="bt">贝特</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);
</script>
</body>

insertBefore()方法

insertBefore()方法 - 优点是可以在指定元素之前添加新的元素节点
注意 - DOM中的Node对象并没有提供 insertAfter() 方法

示例代码:

<body>
<ul id="parent">
    <li>舒克</li>
    <li id="bt">贝特</li>
    <li>小龙人</li>
</ul>
<script>
    /*
        insertBefore()方法 - 优点是可以在指定元素之前添加新的元素节点
        注意 - DOM中的Node对象并没有提供 insertAfter() 方法
     */
    // 通过ID属性获取指定父节点
    var parent = document.getElementById('parent');
    // 给父级节点创建新的子元素节点
    var newLi = document.createElement('li');
    // 给新创建的子元素节点创建文本节点
    var textNode = document.createTextNode('亚古兽');
    // 把新建的文本节点添加到指定的元素节点上
    newLi.appendChild(textNode);
    // 获取目标节点
    var bt = document.getElementById('bt');
    // 将新创建的子元素节点插入到指定的元素节点之前
    parent.insertBefore(newLi,bt);
</script>
</body>

insertAfter()方法

分析图:
图片描述

删除节点

调用removeChild()方法的node表示child参数的父节点
child参数则表示要删除的那个节点
注意 - 如果child参数不是node的子节点的话,调用该方法时会报错

示例代码:

<body>
<ul id="parent">
    <li>舒克</li>
    <li id="bt">贝特</li>
    <li>小龙人</li>
</ul>
<li id="xlr">小龙人</li>
<script>
    // 通过ID属性获取指定元素
    var parent = document.getElementById('parent');
    // 通过ID属性获取指定元素节点
    var bt = document.getElementById('bt');
    // 删除获取的指定节点元素
    parent.removeChild(bt);

    var xlr = document.getElementById('xlr');
    parent.removeChild(xlr)
</script>
</body>

替换节点

parentNode.replaceChild(newChild,currentChild)
- 参数
  - parentNode - 表示目标(被替换)节点的父节点
  - newChild - 表示替换(新)节点
  - currentChild - 表示目标节点
- 情况:
  - 是新创建的节点 -> 替换
  - 是页面已存在的节点 -> 移动+替换

示例代码:

<body>
<ul id="parent">
    <li>舒克</li>
    <li id="bt">贝特</li>
    <li>小龙人</li>
</ul>
<ul id="parent1">
    <li>大头儿子</li>
    <li id="xtbb">小头爸爸</li>
    <li>围裙妈妈</li>
</ul>
<script>
    // 1. 获取目标节点的父节点
    var parent = document.getElementById('parent');
    // 2. 获取目标节点
    var bt = document.getElementById('bt');
    // 3. 创建新节点
    var newLi = document.createElement('li');
    // 给新创建的子元素节点添加文本节点内容
    var textNode = document.createTextNode('大灰狼');
    // 将新创建的文本节点内容放到新创建的元素节点上
    newLi.appendChild(textNode);
    // 通过ID属性获取到要替换的子元素节点
    var xtbb = document.getElementById('xtbb');
    /*
    parentNode.replaceChild(newChild,currentChild)
    * 参数
      * parentNode - 表示目标(被替换)节点的父节点
      * newChild - 表示替换(新)节点
      * currentChild - 表示目标节点
    * 情况
      * 是新创建的节点 -> 替换
      * 是页面已存在的节点 -> 移动+替换
 */

    // 将要替换的子元素节点放到指定的位置
    parent.replaceChild(xtbb,bt);

</script>
</body>

复制节点

node.cloneNode(deep)
- deep参数 - 表示是否复制当前节点的后代节点
  - true - 表示复制后代节点
  - false - 默认值, 表示不复制后代节点
注意 - 复制操作时, 注意ID属性的值

示例代码:

<body>
<button id="btn">哒哒哒</button>
<script>
    var btn = document.getElementById('btn');
    /*
        node.cloneNode(deep)
          * deep参数 - 表示是否复制当前节点的后代节点
            * true - 表示复制后代节点
            * false - 默认值, 表示不复制后代节点
          * 注意 - 复制操作时, 注意ID属性的值
     */
    var newBtn = btn.cloneNode(true);

    var body = document.body;
    body.appendChild(newBtn);

</script>
</body>

textContent属性

textContent属性
- 作用 - 设置获取指定节点的文本内容
- 注意 - 具有浏览器兼容问题(IE 6/7/8不支持)

示例代码:

<body>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad dolores error expedita facere illum nulla, obcaecati quod voluptate. A accusamus dolore eius est iure molestias optio placeat recusandae similique vel.</p>
<script>
    var p1 = document.getElementById('p1');

    /*var textNode = p1.firstChild;
    var content = textNode.nodeValue;*/

    /*
        textContent属性
          * 作用 - 设置获取指定节点的文本内容
          * 注意 - 具有浏览器兼容问题(IE 6/7/8不支持)
     */

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

DOM编程系列之Node对象个人分享

Node对象

Node对象是什么

继承链关系

判断节点类型

遍历节点

获取父节点

获取子节点

获取相邻兄弟节点

空白节点

处理空白节点方法

插入节点

appendChild()方法

insertBefore()方法

insertAfter()方法

删除节点

替换节点

复制节点

textContent属性

a达达

引用和评论

Ajax系列之JSON数据格式