【JavaScript】DOM之Node对象

2023年3月1日 156次阅读 来源: 佐珥玎

Node对象

Node对象是什么

该对象封装DOM的底层对象，
该对象只是供应了操纵属性和要领，并不能直接打印操纵属性和要领

<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对象

<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属性来猎取页面中末了一个子节点

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

空缺节点

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

猎取相邻兄弟节点
经由过程以nextSibling属性来猎取节点的后相邻兄弟节点

<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()要领

指定子节点列表中末了增添个新子节点

<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>
    原文作者：佐珥玎
    原文地址: https://segmentfault.com/a/1190000016201802
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞