HTML之JavaScript DOM编程获取元素的方式

news2025/2/25 2:54:35

HTML之JavaScript DOM编程获取元素的方式

            1.获得document DOM树
                window.document(是window的属性)
            2.从document中获取要操作的元素
                1.直接获取
                    var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个
                    var bbb = document.getElementsByTagName("input")
                    var ccc = document.getElementsByName("aaa")
                    var ddd = document.getElementsByClassName("a") 
                2.间接获取
                    var cs = div01.children // 获取全部子元素
                    var firstc = div01.firstElementChild// 通过父元素获取第一个子元素
                    var lastc = div01.lastElementChild // 通过父元素获取最后一个子元素
                    var parentE = mmm.parentElement // 通过子元素获取父元素
                    var brotherPe = nnn.previousElementSibling // 获取前面的第一个元素
                    var brotherNe = nnn.nextElementSibling // 获取后面的第一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小标题</title>
    <script>
        /*
        步骤：
            1.获得document DOM树
                window.document(是window的属性)
            2.从document中获取要操作的元素
                1.直接获取
                    var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个
                    var bbb = document.getElementsByTagName("input")
                    var ccc = document.getElementsByName("aaa")
                    var ddd = document.getElementsByClassName("a") 
                2.间接获取
                    var cs = div01.children // 获取全部子元素
                    var firstc = div01.firstElementChild// 通过父元素获取第一个子元素
                    var lastc = div01.lastElementChild // 通过父元素获取最后一个子元素
                    var parentE = mmm.parentElement // 通过子元素获取父元素
                    var brotherPe = nnn.previousElementSibling // 获取前面的第一个元素
                    var brotherNe = nnn.nextElementSibling // 获取后面的第一个元素

            3.对元素进行操作
                1.操作元素的属性
                2.操作元素的样式
                3.操作元素的文本
                4.增删元素
        */
        function fun1() {
            // 1 获得document
            // 2 通过document获得元素
            var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个
            console.log(aaa)
        }
        function fun2() {
            // 根据标签名获取多个元素，返回数组
            var bbb = document.getElementsByTagName("input")
            for (i = 0; i < bbb.length; i++) {
                console.log(bbb[i])
            }
        }
        function fun3() {
            // 根据元素属性名获取元素，返回数组， 循环迭代时慎用for in 会获取到其他的东西
            var ccc = document.getElementsByName("aaa")
            for (i = 0; i < ccc.length; i++) {
                console.log(ccc[i])
            }
        }
        function fun4() {
            // 根据元素class属性名获取元素
            var ddd = document.getElementsByClassName("a")
            for (i = 0; i < ddd.length; i++) {
                console.log(ddd[i])
            }
        }
        function fun5() {
            // 先获取父元素
            var div01 = document.getElementById("div01")
            // 获取所有子元素
            var cs = div01.children // 获取全部子元素
            for (i = 0; i < cs.length; i++) {
                console.log(cs[i])
            }
            console.log(div01.firstElementChild)// 通过父元素获取第一个子元素
            console.log(div01.lastElementChild) // 通过父元素获取最后一个子元素
        }
        // 通过子元素获取父元素
        function fun6() {
            // 获取子元素
            var mmm = document.getElementById("username")
            console.log(mmm.parentElement) // 通过子元素获取父元素
        }
        // 通过当前元素获取兄弟元素
        function fun7() {
            var nnn = document.getElementById("username")
            console.log(nnn.previousElementSibling) // 获取前面的第一个元素
            console.log(nnn.nextElementSibling) // 获取后面的第一个元素
        }
    </script>
</head>
<body>
    <div id="div01">
        <input type="text" class="a" id="username" name="aaa" />
        <input type="text" class="b" id="password" name="aaa" />
        <input type="text" class="a" id="email" />
        <input type="text" class="b" id="address" />
    </div>
    <input type="text" />
    <hr>
    <input type="button" value="根据id获得指定元素" onclick="fun1()" id="btn01" />
    <input type="button" value="根据标签名获得多个元素" onclick="fun2()" id="btn02" />
    <input type="button" value="根据name属性值获取多个元素" onclick="fun3()" id="btn03" />
    <input type="button" value="根据class属性获取多个值" onclick="fun4()" id="btn04" />
    <hr>
    <input type="button" value="通过父元素获取子元素" onclick="fun5()" id="btn05" />
    <input type="button" value="通过子元素获取父元素" onclick="fun6()" id="btn06" />
    <input type="button" value="通过当前元素获取前面的兄弟元素" onclick="fun7()" id="btn07" />
    <input type="button" value="通过当前元素获取后面的兄弟元素" onclick="fun8()" id="btn08" />
</body>
</html>