首页 前端知识 原生获取DOM节点

原生获取DOM节点

2024-01-25 11:01:38 前端知识 前端哥 495 844 我要收藏

目录

一、通过document顶层方法获取

1、获取html标签

 2、获取head标签

 3、获取body标签

 二、getElementBy系列获取

1、ID获取

 2、类名获取

 3、name属性获取

4、标签名获取

三、query系列获取 

1、通过query选择器获取一个元素

2、通过querry选择器获取一组元素

四、通过节点的属性获取

1、获取父节点

 2、获取子节点

3.获取首个子节点

4、lastChild获取最后一个子节点

 5、获取兄弟节点


一、通过document顶层方法获取

1、获取html标签

获取html标签有一个专门的方法:document.documentElement

console.log(document.documentElement)图示

 2、获取head标签

获取head标签也有一个专用方法:document.head

console.log(document.body)图示

 3、获取body标签

获取body标签同样有一个专门的方法:document.body

console.log(document.body)图示

 二、getElementBy系列获取

1、ID获取

语法:document.getElementById('标签上的ID')

打印:document.getElementById('father'):

console.log(document.getElementById(“father”))图示

注意:如果两个标签一样的ID,它会获取第一个标签

添加一个id名为father的div

 再次打印console.log(document.getElementById(“father”))

 2、类名获取

语法: getElementsByClassName('标签上的类名')

打印document.getElementsByClassName('box'):

console.log(document.getElementsByClassName(“box”))图示

 获取到的是一个数组、因为多个标签名中的class名一样,所以获取的是一个数组

返回一个数组 , document.getElementsByClassName('box')[0]来获取到class为box的标签组里的第一个标签元素。

console.log(document.getElementsByClassName("box")[0])图示

 3、name属性获取

语法: getElementsByName('标签上的name属性值')

通过在控制台打印console.log(document.getElementsByName('fatherBox'))就可以在控制台看见返回的是一个NodeList(NodeList这个概念和前面通过class类名获取里面提到的HTMLCollection概念相似但是又有不同,因为本小白也说不明白,所以具体的还请看官大佬们自行百度)数组,

4、标签名获取

语法:documentsByTagName('标签名')

打印document.getElementsByTagName('div')可以看到返回了一个HTMLCollection数组,数组里面包含了我们HTML中的所有div

console.log(document.getElementsByTagName(“div“))图示

三、query系列获取 

当我们只有父元素有设置id、class、name值,然后HTML内容又偏多时,这个时候用上面的那四种选择器都不太方便,所有在HTML5中添加了query选择器来帮助我们更方便的获取到元素。

1、通过query选择器获取一个元素

语法:querySelector('根据选择器规则选择元素')

注意要根据css选择器的匹配规则去获取。当选择器选择的内容为多个时会只选择匹配到的第一个元素返回,但是这里的第一个和前面ById选择器的选择第一个返回不太一样,比如你还是不小心给两个元素写了一样的Id,都是father,然后第一个father里面没有div,第二个father里面有多个div,这个时候querySelector会先匹配到第一个father然后往里面匹配,发现没有可以匹配到的div来返回,他就会进入到第二个father里面进行匹配,将匹配到的第一个div进行返回处理;但是,如果第一个father里面有了可以返回的div,那么它就不会匹配第二个father。可能说的不够直观,我们直接上图:

(1)两个father,第一个father里面没有div

两个father,第一个father里面没有div

 在控制台打印document.querySelector('#father>div')

返回第二个father的第一个div

 (2)两个father,第一个father里面有div

两个father,第一个father里面有div

 在控制台打印document.querySelector('#father>div')

返回第一个father里匹配到的div

2、通过query选择器获取一组元素

语法:querySelectorAll('根据css选择器规则获取元素')

在控制台打印document.querySelectorAll('#father>div')可以看到返回了一个NodeList数组,里面包含着我们通过匹配规则匹配到的所有div元素。

console.log(document.querySelectorAll("#father>div"))图示

 可能有看官大佬就好奇了,这时候要是多写了个重复id的元素会出现啥情况呀,别急,我给您打印出来了,还是上面那个两个father,第一个father里面有一个div,第二个father里面有三个div的结构,再打印一遍document.querySelectorAll('#father>div'):

 再打印一遍document.querySelectorAll("#father>div")

 我们可以看到他把两个重复id的父级元素里面的子div全都获取进数组了。

四、通过节点的属性获取

每个DOM元素其实都可以看作是一个对象,在这个DOM元素对象里面有着用于获取各类节点的属性,我们可在通过第一节介绍的方法获取到一个节点,然后通过操作这个节点上的属性获取到想要的元素节点。

1、获取父节点

语法: 子节点.parentNode获取父节点

通过parentNode属性获取到元素的父节点,比如在控制台打印document.getElementsByClassName('box2')[0].parentNode就可以获取到类名为box2的元素数组中第一个元素的父节点了,打印结果为:

parentNode父节点属性

 2、获取子节点

方式一(不推荐):childNodes获取所有子节点

语法:父节点.childNodes

通过childNodes属性获取到元素的父节点,比如在控制台打印document.getElementById('father').childNodes就可以获取到ID为father的元素底下的所有子节点了,通过观察控制台我们可以看见返回了一个NodeList数组:

childNodes获取所有子节点图1

 我们可以看到数组里面出现了一些奇怪的东西–text,这个其实是我们在编辑器里面打代码时为了代码结构清晰一些,打的空格。每一个子元素的头尾但凡有空格的地方都会解析成text并加入到数组里面。我们要操作这样的数组就很难受了,所以不推荐使用这个办法

方式二(推荐):chilNodes获取所有子节点

语法: 父节点.children

通过children来获取所有的子节点,这个属性和childNodes一样都会返回一个数组,只不过返回的是一个HTMLCollection数组。在控制台打印document.getElementById('father').children结果如下:

children获取所有子节点1

 可以看到,我们获取到的数组和用childNodes获取到的子节点数组不太一样,它没有奇奇怪怪的东西–text,这种情况下,我们可以更好的进行需求操作,所以如果你要用节点的属性来获取全部子节点时,推荐使用children而不是childNodes

3.获取首个子节点

语法:父节点.firstChild

当我们要获取一个元素的首个子节点时,我们就可以使用firstChild属性啦。同样的在控制台打印一下看看返回结果console.log(document.getElementById('father').firstChild)

firstChild获取首个子节点图1

 我们发现打印出来了一个似曾相识的东西,前面childNodes返回的数组里面出现过的text,那这应该也是空格的问题吧,将第一个子节点前面的空格给删了再看看

删除第一个子节点前面的空格图

 firstChild获取首个子节点图2

 可以看到他完美的返回了我们想要的东西。
因为他不会过滤换行空格之类的所以可以将它变相的认为是childNodes[0]

4、lastChild获取最后一个子节点

获取一个元素的最后一个子节点时,我们就可以使用lastChild属性啦。同样的在控制台打印一下看看返回结果console.log(document.getElementById('father').lastChild)

lastChild获取最后一个子节点图1

 可以发现依旧是换行、空格的问题,和firstChild解决方法略有不同的是,firstChild去除的是第一个子节点前面的间隙,而lastChild要去除的是最后一个子节点后面的间隙:

去除子节点后面的间隙图

 这个时候再打印就会得到我们需要的最后一个子节点元素了:

lastChild获取最后一个子节点图2

 5、获取兄弟节点

(1)、获取前一个兄弟元素

语法:兄弟节点.previousSibling

使用previousSibling获取前一个兄弟元素,通过控制台打印document.getElementsByClassName('box2')[0].previousSibling来获取box2前面的兄弟元素:

注意:空格、换行会出现#text

 (1)、获取后一个兄弟元素

语法: 兄弟节点.nextSibling

使用nextSibling获取后一个兄弟元素,通过控制台打印document.getElementsByClassName('box2')[0].nextSibling来获取box2后面的兄弟元素:

获取后一个兄弟元素图

小结: 

会打印出text的几个方法(childNodes获取所有子节点、firstChild获取首个子节点、lastChild获取最后一个子节点、previousSibling获取前一个兄弟元素、nextSibling获取后一个兄弟元素),个人不建议使用,现在编辑器都是格式化美化代码,一不留神就换行了,那真的就是到处都是text了。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/370.html
标签
jqueryhtml5
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!