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>

 

posted @ 2017-09-09 14:14  Sky_sunkang  阅读(1580)  评论(0)  编辑  收藏  举报