Javascript进阶笔记 - DOM模型与节点

DOM模型与节点

目录

1. DOM模型

  • DOM（文档对象模型）就是把文档中的标签，属性，文本转换成对象来管理（类似于Java中的对象）

    • document管理了所有的HTML文档内容
    • document是一种树结构的文档，有层级关系
    • document让我们把所有的标签都对象化
    • 我们可以通过document访问所有的标签对象

  • 对于一段代码来说，它的Document文档树内存结构可能如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
</head>
<body>
<a href="https://www.baidu.com/">我的连接</a>
<h1>我的标题</h1>>
</body>
</html>

<!--
根元素:<html>
	元素:<head>
		元素:<title>
			文本:"文档标题"
	元素:<body>
		元素:<a>
			属性:href
			文本:"我的连接"
		元素:<h1>
			文本:"我的标题"
-->

2. 节点

  • 节点（Node）是构成HTML文档最基本的单元

  • 节点分为四类：

    • 文档节点：整个HTML文档
    • 元素节点：HTML文档中的HTML标签
    • 属性节点：元素的属性
    • 文本节点：HTML标签中的文本内容
    <p id="pId">This is a paragraph</p>
<!--
id="pId"为属性节点
This is a paragraph为文本节点
<p id="pId">This is a paragraph</p>为元素节点
整个HTML文档为文档节点
-->

  • 节点的属性

    有时候根据需要，会获取节点的Name属性，而有时候会获取Value属性

    nodeName nodeValue
    文档节点 #document null
    元素节点 标签名 null
    属性节点 属性名 属性值
    文本节点 #text 文本内容

2.1 节点的常用方法

childNodes：获取当前节点的所有子节点

  • childNodes属性会获取包括文本节点在内的所有节点。也就是说标签之间的空白/换行也会算做节点
  • (推荐) children属性可以获取当前元素的所有子元素

firstChild：获取当前节点的第一个子节点

  • 存在和childNodes类似的问题
  • (推荐) firstElementChild属性可以获取当前元素的第一个子元素

lastChild：获取当前节点的最后一个子节点

  • 存在和childNodes类似的问题
  • (推荐) lastElementChild属性可以获取当前元素的最后一个子元素

parentNode：获取当前节点的父节点

nextSibling：获取当前节点的下一个节点

  • 存在和childNodes类似的问题
  • (推荐) nextElementSibling属性可以获取当前元素的下一个兄弟元素

previousSlibling：获取当前节点的上一个节点

  • 存在和childNodes类似的问题
  • (推荐) previousElementSibling属性可以获取当前元素的上一个兄弟元素
posted @   Solitary-Rhyme  阅读(34)  评论(0)  编辑  收藏  举报
相关博文：
· Javascript进阶笔记 - DOM的增删改查
· Javascript进阶笔记 - DOM操作CSS样式
· DOM节点
· DOM节点
· 17 JavaScript DOM
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
历史上的今天：
2021-11-02 《JAVA核心技术 卷I》 第五章 - 继承
点击右上角即可分享
微信分享提示