首页 / JAVASCRIPT / JavaScript全栈学习12-插入、删除DOM

JavaScript全栈学习12-插入、删除DOM

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript全栈学习12-插入、删除DOM，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6850字，纯文字阅读大概需要10分钟。

内容图文

插入DOM appendChild createElement setAttribute

当我们获得了某个DOM节点，想在这个DOM节点内插入新的DOM，应该如何做？

如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = ‘<span>child</span>‘就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。

如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点。

有两个办法可以插入新的节点。一个是使用appendChild，把一个子节点添加到父节点的最后一个子节点。例如：

        <html>
    <head>

    </head>
    <body>
        <!-- HTML结构 -->
        <p >JavaScript</p>
        <div >
            <p >Java</p>
            <p >Python</p>
            <p >Scheme</p>
        </div>
    </body>
</html>

把<p >JavaScript</p>添加到<div >的最后一项：

        var
    js = document.getElementById(‘js‘),
    list = document.getElementById(‘list‘);
list.appendChild(js);
p#js

现在，HTML结构变成了这样：

        <!-- HTML结构 -->
<div >
    <p >Java</p>
    <p >Python</p>
    <p >Scheme</p>
    <p >JavaScript</p>
</div>

因为我们插入的js节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。

更多的时候我们会从零创建一个新的节点，然后插入到指定位置：

        var
    list = document.getElementById(‘list‘),
    haskell = document.createElement(‘p‘);
haskell.id = ‘haskell‘;
haskell.innerText = ‘Haskell‘;
list.appendChild(haskell);
p#haskell

这样我们就动态添加了一个新的节点：

        <!-- HTML结构 -->
<div >
    <p >Java</p>
    <p >Python</p>
    <p >Scheme</p>
    <p >Haskell</p>
</div>

Haskell（发音为/?h?sk?l/）是一种标准化的，通用的纯函数编程语言，有非限定性语义和强静态类型。它的命名源自美国逻辑学家哈斯凯尔·加里，他在数理逻辑方面上的工作使得函数式编程语言有了广泛的基础。在Haskell中，“函数是第一类对象”。作为一门函数编程语言，主要控制结构是函数。Haskell语言是1990年在编程语言Miranda的基础上标准化的，并且以λ演算为基础发展而来。这也是为什么Haskell语言以希腊字母“λ”（Lambda）作为自己的标志。Haskell具有“证明即程序、命题为类型”的特征。

百度百科

动态创建一个节点然后添加到DOM树中，可以实现很多功能。举个例子，下面的代码动态创建了一个<style>节点，然后把它添加到<head>节点的末尾，这样就动态地给文档添加了新的CSS定义：

        var d = document.createElement(‘style‘);
d.setAttribute(‘type‘, ‘text/css‘);
d.innerHTML = ‘p { color: red }‘;
document.getElementsByTagName(‘head‘)[0].appendChild(d);

在Chrome的控制台执行上述代码，页面样式实时变化。

insertBefore

如果我们要把子节点插入到指定的位置怎么办？可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。

还是以上面的HTML为例，假定我们要把Haskell插入到Python之前：

        <html>
    <head>

    </head>
    <body>
        <!-- HTML结构 -->
        <p >JavaScript</p>
        <div >
            <p >Java</p>
            <p >Python</p>
            <p >Scheme</p>
        </div>
    </body>
</html>

Scheme （计算机程序语言）
Scheme 编程语言是一种Lisp方言，诞生于1975年，由 MIT 的 Gerald J. Sussman 和 Guy L. Steele Jr. 完成。它是现代两大Lisp方言之一；另一个方言是Common Lisp。
Scheme遵循极简主义哲学，以一个小型语言核心作为标准，加上各种强力语言工具（语法糖）来扩展语言本身。
MIT曾用Scheme作为计算机系入门课程的编程语言。计算机程序语言界著名的魔法书《计算机程序的构造和解释》（又称SICP）正是利用Scheme来解释程序设计。
历史悠久的Scheme依然活跃，拥有针对各种计算机平台和环境的实现，例如Racket、Guile、MIT Scheme、Chez Scheme等。Guile是GNU工具体系里最重要的部件之一，被许多自由软件和开源软件作为内置脚本语言使用。

百度百科

可以这么写：

        var
    list = document.getElementById(‘list‘),
    ref = document.getElementById(‘python‘),
    haskell = document.createElement(‘p‘);
haskell.id = ‘haskell‘;
haskell.innerText = ‘Haskell‘;
list.insertBefore(haskell, ref);
p#haskell

新的HTML结构如下：

        <!-- HTML结构 -->
<div >
    <p >Java</p>
    <p >Haskell</p>
    <p >Python</p>
    <p >Scheme</p>
</div>

可见，使用insertBefore重点是要拿到一个“参考子节点”的引用。很多时候，需要循环一个父节点的所有子节点，可以通过迭代children属性实现：

        var
    i, c,
    list = document.getElementById(‘list‘);
for (i = 0; i < list.children.length; i++) {
    c = list.children[i]; // 拿到第i个子节点
    console.log(c.innerText +‘\n‘+c.innerHTML);
}
Java
Java
<eval>/VM46947603:6
Haskell
Haskell
<eval>/VM46947603:6
Python
Python
<eval>/VM46947603:6
Scheme
Scheme
<eval>/VM46947603:6
undefined

练习

对于一个已有的HTML结构：

  1. Scheme
  2. JavaScript
  3. Python
  4. Ruby
  5. Haskell
        <!-- HTML结构 -->
<ol >
    <li >Scheme</li>
    <li >JavaScript</li>
    <li >Python</li>
    <li >Ruby</li>
    <li >Haskell</li>
</ol>

按字符串顺序重新排序DOM节点：

        ‘use strict‘;

// sort list:
var 
    ol  = document.getElementById(‘test-list‘);
    lis = document.querySelectorAll(‘.lang‘);
    lisArr = [];
Array.isArray(lis); //NodeList(5) [li.lang, li.lang, li.lang, li.lang, li.lang]
for(let i=0; i<lis.length; i++) {
    lisArr.push(lis[i]);
}
lisArr; //(5) [li.lang, li.lang, li.lang, li.lang, li.lang]
Array.isArray(lisArr);  // true
lisArr.sort((e1, e2)=>{
    return (e1.innerHTML >= e2.innerHTML)? 1 : -1;
});
for(let i=0; i<lis.length; i++) {
    ol.appendChild(lisArr[i]);
}

// 测试:
(function () {
    var
        arr, i,
        t = document.getElementById(‘test-list‘);
    if (t && t.children && t.children.length === 5) {
        arr = [];
        for (i=0; i<t.children.length; i++) {
            arr.push(t.children[i].innerText);
        }
        if (arr.toString() === [‘Haskell‘, ‘JavaScript‘, ‘Python‘, ‘Ruby‘, ‘Scheme‘].toString()) {
            console.log(‘测试通过!‘);
        }
        else {
            console.log(‘测试失败: ‘ + arr.toString());
        }
    }
    else {
        console.log(‘测试失败!‘);
    }
})();
undefined
测试通过!
<eval>/VM46947590:29

其他同学的好办法：

        var root=document.getElementById("test-list");
var array=Array.from(root.children).sort(function(a,b){
    [a,b]=[a.innerHTML,b.innerHTML];
    if(a===b)
        return 0;
    return a > b ? 1:-1;
});

for(let i of array) 
    root.appendChild(i);

删除DOM removeChild parentElement

删除一个DOM节点就比插入要容易得多。

要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：

        // 拿到待删除节点:
var self = document.getElementById(‘to-be-removed‘);
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

注意到删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置。

children只读属性

当你遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且它在子节点变化时会实时更新。

例如，对于如下HTML结构：

        <div >
    <p>First</p>
    <p>Second</p>
</div>

当我们用如下代码删除子节点时：

        var parent = document.getElementById(‘parent‘);
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错

浏览器报错：parent.children[1]不是一个有效的节点。原因就在于，当<p>First</p>节点被删除后，parent.children的节点数量已经从2变为了1，索引[1]已经不存在了。

因此，删除多个节点时，要注意children属性时刻都在变化。

练习

  • JavaScript
  • Swift
  • HTML
  • ANSI C
  • CSS
  • DirectX
        <!-- HTML结构 -->
<ul >
    <li>JavaScript</li>
    <li>Swift</li>
    <li>HTML</li>
    <li>ANSI C</li>
    <li>CSS</li>
    <li>DirectX</li>
</ul>

把与Web开发技术不相关的节点删掉：

        ‘use strict‘;

var ul=document.getElementById("test-list2");
for(let i=0; i<ul.children.length;i++) {
    if(ul.children[i].innerText===‘Swift‘ || ul.children[i].innerText===‘ANSI C‘ || ul.children[i].innerText===‘DirectX‘) {
            ul.removeChild(ul.children[i]);
        }
}

// 测试:
;(function () {
    var
        arr, i,
        t = document.getElementById(‘test-list2‘);
    if (t && t.children && t.children.length === 3) {
        arr = [];
        for (i = 0; i < t.children.length; i ++) {
            arr.push(t.children[i].innerText);
        }
        if (arr.toString() === [‘JavaScript‘, ‘HTML‘, ‘CSS‘].toString()) {
            console.log(‘测试通过!‘);
        }
        else {
            console.log(‘测试失败: ‘ + arr.toString());
        }
    }
    else {
        console.log(‘测试失败!‘);
    }
})();
undefined
测试通过!
<eval>/VM46947592:12

原文：https://www.cnblogs.com/caryqd/p/14750838.html

内容总结

以上是互联网集市为您收集整理的JavaScript全栈学习12-插入、删除DOM全部内容，希望文章能够帮你解决JavaScript全栈学习12-插入、删除DOM所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1221923.html

来源：【匿名】