千家信息网

DOM节点怎么查询

发表于:2024-11-23 作者:千家信息网编辑
千家信息网最后更新 2024年11月23日,本文小编为大家详细介绍"DOM节点怎么查询",内容详细,步骤清晰,细节处理妥当,希望这篇"DOM节点怎么查询"文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。1.DOM节点介绍
千家信息网最后更新 2024年11月23日DOM节点怎么查询

本文小编为大家详细介绍"DOM节点怎么查询",内容详细,步骤清晰,细节处理妥当,希望这篇"DOM节点怎么查询"文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

1.DOM节点介绍

1.什么是节点

在HTML文档中,一切都是节点(HTML文档本身、标签、属性、注释内容、文本)

2.什么是元素

元素在HTML中叫做标签,在JS的DOM对象中称为元素(可以理解为标签的面向对象的叫法)

3.HTML标签属于节点的一种,叫做元素节点

4.节点三要素

节点类型:标签、属性、注释、文本

节点名称:p、div、class(标签名)

节点的值:one(属性的值)

/*

1.网页内容是由标签组成 : 不严谨的

2.网页内容由 节点组成 : 一切内容皆节点

元素(标签)节点 : 例如 div标签

属性节点 : 例如 class属性

文本节点 : 比如标签里面的文字

注释节点 : 比如HTML中的注释

3.DOM节点操作重点记住: 元素节点

*/

2.查询节点方法

1.查询子元素节点:父元素.children

2.查询兄弟元素节点:

上一个兄弟元素:元素.previousElementSibling

下一个兄弟元素:元素.nextElementSibling

3.查询父节点:元素[xss_clean]

3.节点操作

1.新增节点:document.createElement()

(1)内存 创建空标签 : let li = document.createElement('标签名')

(2)设置内容 : li.innerText = '文本'

(3)添加到dom树 : 父元素.appendChild( 子元素 )

新增到最后面 : 父元素.appendChild(子元素)

新增到某个元素前面: 父元素.insertBefore(子元素,要加到哪个元素前面)

2.克隆节点:

克隆元素自己 : 元素.cloneNode(false)

克隆元素自己+后代 :元素.cloneNode(true)

3.删除节点:父元素.removeChild( 子元素 )

注意点: 元素只能移除自己的子元素

4.insertBefore实现上移与下移

  • 我是班长1
  • 我是班长2
  • 我是班长3
  • 我是班长4
  • 我是班长5

读到这里,这篇"DOM节点怎么查询"文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注行业资讯频道。

0