JavaScript HTML DOM增删改查

Posted 2020-10-06 Sky_sunkang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript HTML DOM增删改查相关的知识，希望对你有一定的参考价值。

首先 js 可以修改html中的所有元素和属性，它还可以改变CSS样式，并且可以监听到所有事件并作出响应，这篇笔记呢主要记录如何对HTML元素进行增删改查。

1 查找DOM

第一种方式是我们最常用的：通过ID查找：

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
</head>
<body>
    <p id="demo">你能找到我么？</p>
    <button onclick="changeText()">点击改变文本</button>
</body>
{{--js--}}
<script>
    function changeText(){
        document.getElementById("demo").innerHTML = "ok";
    }
</script>
</html>

注意：当我们写HTML的时候尽量保证ID不重复。

第二种方法：通过标签名查找

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
</head>
<body>
    <div id="demo">
        <p>hi man</p>
    </div>
    <button onclick="changeText()">点击改变文本</button>
</body>
{{--js--}}
<script>
    function changeText(){
        var element = document.getElementById("demo");
        var p = element.getElementsByTagName("p");
        p[0].innerHTML = "yo";
    }
</script>
</html>

↑ 我们取到了ID为demo的div，然后在div中有个p元素没有ID属性，我们就可以通过tagname来找到它。

第三种方法：通过class来查找

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
</head>
<body>
    <div class="demo">
        <p>hi man</p>
    </div>
    <button onclick="changeText()">点击改变文本</button>
</body>
{{--js--}}
<script>
    function changeText(){
        var element = document.getElementsByClassName("demo")[0];
        var p = element.getElementsByTagName("p");
        p[0].innerHTML = "yo";
    }
</script>
</html>

2 删除DOM

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
</head>
<body>
    <div id="div1">
        <p id="p1">hi man</p>
        <p id="p2">hello</p>
    </div>
    <button onclick="changeText()">点击改变文本</button>
</body>
{{--js--}}
<script>
    function changeText(){
        var div1 = document.getElementById("div1");
        var p2 = document.getElementById("p2");
        div1.removeChild(p2);
    }
</script>
</html>

3 新增DOM

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
</head>
<body>
    <div id="div1">
        <p id="p1">hi man</p>
        <p id="p2">hello</p>
    </div>
    <button onclick="changeText()">点击改变文本</button>
</body>
{{--js--}}
<script>
    function changeText(){
        // 创建P标签
        var p = document.createElement("p");
        // 创建文本节点
        var node = document.createTextNode("新的P标签");
        // 创建属性
        var attr = document.createAttribute("class");
        attr.value = "class p";
        // p标签中添加文本节点
        p.appendChild(node);
        // p标签中添加属性
        p.setAttributeNode(attr);
        
        
        var div = document.getElementById("div1");
        // 添加p标签
        div.appendChild(p);
    }
</script>
</html>

4 修改DOM

4.1 修改DOM的内容

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
</head>
<body>
    <div id="div1">
        <p id="p1">hi man</p>
        <p id="p2">hello</p>
    </div>
    <button onclick="changeText()">点击改变文本</button>
</body>
{{--js--}}
<script>
    function changeText(){
        var element = document.getElementById("p1");
        element.innerHTML = "更改内容";
    }
</script>
</html>

4.2 修改DOM的属性

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
</head>
<body>
    <a href="https://www.baidu.com" id="link">链接</a>
</body>
{{--js--}}
<script>
    var element = document.getElementById("link");
    element.href = "https://www.google.com";
</script>
</html>

4.3 修改DOM的CSS样式

<!DOCTYPE html>
<html>
<head>
    <title>learn javascript</title>
</head>
<body>
    <p id="p1">文本</p>
</body>
{{--js--}}
<script>
    var element = document.getElementById("p1");
    element.style.color = "red";
</script>
</html>

以上是关于JavaScript HTML DOM增删改查的主要内容，如果未能解决你的问题，请参考以下文章