DOM初级小结

最新推荐文章于 2021-11-21 01:03:21 发布

生风

最新推荐文章于 2021-11-21 01:03:21 发布

阅读量94

点赞数

分类专栏： js 文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/weixin_45685108/article/details/121193414

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

DOM节点类型

dom节点（node）也可以称之为dom对象，分为六种类型：

DocumentType  文档类型节点（<!DOCTYPE html>）
Element       元素节点（标签节点）
Attrinute     属性节点
Text          文本节点
Comment       注释节点
Document      文档节点（指整个页面）

DOM节点关系

只获取节点时
parentElement  获取父元素节点
children   获取子元素节点
firstElementChild   获取第一个孩子元素节点
lastElementChild    获取最后一个孩子元素节点
previousElementSibling   获取上一个兄弟元素节点
nextElementSibling   获取下一个兄弟元素节点

获取所有文本（包括""）
parentNode  获取父元素节点
childNodes   获取子元素节点
firstChild   获取第一个孩子元素节点
lastChild    获取最后一个孩子元素节点
previousSibling   获取上一个兄弟元素节点
nextSibling   获取下一个兄弟元素节点

节点信息

nodeName  节点名
nodeValue  节点值
nodeType  节点类型

获取节点的方法

document.getElementById
通过id属性去查询标签，只能找第一个id，相同则会忽略（因为只有一条数据，所以）
document.getElementsByTagName
通过标签名查询节点（因为通常有多个相同标签名的节点，所以返回值为一个伪数组）
document.getElementsByClassName
通过class属性去查询标签（因为通常有多个相同标签名的节点，所以返回值为一个伪数组）
document.getElementsByName
通过Name属性去查询标签（因为通常有多个相同标签名的节点，所以返回值为一个伪数组）

以下两个方法都可以接受三种类型的参数：id(#)，class(.)，标签

document.querySelector
通过选择器去查询，只返回匹配的第一个元素
document.querySelectorAll
通过选择器去查询，返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。

注意：

1.在所有返回值为伪数组的方法中，除了querySelectorAll以外的方法都会实时更新。
2.getElementById 获取效率最高

生风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM初级小结

DOM节点类型dom节点（node）也可以称之为dom对象，分为六种类型：DocumentType 文档类型节点（<!DOCTYPE html>）Element 元素节点（标签节点）Attrinute 属性节点Text 文本节点Comment 注释节点Document 文档节点（指整个页面）DOM节点关系只获取节点时parentElement 获取父元素节点children 获取子元素节点firstEl
复制链接

扫一扫