JavaScript（十八）Node 对象

最新推荐文章于 2024-04-17 06:40:49 发布

李不烦

最新推荐文章于 2024-04-17 06:40:49 发布

阅读量219

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/LWYYYYYY/article/details/90581202

版权

JavaScript 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

1. 遍历节点

1.1 获取父节点

通过 HTML 页面的指定标签查找其父节点（元素节点或文档节点），我们可以通过如下属性实现:

var 指定标签的父节点=指定标签.parentNode；

值得注意的是:

parentNode: 表示获取指定节点的父节点。一个元素节点的父节点可能是一个元素(Element )节点，也可能是一个文档(Document )节点。
parentElement: 表示获取当前节点的父元素节点。如果该元素没有父节点，或者父节点不是一个元素节点，则返回 null。

1.2 获取子节点

通过 HTML 页面的指定标签查找其子节点，我们可以通过如下属性实现:

firstChild: 获取指定标签的第一个子节点。

var btn3 = document.getElementById('btn3');
btn3.onclick = function(){
    var parentDiv = document.getElementById('parentDiv');
    var firstChild = parentDiv.firstChild;
    firstChild.style.backgroundColor = 'lightgreen';
}

lastChild: 获取指定标签的最后一个子节点。

var btn4 = document.getElementById('btn4');
btn4.onclick = function(){
    var parentDiv = document.getElementById('parentDiv');
    var lastChild = parentDiv.lastChild;
    lastChild.style.backgroundColor = 'lightgreen';
}

childNodes: 获取指定标签的所有子节点。

var btn5 = document.getElementById('btn5');
btn5.onclick = function(){
    var parentDiv = document.getElementById('parentDiv');
    var children = parentDiv.childNodes;
    for (var i=0;i<children.length;i++) {
        children[i].style.backgroundColor = 'lightgreen';
    }
}

1.3 空白节点

在上述测试获取指定节点的子节点时，我们规定必须要在 IE 8 版本或之前的版本中运行，而不能在其他浏览器中运行。原因在于 DOM 遍历节点时，并不是我们所想象的那样。我们所想象的浏览器遍历 DOM 时，解析的结果应该是如下图所示:

有些浏览器在遍历 DOM 时，会在元素节点之间添加一个文本节点，不管这个文本节点的内容是否为空（即空白节点）。

不会自动添加空白节点的浏览器只有 IE 8 版本以及之前的版本。换句话讲，IE 9 及之后的版本、Chrome、Firefox 和 Safari 等浏览器都会自动添加空白节点。这个问题的解决，可以通过 getElementsByTagName() 方法实现。例如如下代码的改写:

var btn3 = document.getElementById('btn3');
btn3.onclick = function(){
    var parentDiv = document.getElementById('parentDiv');
    //var firstChild = parentDiv.firstChild;
    var firstChild = parentDiv.getElementsByTagName('div')[0];
    firstChild.style.backgroundColor = 'lightgreen';
}

还可以自己封装一个geChildNodes()方法获取真正的子节点：

 function getChildNodes(parentDiv) {
                // 获取所有子节点
                var childNodes=parentDiv.childNodes;
                // 定义一个数组，用来存放真正的子节点
                var childNodeArr=[];
                for(var i=0;i<childNodes.length;i++){
                    if (childNodes[i].nodeType==1){// 真正的元素节点
                        childNodeArr.push(childNodes[i]);
                    }
                }
                return childNodeArr;
            }

1.4 获取兄弟节点

通过 HTML 页面的指定标签查找兄弟节点，我们可以通过如下属性实现:

previousSibling: 获取指定节点的前一个兄弟节点。

 // 获取按钮
            var btn6=document.getElementById("btn6");
            btn6.onclick=function () {
                var two=document.getElementById("two");
                // 中间存在一个空白节点
                var bt5=two.previousSibling.previousSibling;
                bt5.style.backgroundColor="red";
            }

nextSibling: 获取指定节点的后一个兄弟节点。

同样存在空白节点

2. 插入节点

向 HTML 页面标签插入新的标签或者其他标签，我们可以通过如下方法实现。

2.1 appendChild() 方法

appendChild(): 将一个节点添加到指定父节点的子节点列表末尾。

parent.appendChild(child)


    var first = document.getElementById('first');
            
    var li = document.createElement('li');
            
    first.appendChild(li);

2.2 insertBefore() 方法

insertBefore(): 在当前节点的某个子节点之前再插入一个子节点。

parent.insertBefore(newChild,currentChild)

我们可以通过如下示例来学习插入节点的使用:

   var first = document.getElementById('first');
    var two = document.getElementById('two1');
            
    var li = document.createElement('li');
            
    first.insertBefore(li,two);

2.3 插入已存在标签

在上述示例中，我们都是向指定节点插入一个创建的新标签。那如果我们是将一个已存在 HTML 页面的标签插入到指定标签中，又会是什么样子的效果呢？

var btn4=document.getElementById("btn4");
  btn4.onclick=function () {
      var three1=document.getElementById("three1");
      var second=document.getElementById("second");
      second.appendChild(three1);
  }

前：

后：

3. 删除节点

从 HTML 页面中删除指定元素节点（标签），我们可以通过以下方法实现:

parentNode.removeChild(childNode)

var btn = document.getElementById('btn');
btn.onclick = function(){
    var parent = document.getElementById('container');
    var two = document.getElementById('two');
    parent.removeChild(two);
}

将 HTML 页面中指定元素节点（标签）被替换，我们可以通过以下方法实现:

parentNode.replaceChild(newChild,oldChild)

5. 复制节点

将 HTML 页面中指定元素节点（标签）进行复制，我们可以通过以下方法实现:

node.cloneNode(boolean)

需要说明的是: cloneNode() 方法的参数表示是否采用深度克隆。如果为true，则该节点的所有后代节点也都会被克隆；如果为false，则只克隆该节点本身。

我们可以通过如下示例来学习插入节点的使用:

var btn = document.getElementById('btn');
btn.onclick = function(){
    var parent = document.getElementById('container');
    var two = document.getElementById('two');
            
    var newLi = two.cloneNode(true);
            
    parent.appendChild(newLi);
}

6 动态左右移动效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动态左右移动效果</title>
    <link rel="stylesheet" href="css/style.css" />
    <style>
        body {
            padding: 100px;
        }
        select {
            width: 100%;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="col-md-4">
        <select id="first" size="10" multiple>
            <option>Argentina</option>
            <option>Brazil</option>
            <option>Canada</option>
            <option>Chile</option>
            <option>China</option>
            <option>Cuba</option>
            <option>Denmark</option>
            <option>Egypt</option>
            <option>France</option>
            <option>Greece</option>
            <option>Spain</option>
        </select>
    </div>
    <div class="col-md-4">
        <p><button id="add" class="btn btn-primary btn-block">&gt;</button></p>
        <p><button id="add_all" class="btn btn-primary btn-block">&gt;&gt;</button></p>
        <p><button id="remove" class="btn btn-primary btn-block">&lt;</button></p>
        <p><button id="remove_all" class="btn btn-primary btn-block">&lt;&lt;</button></p>
    </div>
    <div class="col-md-4">
        <select id="second" size="10" multiple>

        </select>
    </div>
</div>
</body>
<script>

    // 向右移动
    // 获取按钮
    var add=document.getElementById("add");
    // 给按钮派发点击事件
    add.onclick=function () {
     // 获取下拉框节点 first
        var first=document.getElementById("first");
        var second=document.getElementById("second");
        //获取first所有节点
        var selectedList=first.getElementsByTagName("option");
        //
        for (var i=0;i<selectedList.length;i++){
            if (selectedList[i].selected){
                second.appendChild(selectedList[i]);
                i--;
            }
        }
    }


    // 向右全部移动
    // 获取按钮
    var add_all=document.getElementById("add_all");
    // 派发点击事件
    add_all.onclick=function () {
        // 获取左边的所有节点
        // 获取父节点first
        var first=document.getElementById("first");
        var second=document.getElementById("second");
        var optionList=first.getElementsByTagName("option");
        for (var i=0;i<optionList.length;i++) {
            second.appendChild(optionList[i]);
            i--;
        }
    }



</script>
</html>

李不烦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（十八）Node 对象

1. 遍历节点1.1 获取父节点通过 HTML 页面的指定标签查找其父节点（元素节点或文档节点），我们可以通过如下属性实现:var 指定标签的父节点=指定标签.parentNode；值得注意的是:parentNode: 表示获取指定节点的父节点。一个元素节点的父节点可能是一个元素(Element )节点，也可能是一个文档(Document )节点。 parentEle...
复制链接

扫一扫

专栏目录