前端的初学习 -- 第九章 -- DOM-CSDN博客

本文链接：https://blog.csdn.net/zy3062231314/article/details/113633618

前端的初学习 -- 第九章 -- DOM

什么是DOM
getElementById：通过id属性获得元素节点对象
getElementsByName：通过name属性获得元素节点对象集
getElementsByTagName：通过标签名称获得元素节点对象集
DOM修改
DOM添加删除替换节点
- 添加
删除
替换节点

什么是DOM

在这里插入图片描述

<html>
   <head>
       <meta charset="utf-8">
       <title>DOM 教程</title>
   </head>
   <body>
       <h1>第一节：HTML DOM</h1>
       <p>Hello world!</p>
   </body>
</html>

在这里插入图片描述

getElementById：通过id属性获得元素节点对象

案例：当帐号为空时，阻止表单提交

<body>
    <form action="xxx" onsubmit="return login()">      
        <p>帐号：<input id="username" /></p>
        <p>电话：<input id="phone" /></p>    
        <p><button>登录</button></p>    
    </form>
    <script>
        function login() {
            var name = document.getElementById("username").value;
            if (name == "") {
                alert("帐号不能为空！");
                return false; // 阻止表单的提交     
            }
            return true; // 放行，让表单提交     
        }
    </script>
</body>

getElementsByName：通过name属性获得元素节点对象集

案例：购物车全选效果

<body>
    <h2>我的购物车</h2>
    <table border="1" cellspacing="0">
        <tr>
            <td><input type="checkbox" onchange="quan(this)" /> 全选</td>
            <td>名称</td>
            <td>单价</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />1</td>
            <td>功能性饮料-尖叫</td>
            <td>4.0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />2</td>
            <td>火腿肠</td>
            <td>2.0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />3</td>
            <td>包子</td>
            <td>1.5</td>
        </tr>
    </table>
    <p>
        <button>提交订单</button>
    </p>
    <script>
        function quan(all) {
            var arr = document.getElementsByName("one");
            for (var i = 0; i < arr.length; i++) {
                arr[i].checked = all.checked; // 将全选框的状态，赋值给每一个复选框
            }
        }
    </script>
</body>

getElementsByTagName：通过标签名称获得元素节点对象集

案例：表格隔行变色

<body>
    <h2>我的购物车</h2>
    <table border="1" cellspacing="0">
        <tr>
            <td><input type="checkbox" onchange="quan(this)" /> 全选</td>
            <td>名称</td>
            <td>单价</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />1</td>
            <td>功能性饮料-尖叫</td>
            <td>4.0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />2</td>
            <td>火腿肠</td>
            <td>2.0</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="one" />3</td>
            <td>包子</td>
            <td>1.5</td>
        </tr>
    </table>
    <p>
        <button>提交订单</button>
    </p>
    <script>
        var rows = document.getElementsByTagName("tr"); //通过标签名获得元素对象 集合
        for (var i = 0; i < rows.length; i++) {
            if (i % 2 == 1) { // 奇数
                rows[i].style.backgroundColor = "pink";
            }
        }
    </script>
</body>

DOM修改

在这里插入图片描述

DOM添加删除替换节点

添加

点击按钮，在页面中创建一张图片

<body>
    <button onclick="add()">添加</button>    
    <div></div>
    <script>
    function add(){
        var img = document.createElement("img"); //  <img
        img.setAttribute("src","../lagou_html/img/1.jpg"); //  <img src="../lagou-html/img/cat.gif">
        img.setAttribute("title","小猫咪"); // <img src="../lagou- html/img/cat.gif" title="小猫咪">
        img.setAttribute("id","cat"); // <img src="../lagou- html/img/cat.gif" title="小猫咪" id="cat">
        var divs = document.getElementsByTagName("div");            divs[0].appendChild(img);
    }
    </script> 
</body>

删除

点击按钮，把上面刚创建的图片从页面上删除

<body>
    <button onclick="add()">添加</button>  
    <button onclick="del()">删除</button>  
    <div></div>
    <script>
        function add() {
            var img = document.createElement("img"); //  <img
            img.setAttribute("src", "../lagou_html/img/1.jpg"); //  <img src="../lagou-html/img/cat.gif">
            img.setAttribute("title", "小猫咪"); // <img src="../lagou- html/img/cat.gif" title="小猫咪">
            img.setAttribute("id", "cat"); // <img src="../lagou- html/img/cat.gif" title="小猫咪" id="cat">
            var divs = document.getElementsByTagName("div"); divs[0].appendChild(img);
        }

        function del() {
            var img = document.getElementById("cat");
            img.parentNode.removeChild(img);  // 必须通过父节点，才能删除子节点
        }
    </script>
</body>

替换节点

点击按钮，把上面刚创建的图片替换成另一张

<body>
    <button onclick="add()">添加</button>  
    <button onclick="del()">删除</button>
    <button onclick="rep()">替换</button>  
    <div></div>
    <script>
        function add() {
            var img = document.createElement("img"); //  <img
            img.setAttribute("src", "../lagou_html/img/1.jpg"); //  <img src="../lagou-html/img/cat.gif">
            img.setAttribute("title", "小猫咪"); // <img src="../lagou- html/img/cat.gif" title="小猫咪">
            img.setAttribute("id", "cat"); // <img src="../lagou- html/img/cat.gif" title="小猫咪" id="cat">
            var divs = document.getElementsByTagName("div"); divs[0].appendChild(img);
        }

        function del() {
            var img = document.getElementById("cat");
            img.parentNode.removeChild(img);  // 必须通过父节点，才能删除子节点
        }

        function rep() {
            var imgold = document.getElementById("cat");
            // 通过修改元素的属性实现图片替换
            img.setAttribute("src","../lagou-html/img/2.jpg");

            // 通过更改节点实现图片替换
            //var imgnew = document.createElement("img");
            //imgnew.setAttribute("src", "../lagou-html/img/2.jpg"); 
            //imgold.parentNode.replaceChild(imgnew, imgold);
        }
    </script>
</body>