2020.08.31学习笔记:DOM查询

获取元素节点

通过document对象调用。
getElementById() 通过id属性获取一个元素节点对象
getElementsByTagName() 通过标签名获取一组元素节点对象。该方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中。
getElementsByName() 通过name属性获取一组元素节点对象。

获取元素节点的子节点
通过具体的元素节点调用。
getElementsByTagName() 方法
childNodes 属性。当前节点的所有子节点。
该属性会获取包括文本节点在内的所有节点。
DOM标签间内的空白也会被当成节点。(IE8及其以下浏览器中除外)
firstChild 属性。当前节点的第一个子节点。
lastChild 属性。表示当前节点的最后一个子节点。

获取当前元素的子元素

通过具体节点调用。
children 属性。当前元素的所有子元素。
firstElementChild 属性。当前元素的第一个子元素。不支持IE8及其以下的浏览器。
lastElementChild 属性。当前元素的最后一个子元素。

获取父节点和兄弟节点

通过具体节点调用。
parentNode 属性。当前节点的父节点。
previousSibling 属性。当前节点的前一个兄弟节点。也会获取到空白文本。
nextSibling 属性。当前节点的后一个兄弟节点。

获取兄弟元素

previousElementSibling 获取前一个兄弟元素。IE8及其以下不支持。
nextElementSibling 获取后一个兄弟元素。

读取元素节点属性

直接使用元素.属性名。
特殊:元素.className

获取body

document.body

获取html根标签

document.documentElement

根据元素class属性查询一组元素节点

getElementsByClassName() IE8及其以下不支持。

根据CSS选择器查询元素节点对象

querySelector("") 参数是选择器字符串。使用该方法总会返回唯一的一个元素。如果满足条件的元素有多个,只会返回第一个。
querySelectorAll("") 和上面的用法类似。不同的是它会将符合条件的元素封装到数组中。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值