08DOM相关概念叙述
何处使用script标签
-
<head>标签里 需要注意的是：浏览器是自上到下解析的。因此，如果涉及到包含获取页面元素的内容, 导致失败。解决方案如下： <script> // 表示HTML页面加载完毕后, 做什么 window.onload = function () { // 所有的javascript代码编写在这里 } </script> - 写在
<body>元素的最下方 <body> <!-- 将<script>元素放置在相关HTML元素的后面, 或者<body>元素内的最后 --> <script></script> </body>
什么是DOM
DOM是个缩写，全称是 Document Object Model，被译为文档对象模型。
- D表示Document，就是DOM将HTML页面解析为一个文档。同时提供了document对象。
- O表示Object，就是DOM将HTML页面中每个元素解析为一个对象
- M表示Model，就是DOM中表示各个对象之间的关系
DOM的作用
DOM被设计用于解析HTML页面文档，方便 Javascrip语言通过DOM访问和操作HTML页面中的内容。 DOM是由W3C组织定义标准规范，并且由各大浏览器厂商支持。严格意义上来讲，DOM并非属于JavaScript语言。 我们之所以可以在 Javascript语言中使用DOM，是因为各大浏览器将DOM的标准规范内容封装成了 Javascrip语言所支持的形式。 对DOM中的对象，我们只有调用的权限，没有修改的权限，也说明了这个问题。
浏览器加载并运行HTML页面后，会创建DOM结构。由于DOM中的内容被封装成了 JavaScript语言中的对象，所以我们可以使用 JavaScript语言通过DOM结构来访问和操作HTM页面中的内容
DOM树结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>这是一个示例页面</h2>
<p id="p" title="this is p.">这是一个段落内容。</p>
</body>
</html>
什么是节点
节点（Node）原本是网络术语，表示网络中的连接点。一个网络是由一些节点构成的集合。 在DOM树结构中，节点也是很重要的一个概念。简单来说，节点作为DOM树结构中的连接点，最终构成了完整的DOM树结构。
常量 | 值 | 描述 |
|---|---|---|
Node.DOCUMENT_NODE | 9 | 文档节点，表示整个HTML页面（相当于document对象） |
Node.ELEMENT_NODE | 1 | 元素节点，表示HTML页面中的标签（即HTML页面的结构） |
Node.ATTRIBUTE_NODE | 2 | 属性节点，表示HTML页面中的开始标签包含的属性。在DOM规范里Node接口将不再实现这个元素属性 |
Node.TEXT_NODE | 3 | 文本节点，表示HTML页面中的标签所包含的文本内容 |
节点之间的关系
- 父级与子级 如果将HTML页面中某一个元素作为父级的话，那包含该元素内的第一层所有元素都可以称为该元素的子级。
- 祖先与后代 如果将HTML页面中某一个元素作为祖先的话，那包含在该元素内的所有元素（除子级之外）都可以称为该元素的后代。
- 兄弟关系：具有相同父级元素的两个或几个元素之间就是兄弟。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-04-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
