JavaScript---Node节点方法

红太狼 2023-07-17 04:39 14阅读 0赞

## Node节点方法 ##

*  appendChild() 向节点的子节点列表的结尾追加一个新的子节点

**例子**

**运行结果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 1]

*  cloneChild() 复制节点（参数为真，则复制子元素，如果参数为假的话，就不复制子元素）

**例子**

> 这个是只能复制粘贴一个的，css样式同上

**运行结果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 2]

> 这个是一次能粘5个，但是限制次数只能粘3次，只有js标签不一样。

> 参数为真，则复制子元素，如果参数为假的话，就不复制子元素，通过下面这个例子就会明白。

function f() { 
              var box = document.getElementById("box");
              var img = document.getElementById("img");
              var index = img.cloneNode(true);
                    //cloneChild()里面参数为true，则可以复制子元素，否则不能复制子元素
                    box.appendChild(index);
            }
            <div id="box">
            <img src="img/i1.png">
            <img src="img/i2.jpg">
            <img src="img/i3.jpg">
        </div>
        <div id="img" style="background: #2b542c;width: 50px;height: 50px;">
            <img src="img/i1.png" id="pic">
        </div>
    
        <button onclick="f()">复制</button>

参数不为true时运行结果为：下图，就是把盒子粘贴过去但是盒子里面的图片没有粘贴过去。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 3]  
参数为true时，运行结果如下图，就说盒子同里面的图片一起都被粘贴了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 4]

*  insertBefore() 在指定的子节点之前插入新的子节点

**例子**

**运行结果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 6]

*  replaceChild() 用一个新的子节点替换指定的子节点

**例子**

**运行结果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 8]

*  removeChild() 删除并返回当前节点的指定子节点

**例子**

**运行结果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 10]

*  document.createElement() 创建节点

**例子**

**运行结果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 12]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70]: /images/20230528/7fdf7f8f2b2a4325994488f76456f680.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 1]: /images/20230528/1d28912d268344d8a8a296347210eacf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 2]: /images/20230528/e1758571697146d1b1090d0abc09a97a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 3]: /images/20230528/cca53e42e52844c08863443a189a68b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 4]: /images/20230528/cfcc9863ad644f699efd7953e7d51fcf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 5]: /images/20230528/d8022673499b495bae2957610ccdae29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 6]: /images/20230528/86787b1b4cce4034a6b2177d3b282808.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 7]: /images/20230528/2b4274deaa1d4ccdb07abeebc770f528.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 8]: /images/20230528/0ceb6c6d5d034d0b9cb8523b69e0aab9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 9]: /images/20230528/472b8e9983cd46caadc82a854b1faa6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 10]: /images/20230528/32182065f9ff4a9984dab75a2636462a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 11]: /images/20230528/6b459c856f5b496783f8d57e45213b50.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70 12]: /images/20230528/cd1dea3762ce4f64b3d98dcbabcedd61.png