JavaScript之元素对象的“增删改查”

冷不防 2023-03-13 05:24 25阅读 0赞

### 文章目录 ###

*   *   *   *  一、增加元素
             *  二、删除元素
             *  三、更改元素
             *  四、元素查找
             *  五、练习代码

#### 一、增加元素 ####

**先创建一个空标签对象：**

var ele=document.createElement("p");  //创建一个空的p标签对象

**再添加上内容，并且修改样式：**

ele.innerHTML="<h2>P标签</h2>";
    ele.style.color="red";
    ele.style.fontSize="20px";

**最后就可以加到你需要的位置了，这里就加到这里就放到一个div1盒子里面：**

var fa=document.getElementsByClassName("div1")[0];  //获取对象
        fa.appendChild(ele);  //将ele添加进入fa盒子里

#### 二、删除元素 ####

**先获取要删元素的所在位置：**

var fa=document.getElementsByClassName("div1")[0];  //获取整个大的div1

**再在所在位置里选中要删的元素：**

var son=fa.getElementsByTagName("p")[0];

**最后就可以进行删除操作了：**

fa.removeChild(son);

#### 三、更改元素 ####

就是一个元素换成另外一个元素，比如这里将p标签换成img标签  
**先创建img标签：**

var imgg=document.createElement("img");  //创建一个空的img标签

**再将img指向一张图片，并设定样式：**

imgg.setAttribute("src","jietu.jpg");
    imgg.width=160;  //修改一下大小，默认单位px
    imgg.height=130;

**之后就分别获取要被替换的元素及其所在盒子：**

var ele=document.getElementsByTagName("p")[0];
    var fa=document.getElementsByClassName("div3")[0];

**最后就可以执行替换操作了：**

fa.replaceChild(imgg,ele);  //表示在div3标签内用img标签替换ele标签

#### 四、元素查找 ####

**全局查找标签**

*  document.getElementById()
 *  document.getElementsByTagName()
 *  document.getElementsByClassName()
 *  document.getElementsByName()

**标签内查找标签**

*  element.getElementsByTagName()
 *  element.getElementsByClassName()

这个方面的内容在前面的文章有详细分析，请参见文章[JavaScript之DOM对象（Node结点属性、导航属性、页面查找）][JavaScript_DOM_Node]目录中的“页面查找”一栏。

#### 五、练习代码 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .div1, .div2, .div3, .div4{ 
                width:200px;
                height: 150px;
            }
    
            .div1{ 
                background-color: blue;
            }
            .div2{ 
                background-color: #00b0e8;
            }
            .div3{ 
                background-color: green;
            }
            .div4{ 
                background-color: yellow;
            }
        </style>
    </head>
    <body>
    <div class="div1">
        <button onclick="add()">添加p标签</button>
        DIV1标签
    </div>
    <div class="div2">
        <button onclick="del()">删除p标签</button>
        DIV2标签</div>
    <div class="div3">
        <button onclick="change()">更改标签</button>
        <p>P下的DIV3标签</p>
    </div>
    <div class="div4">DIV4标签</div>
    
    <script>
        function add(){ 
            var ele=document.createElement("p");  //创建一个空的p标签对象
            //修改html的内容：会更改样式
            ele.innerHTML="<h2>P标签</h2>";
            //不同的修改文本内容：不会更改样式
            // ele.innerText="<h2>P标签</h2>"
    
            //添加的时候可以对其进行CSS渲染
            ele.style.color="red";
            ele.style.fontSize="20px";
    
            //把新添加的标签放进大的div1盒子里
            var fa=document.getElementsByClassName("div1")[0];
            fa.appendChild(ele);
        }
    
        function del(){ 
            var fa=document.getElementsByClassName("div1")[0];  //获取整个大的div1
            //再找div1下的p标签
            var son=fa.getElementsByTagName("p")[0];
            fa.removeChild(son);
        }
    
        function change(){ 
            var imgg=document.createElement("img");  //创建一个空的img标签
            // imgg.src="jietu.jpg"; //指向一张图片的路径
            // imgg.width=160; //修改一下大小，默认单位px
            // imgg.height=130;
    
            //也可以用setattribute来添加
            imgg.setAttribute("src","jietu.jpg");
    
            //分别获得p标签和div标签
            var ele=document.getElementsByTagName("p")[0];
            var fa=document.getElementsByClassName("div3")[0];
    
            fa.replaceChild(imgg,ele);  //表示在div3标签内用img标签替换ele标签
        }
    
    
    
    </script>
    </body>
    </html>

![练习结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1ZpZXdpbmZpbml0ZWx5_size_16_color_FFFFFF_t_70]

[JavaScript_DOM_Node]: https://blog.csdn.net/Viewinfinitely/article/details/106026396
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1ZpZXdpbmZpbml0ZWx5_size_16_color_FFFFFF_t_70]: /images/20230312/d68100542de64ff493c6b3bd779be2f2.png