DOM文档获取dom节点，使用document对象通过函数来获取函数利用循环来获取数据

最新推荐文章于 2025-02-27 14:42:12 发布

原创最新推荐文章于 2025-02-27 14:42:12 发布 · 552 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

这篇博客主要介绍了如何使用JavaScript中的document对象来获取DOM节点，包括html、body和head标签。此外，还详细讲解了通过firstElementChild、lastElementChild、nextElementSibling和previousElementSibling属性来获取和遍历元素。同时，通过getElementById、getElementsByClassName、getElementsByName和getElementsByTagName方法获取指定属性的元素，并展示了querySelector和querySelectorAll在获取多个元素时的应用。

获取dom节点，使用document对象

// 获取DOM节点 使用的是document对象
        console.log(document.documentElement) //文档种所有的标签  html
        console.log(document.body) //获取文档中 body中的标签
        console.log(document.head) //获取文档中head中的标签

        // 获取
        var body = document.body
        var div1 = body.firstElementChild  //获取第一个元素
        var div2 = body.lastElementChild  //获取最后一个元素
        console.log(body.firstElementChild) //获取到的是body 的第一个元素
        console.log(body.firstChild) //获取到body 里面第一个元素的全部内容 (包括空格换行)
        console.log(body.lastElementChild) //获取到了body 最后一个标签的内容
        console.log(div1.nextElementSibling) //获取到div下面第一个相邻兄弟元素的下一个
        console.log(div2.previousElementSibling) //获取相邻兄弟元素的上一个

通过函数来获取函数

 //通过函数来获取元素
        console.log(document.getElementById("div1")) // getElementById("div1") 获取元素的id
        console.log(document.getElementsByClassName("div2")) //获取的的 是 class 的值
        console.log(document.getElementsByName("sex")) //获取到的是属性name 的值
        console.log(document.getElementsByTagName("input")) //getElementsByTagName("input") 获取到标签名字

利用循环来获取数据

console.log(document.querySelector("div")) //获取一个div
        console.log(document.querySelectorAll("div")) //获取全部的div 以数组的方式呈现
        //通过循环吧div输出
        var divs = document.querySelectorAll("div")
        for (let i = 0; i < divs.length; i++) {
            // const element = array[i];
            console.log(divs[i]) //获取标签里面的内容
        }