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属性可以获取当前元素的上一个兄弟元素

原文地址：http://www.cnblogs.com/Solitary-Rhyme/p/16849741.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性