【EASYDOM系列教程】之 DOM 元素树
DOM 元素树结构与 DOM 节点树结构很相似,区别仅在于是利用节点解析 HTML 元素,还是利用元素解析 HTML 元素。
DOM 树结构
还记得下面这张图吗?
上图中的 HTML 页面源代码如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>示例页面</title>
</head>
<body>
<h2>这是一个示例页面</h2>
<p id="p" title="this is p.">这是一个段落内容.</p>
</body>
</html>
DOM 之所以可以访问和更新 HTML 页面中的内容、结构和样式,是因为 DOM 将 HTML 页面解析为一个 树结构。
DOM 元素树
上述 HTML 页面示例代码,如果利用节点方式解析为 DOM 节点树结构 的话,如下所示:
如果利用元素方式解析为 DOM 元素树结构 的话,如下所示:
通过上图所示,我们发现 DOM 元素树结构与 DOM 节点树结构类似,同样在元素之间存在着某些固定的关系。
元素之间的关系
在 DOM 元素树结构中,主要具有以下三层关系。
父级与子级
如果我们将 HTML 页面中某一个元素作为父级的话,那包含在该元素内的第一层所有元素都可以称为该元素的子级。
例如,我们来看一下下面这个 DOM 元素树结构:
在上面的 DOM 节点树结构中,<html>
元素作为父级,<head>
和 <body>
元素作为子级。
祖先与后代
如果我们将 HTML 页面中某一个元素作为祖先的话,那包含在该元素内的所有元素(除子级之外的)都可以称为该元素的后代。
例如,我们来看一下下面这个 DOM 元素树结构:
在上面的 DOM 节点树结构中,<html>
元素作为祖先,<meta>
、<title>
、<h2>
和 <p>
元素作为后代。
兄弟关系
具有相同父级元素的两个或几个元素之间就是兄弟关系。例如,我们来看一下下面这个 DOM 元素树结构:
在上面的 DOM 元素树结构中,<meta>
和 <title>
元素就是兄弟关系。因为它们具有相同的父级元素 <head>
。
节点与元素的区别
利用节点解析 DOM 节点树结构时,我们会发现元素节点、属性节点和文本节点是独立存在的。
如果获取文本节点的话,文本节点是元素节点的子节点。所以,我们可以通过子节点方式得到指定的文本节点。
如果获取属性节点的话,由于属性节点不是元素节点的子节点。所以,并不能直接通过获取子节点的方式得到指定的属性节点。
而利用元素解析 DOM 元素树结构时,我们会发现元素、属性和文本是从属关系。什么意思呢? 我们可以简单地将属性和文本内容理解为是元素的一部分。
这样,我们获取属性或文本内容时,就可以通过元素的获取属性或获取文本内容的方法或属性来实现。
关于节点与元素的区别,我们可以通过以下示例代码来理解:
// 节点方式获取属性节点
var btn = document.getElementById('btn');
var attrNode = btn.getAttributeNode('class');
var attrValue = attrNode.nodeValue;
// 元素方式获取属性
var btn = document.getElementById('btn');
var attrValue = btn.getAttribute('class');
本教程免费开源,任何人都可以免费学习、分享,甚至可以进行修改。但需要注明作者及来源,并且不能用于商业。
本教程采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。
【EASYDOM系列教程】之 DOM 元素树相关推荐
- js系列教程9-表单元素全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- html dom树结构,【EASYDOM系列教程】之DOM 树结构
DOM 树结构 DOM 之所以可以访问和更新 HTML 页面中的内容.结构和样式,是因为 DOM 将 HTML 页面解析为一个 树结构. 例如下面这段代码是一个简单的 HTML 页面源代码: 示例页面 ...
- 【EASYDOM系列教程】之创建页面元素
Document 对象提供了可以创建元素节点.属性节点和文本节点的方法,方便 DOM 更新 HTML 页面中的元素. 创建元素节点 Document 对象提供了 createElement() 方法创 ...
- 【EASYDOM系列教程】之 textContent 属性
Node 对象提供了 textContent 属性实现获取或设置 HTML 页面中指定元素的文本内容. 获取文本内容 textContent 属性表示 HTML 页面指定节点及其后代节点的文本内容.其 ...
- 【EASYDOM系列教程】之属性操作
Element 对象提供了一些方法实现 HTML 元素的属性操作,这种操作要比 Node 对象提供的方法操作属性节点要更便捷. 获取指定元素的属性 Element 对象提供了 getAttribute ...
- js系列教程7-DOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- js系列教程6-BOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- js系列教程10-canvas绘图全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- js系列教程8-事件全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
最新文章
- mqtt调试助手_物联网入门,如何使用MQTT协议,连接Tlink物联网平台
- 推荐25个非常优秀的网页表单设计案例
- 前端学习(2236):react的列表渲染二
- Ubuntu 和 Centos 的一点差别
- Python标准库参考-sched
- hbase分布式集群搭建
- python爬虫中for循环无法每一段输出_Python入门到掌握只需要这3大,4类,5大,6种,即可,附教程...
- java day20【字节流、字符流】
- Python 格式化字符串f-string概览(转载)
- 含泪推荐几款超级好用的软件
- MCSA / Windows Server 2016 安装,配置和管理 Nano Server
- 2019年苏大计算机考研872真题及解析
- 【Excel】在单元格中插入换行符
- photoshop不能保存bmp格式
- 项目中引入阿里巴巴矢量库(unicode)
- 看了下面的关于大亚湾核电站的一些报道,我终于明白为什么老弟在惠阳买的房子会这么便宜了
- 【论文阅读】Gait Lateral Network: Learning Discriminative and Compact Representations for Gait Recognition
- 微信分享链接自定义文案,微信jssdk配置
- 3D游戏模型教程系列:3D max基础命令
- Android Dialog弹出方式动画