DOM编程实例(不重要，可忽略)

文章目录

简介

表格增加删除，效果如下图

样式属性案例

简介

DOM---表格添加删除，样式属性案例

表格增加删除，效果如下图

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书表格操作</title>
    <script>
        function addNode(){
            // 获取表格对象
            var tab = document.getElementById('tab')
            // 创建tr，td节点
            var tr = document.createElement('tr')
            var td1 = document.createElement('td')
            td1.innerHTML="<input type='text' size='10px' onblur='seaveVal(this)'/>"    //此时的节点是input，父节点是td

            var td2 = document.createElement('td')
            td2.innerHTML="<input type='text'size='10px' onblur='seaveVal(this)'/>"

            var td3 = document.createElement('td')
            td3.innerHTML=" <input type='button' value='添加' onclick='addNode()'/>"+"<input type='button' value='删除' onclick='removeNode(this)' />"

            //将创建的节点加入表格中
            tab.appendChild(tr)
            tr.appendChild(td1)
            tr.appendChild(td2)
            tr.appendChild(td3)

        }

        //获取父节点
        function seaveVal(thi){
            var  td = thi.parentNode
            td.innerText=thi.value
        }

        //删除节点，可以用节点的 父节点td的 父节点tr删除
        function removeNode(thi){
            var tr = thi.parentNode.parentNode
            tr.remove()
        }
    </script>
</head>
<body>
    <table border="2px" align="center" id="tab">
        <tr>
            <th >图书名称</th>
            <th>作者</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>活着</td>
            <td>余华</td>
            <td>
                <input type="button"  value="添加" onclick="addNode()">
                <input type="button"  value="删除" onclick="removeNode(this)">
            </td>
        </tr>
        <tr>
            <td>城南旧事</td>
            <td>林海音</td>
            <td>
                <input type="button"  value="添加" onclick="addNode()">
                <input type="button"  value="删除" onclick="removeNode(this)">
            </td>
        </tr>
    </table>
    
</body>
</html>

样式属性案例

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM-样式属性案例</title>
    <style>
        body{
            background-image: url('Camera Roll/b4.jpg');  
            background-repeat: no-repeat;
            background-size: 1920px 800px;
        }
        .div1{
            width: 200px;
            height: 200px;
            background-color: rgb(109, 129, 122);
            text-align: center;
            align-content: center;
        }
        input{
            width: 40px;
            height: 30px;
        }

    </style>
    <script>
        var i=-1
        function changebc(){
            var arr = ["b1.jpg","b2.jpg","b3.jpg"]
            
            if (i<arr.length-1){
                i++;
            }else{
                i=0;
            }
            document.body.style.backgroundImage="url('Camera Roll/"+arr[i]+"')"
        }

        function changeno(){
            // 获得标签
            var div1 = document.getElementById('div_1');
            div1.style.marginTop = Math.random()*500+"px";
            div1.style.marginLeft = Math.random()*800+"px";
        }

        function changeye(){
            document.body.style.backgroundImage = "url('Camera Roll/b1.jpg')";
          
           // 等200毫秒后再隐藏 div_1
            setTimeout(function () {
                document.getElementById('div_1').style.display = "none";
             }, 200); // 延迟时间可调
        }
    </script>
</head>
<body>
    <a href="javascript:changebc()">点击更换主页</a>

    <div class="div1" id="div_1">
        <h3>背景好看吗</h3>
        <input type="button" value="是" onclick="changeye()">
        <input type="button" value="否" onmouseover="changeno()">
    </div>
    
</body>
</html>