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

文章目录

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

一、增加元素

先创建一个空标签对象：

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结点属性、导航属性、页面查找）目录中的“页面查找”一栏。

五、练习代码

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

练习结果