DOM操作--获取元素和节点

H5_ljy

已于 2022-07-23 22:29:08 修改

阅读量479

点赞数

分类专栏： DOM 文章标签： javascript 前端 html

于 2022-07-16 19:44:41 首次发布

本文链接：https://blog.csdn.net/qq_56973906/article/details/125818867

版权

DOM 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了DOM（Document Object Model），它是浏览器提供的一种接口，用于操作HTML文档。文章列举了多种获取HTML元素的方法，包括通过ID、类名、标签名、名称以及CSS选择器，还探讨了直接获取特定元素如body、head等，以及通过关系获取子元素的方式。此外，还讨论了元素与节点的区别，以及如何确定元素在父元素中的位置。

摘要由CSDN通过智能技术生成

一、什么是DOM？

DOM 是document object model 它是W3C产业联盟制定的浏览器对程序员提供的对HTML文档操作的接口
它把文档中的代码翻译成一个对象模型
在这个模型中所有相关的标签属性注释文本等等12种数据都翻译为一种类型的对象统称节点对象。

二、获取元素的方式

1.系统提供的方法

方法	描述
document.getElementById()	通过元素 id 来查找元素,输入“id名”
document.getElementsByClassName()	通过类名来查找元素，输入"类名"
document.getElementsByTagName()	通过标签名来查找元素,输入"标签名"
document.getElementsByName()	通过name名来查找元素，输入"name名"
document.querySelector()	查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的第一个 HTML 元素；
document.querySelectorAll()	查找匹配指定 CSS 选择器（id、类名、类型、属性、属性值等等）的所有 HTML 元素,返回包含查找到的所有元素的数组

返回值：看Element有没有加s，有则返回包含找到的所有元素的数组，没找到则返回空数组；没有加s则返回找到的第一个元素，没找到则为null

    <div id="div_1" class="div1">
        <div class="div2"></div>
    </div>
    <div class="div1"></div>
    <input type="text" name="1">
    <input type="text" name="1">
    <script>
        console.log(document.getElementById('div_1'))
        console.log(document.getElementsByClassName('div1'))
        console.log(document.getElementsByTagName('div'))
        console.log(document.getElementsByName('1'))
        console.log(document.querySelector('div .div2'))
        console.log(document.querySelectorAll('div'))
        console.log(document.getElementById('div_3'),document.getElementsByClassName('div3'))
    </script>

在这里插入图片描述

2.系统提供的直接获取的方式

方法	描述
document.anchors	返回拥有 name 属性的所有 <a> 元素。
document.body	返回 <body> 元素
document.documentElement	返回 <html> 元素
document.forms	返回所有 <form> 元素
document.head	返回 <head> 元素
document.images	返回所有<img> 元素
document.inputEncoding	返回文档的编码（字符集）
document.lastModified	返回文档更新的日期和时间
document.links	返回拥有 href 属性的所有<area> 和 <a> 元素
document.readyState	返回文档的（加载）状态
document.referrer	返回引用的 URI（链接文档）
document.scripts	返回所有 <script> 元素
document.title	返回 <title> 元素
document.URL	返回文档的完整 URL

3.通过关系获取

方法	描述
parentElement	返回调用它的节点的父元素
parentNode	返回调用它的节点的父节点
children	返回包含所有子元素的数组
childNodes	返回包含所有子节点的数组
nextSibling	返回下一个兄弟节点
nextElementSibling	返回下一个兄弟元素
previousSibling	返回上一个兄弟节点
previousElementSibling	返回上一个兄弟元素
firstChild	获取当前节点的第一个节点
lastChild	获取当前节点的最后一个节点

    <div id="div_1" class="div1">
        <div class="div2"></div>
    </div>
    <div id="div_2"></div>
    <div class="div1"></div>
    <script>
        console.log(document.getElementsByClassName('div2')[0].parentElement)
        console.log(document.getElementsByClassName('div2')[0].parentNode)
        console.log(document.getElementsByClassName('div2')[0].parentElement.parentElement.parentElement.parentElement)
        console.log(document.getElementsByClassName('div2')[0].parentNode.parentNode.parentNode.parentNode)
        console.log(document.getElementById('div_1').children)
        console.log(document.getElementById('div_1').childNodes)
        console.log(document.getElementById('div_2').nextSibling)
        console.log(document.getElementById('div_2').nextElementSibling)
        console.log(document.getElementById('div_2').previousSibling)
        console.log(document.getElementById('div_2').previousElementSibling)
    </script>

在这里插入图片描述

补充：
元素和节点的区别：
元素：即html文档里面，所有的标签都可以称之为元素，比如说<div>、<p>等。
节点：在 HTML DOM （文档对象模型）中，每个部分都是节点：
文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点（包括回车符也是属于文本节点）
注释是注释节点。
它们的关系是：元素是节点中的一种，称为元素节点，但元素节点中可以包含很多的节点。

parentElement和parentNode区别::
区别在于html标签的parentNode为document,parentElement则没有，返回null；

4.获取自己是父元素中的第几个子元素/节点

    <div id="div_1" class="div1">
        <div class="div2"></div>
    </div>
    <div id="div_2"></div>
    <div class="div1"></div>
    <script>
        Object.prototype.indexOf_1=function () {               
            let parentChildren=this.parentElement.children;  //获取调用者的父元素的子元素们 
            for(let i=0;i<parentChildren.length;i++){  //循环上一步返回的数组
                if(parentChildren[i]==this){   //判断哪个子元素是调用者
                    return i         //返回调用者在父元素的子元素集的下标
                }
            }  
          }
        let div2=document.getElementById('div_2')
        console.log(div2.indexOf_1())