增删改查 dom input 点击按钮文本框和按钮框之间的转换全选与反选

大坤...

已于 2022-08-08 21:47:50 修改

阅读量247

点赞数

文章标签：前端 html

于 2022-08-07 12:12:01 首次发布

本文链接：https://blog.youkuaiyun.com/red_HTML/article/details/126194805

版权

本文介绍了如何在HTML中使用JavaScript进行DOM操作，包括添加、删除列表项，修改元素内容，以及获取和设置自定义属性。此外，还展示了如何通过属性变化触发事件和切换输入类型，以及全选/反选功能的实现。同时涵盖获取和修改元素样式的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

增删改查 dom

html

<input type="button" value="增加" id="add" onclick="add()">
    <input type="button" value="删除" id="del" onclick="del()">
    <input type="button" value="修改" id="date" >
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>

 function add() {
            // appendChild()追加节点
            //获取ul
            var ul = document.querySelector("ul")
                //创建一个节点
            var li = document.createElement("li")
                // 向元素内追加一个新元素
            li.innerHTML = "追加的新元素"
            ul.appendChild(li)
        }

        function del() {
            // 先获取到要删除的标签
            // removeChild() 删除节点
            var ul = document.querySelector("ul")
                // 要删除的是元素里面的第一个
            var li = ul.firstElementChild
            ul.removeChild(li)
                // ul.remove()
        }

        function date() {
            // 先获取要修该的元素
            var ul = document.querySelector("ul")
            var li = ul.firstElementChild
            li.innerHTML = "<a href=''>这是一个a标签</a>"
        }

getAttribute( ) 获取到标签的属性值（包括一些自定义属性）

setaAttributr( ) 自定义属性自定义属性前面都加一个 data-****

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li {
            width: 200px;
            height: 30px;
            border: 1px solid red;
            list-style: none;
        }
    </style>
</head>

<body>

    <div class="div_1" id="div1" date="diva">一个div</div>
    <input type="button" value="按钮" id="input">
    <div class="div_1" data-ert="qwe" id="div1">二个div</div>


    <script>
        var input = document.getElementById("input")
            // console.log(input.value) //按钮
            //更改属性名
        input.value = "大按钮"
            // console.log(input.value) //大按钮
            //自定义属性
        var div_1 = document.getElementById("div1")
            // console.log(div_1.getAttribute("date")) //diva
            // console.log(div_1.getAttribute("data-ert"))
    </script>
</body>

</html>

input 点击按钮文本框和按钮框之间的转换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li {
            width: 200px;
            height: 30px;
            border: 1px solid red;
            list-style: none;
        }
    </style>
</head>

<body>
    <input type="password" id="pwa">
    <input type="button" id="btn" value="按钮" onclick="test()">
    
    <script>
      
        var input1 = document.getElementById("pwa")
        var input2 = document.getElementById("btn")
        input2.onclick = function() {
            if (input1.type == "password") {
                input1.type = "text"
            } else {
                input1.type = "password"
            }
        }

        var input1 = document.getElementById("pwa")

        function test() {
            if (input1.type == "password") {
                input1.type = "text"
            } else {
                input1.type = "password"
            }
        }
    </script>
</body>

</html>

全选与反选

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="checkbox" name="" id="quanx">全选
    <input type="checkbox" name="" id="fanx">返选
    <hr>
    <div id="div">
        <input type="checkbox" name="" id="">葡萄
        <input type="checkbox" name="" id="">香蕉
        <input type="checkbox" name="" id="">苹果
    </div>
    <script>
        var quanx = document.getElementById("quanx")
            // console.log(quanx)
        var fanx = document.getElementById("fanx")
        var div = document.querySelectorAll("#div input")
            // console.log(div)
        quanx.onclick = function() {
            for (let i = 0; i < div.length; i++) {
                // const element = array[i];
                // console.log(div[i])
                div[i].checked = quanx.checked
            }
        }
        fanx.onclick = function() {
            var qw = 0
            for (let i = 0; i < div.length; i++) {
                // const element = array[i];
                // 一个叹号在JS中表示取反的意思，
                // div[i].checked = !div[i].checked

                if (div[i].checked) {
                    div[i].checked = false
                } else {
                    div[i].checked = true
                    qw++
                }
                if (qw == div.length) {
                    quanx.checked = true
                } else {
                    quanx.checked = false
                }
            }
        }
        for (let i = 0; i < div.length; i++) {
            // const element = array[i];
            console.log(div[i])
            div[i].onclick = function() {
                var qw = 0
                for (let q = 0; q < div.length; q++) {
                    if (div[q].checked == true) {
                        qw++
                    }
                }
                if (qw == div.length) {
                    quanx.checked = true
                } else {
                    quanx.checked = false
                }
            }
        }
    </script>
</body>

</html>

在js里面获取html 的样式进行修改

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div2 {
            color: orange;
        }
    </style>
</head>

<body>
    <div id="box" class="div div2" style="width: 100px; height:100px; background-color: red; color: white;">
        这是一个div
    </div>
    <div>
        这是第二个div
    </div>
    <script>
        var div = document.querySelector("#box")
        console.log(div.style["width"]) //100px
        console.log(div.style.width) //100px
        console.log(div.style.backgroundColor) //red
        console.log(div.style.color) //white
            //使用style属性获取样式时，只能获取行内样式
            //使用style属性获取样式时，改样式可读可写
        div.style.color = "blue"
        console.log(div.className) //div div2 获取class的属性名字
            // div.className = "div2"
        console.log(getComputedStyle(div).width) //100px
            // classList.remove("div2")移除元素中一个或多个类名。
        // console.log(div.classList.add("div2")) //undefined
    </script>
</body>

</html>