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

原创

已于 2025-02-23 01:28:24 修改 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

于 2025-02-23 00:19:07 首次发布

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")