【JavaScript】DOM之Node对象

时间 2019-12-09

标签 JavaScript dom node 对象栏目 JavaScript 繁體版

原文原文链接

Node对象

Node对象是什么

该对象封装DOM的底层对象，
该对象只是提供了操做属性和方法，并不能直接打印操做属性和方法html

<body>
<button id="btn"></button>
<script>
    console.log(document);
    var btnElement = document.getElementById('btn');
    console.log(btnElement instanceof HTMLButtonElement);
    console.log(btnElement instanceof Node);//true
//    定位月面元素其实就是Node对象-为元素节点
    console.log(Node.prototype);

    var btn = document.createElement('button');
    console.log(btn instanceof Node);//true
</script>
</body>

继承链关系

Node对象继承与EventTarget对象node

<body>
<script>
console.log(Node.prototype instanceof EventTarget);// true

console.log(Document.prototype instanceof Node);// true
console.log(Element.prototype instanceof Node);// true
</script>
</body>

判断节点类型

以nodeName，nodeType和nodeValue用于获取节点名称和节点类型还有节点的值浏览器

body>
<button id="btn" class="cls">按钮</button>
<script>
    var btnElement = document.getElementById('btn');
    console.log(btnElement.nodeName);
    console.log(btnElement.nodeType);
    console.log(btnElement.nodeValue);

    var textNode = btnElement.firstChild;
    console.log(textNode.nodeName);
    console.log(textNode.nodeType);
    console.log(textNode.nodeValue);

    textNode.nodeValue = '新按钮';

    var attrNode = btnElement.getAttributeNode('class');
    console.log(attrNode.nodeName);
    console.log(attrNode.nodeType);
    console.log(attrNode.nodeValue);

</script>
</body>

遍历节点

获取父节点

以parentNode属性来获取页面中父节点网络

<body>
<ul id="parent">
    <li>单机游戏</li>
    <li id="wl">网络游戏</li>
    <li>手机游戏</li>
</ul>
<script>
    var wl = document.getElementById("wl");
    var parent1 =wl.parentNode;
    console.log(parent1);
    var parent2 =wl.parentNode;
    console.log(parent2);

    var html = document.documentElement;
    console.log(html.parentNode);
    console.log(html.parentElement);
</script>
</body>

获取子节点

经过childNodes属性来获取页面中全部的子节点
注意：childNode [s]
经过firstChind属性来获取页面中第一个子节点
经过lastChind属性来获取页面中最后一个子节点app

<body>
<ul id="parent">
    <li>单机游戏</li>
    <li id="wl">网络游戏</li>
    <li>手机游戏</li>
</ul>
<script>
    var parent = document.getElementById('parent');
    var chldren = myToole.childNodes(parent);
    console.log(chldren);

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

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

空白节点

浏览器解析页面树结构，会产生空文本的空白节点，是由其换行引发的prototype

获取相邻兄弟节点
经过以nextSibling属性来获取节点的后相邻兄弟节点code

<script>
    var tjElement = document.getElementById('tj');

    console.log(tjElement.previousElementSibling);
    console.log(tjElement.nextElementSibling);

    var parent = document.getElementById('city');
    var children = parent.children;

    console.log(children);

    /*var index = children.indexOf(tjElement);
    console.log(index);*/

    /*var arr = [];
    for (var i=0; i<children.length; i++) {
        arr.push(children[i]);
    }
    console.log(arr);

    var index = arr.indexOf(tjElement);
    console.log(index);*/

    var index = 0;
    for (var i=0; i<children.length; i++) {
        if (children[i] === tjElement) {
            index = i;
        }
    }
    console.log(index)

</script>
</body>

插入节点

appendChid()方法

指定子节点列表中最后增添个新子节点htm

<body>
<ul id="yx">
    <li>单机游戏</li>
    <li id="wl">网络游戏</li>
    <li>手机游戏</li>
</ul>
<script>
    var yx = document.getElementById('yx');
    var newLi = document.createElement('li');
    var textNode = document.createTextNode('网页游戏');
    newLi.appendChild(textNode);

    yx.appendChild(newLi);

</script>
</body>

insertBefore()方法

<body>
<ul id="dm">
    <li>鸣人</li>
    <li id="zz">佐助</li>
    <li>小樱</li>
</ul>
<script>
    var dm = document.getElementById('dm');
    // 获取指定父节点
    var newLi = document.createElement('li');
    // 建立新子节点
    var textNode = document.createTextNode('雏田');
    newLi.appendChild(textNode);
    // 获取目标节点
    var zz = document.getElementById('zz');

    dm.insertBefore(newLi, zz);
    // DOM中的Node对象并无提供 insertAfter() 方法
</script>

删除节点

经过removeChild()方法来删除在页面中指定的节点
child参数表示要删除的节点对象

<body>
<ul id="yx">
    <li>单机游戏</li>
    <li id="wl">网络游戏</li>
    <li>手机游戏</li>
</ul>
<li id="wy">网页游戏</li>
<script>
    var yx = document.getElementById('yx');
    var wl = document.getElementById('wl');
    yx.removeChild(wl);

    var wy = document.getElementById('wy');
    yx.removeChild(wy);
</script>
</body>

替换节点

经过removeChild()方法来替换在页面中指定的节点
oldChild参数表示要替换的节点继承

<body>
<ul id="yx">
    <li>单机游戏</li>
    <li id="wl">网络游戏</li>
    <li>手机游戏</li>
</ul>
<ul id="dm">
    <li>鸣人</li>
    <li id="zz">佐助</li>
    <li>小樱</li>
</ul>
<script>
    var yx = document.getElementById('yx');
    var wl = document.getElementById('wl');
    var newLi = document.createElement('li');
    var textNode =document.createTextNode('网页游戏');
    newLi.appendChild(textNode);
    var zz = document.getElementById('zz');
    yx.replaceChild(zz,wl);
</script>
</body>

复制节点

经过cloneNode()方法来复制在页面中指定的节点
参数deep表示是否执行深度克隆，若是为true，则会克隆该节点的全部后代节点
若是为false，则会克隆节点自己

<body>
<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    var newBtn = btn.choneNodes(true);
    var body = document.body;
    body.appendChild(newBtn);
</script>
</body>

textContent属性

是指在页面中指定的节点和其后代节点的文本内容

<body>
<script>
    var pElement = document.getElementById('p1');

    // 节点方式进行解析
    /*var textNode = pElement.firstChild;
    var content = textNode.nodeValue;*/

    /*
       textContent属性
     * 设置或获取指定节点的文本内容
     * 具备浏览器兼容问题(IE 6/7/8不支持)
     */
    var content;
    if (pElement.textContent === undefined) {
        content = pElement.innerText;
        // IE 6/7/8不支持
    } else {
        content = pElement.textContent;
        // 其余浏览器支持
    }

    console.log(content);

</script>
</body>