JS应用DOM入门：简单文档DOM结构分析

最新推荐文章于 2021-04-23 19:50:15 发布
最新推荐文章于 2021-04-23 19:50:15 发布
阅读量983 收藏
点赞数
分类专栏： DOM 文章标签： 文档 tree html javascript

JS应用DOM入门：简单文档DOM结构分析 

个简单文档的DOM结构分析

　　下面让我们来对一个简单的文档进行分析，最终形成它的DOM结构。要分析的文档包括3个段落，HTML代码如下：

　　<HTML>
　　<HEAD>
　　<TITLE> Simple DOM Demo </TITLE>
　　</HEAD>
　　<BODY ID="bodyNode"><P ID = "p1Node">This is paragraph 1.</P>
　　This is the document body
　　<P ID = "p2Node"> </P>
　　<P ID = "p3Node"></P>
　　</BODY>
　　</HTML>

　　请注意，从现在开始，我们就要按照Tree结构以及家族关系的方式来看待整个文档了。 <BODY>标记是Tree的根节点，它包含了4个孩子节点：p1Node、文本项节点（“This is the document body”）、p2Node和p3Node。每个孩子节点或者是一个HTML标记型节点，或者是一个文本项型节点。在一对开始标记和结束标记间的内容属于这个标记的孩子节点，比如“This is paragraph1”就是p1Node节点的孩子节点，同时它本身也是一个文本项型节点。文本项型节点必须包含一个非空字符，因此，第2段和第3段的孩子节点是不存在的。

　　这里有 上述HTML文档的DOM Tree图示，它能帮助我们更好地理解节点间的相互关系：

　　HTML中有一些标记不包含关闭括弧，这种情况下，我们可以将下一个紧挨者的标记作为关闭括弧对待。比如<LI>标记可以将紧挨者的<LI>或<UL>标记作为关闭标识。

　　简单文档的节点导航

　　文档的DOM Tree结构为每个标记和文本项设置了一个节点，对于任一被分配了ID属性的节点，都可以作为起始点开始整个Tree的“攀登”。而且，借助DOM属性的强大功能，我们可以寻址到Tree中的每一个节点。

在继续讲述前，请再次看看上一节中的简单文档的HTML源代码以及它的DOM Tree结构图。我们可以得知：图中的箭头表示了可以到达Tree中其他节点的导航路线；<BODY>标记的ID属性值是bodyNode，3个<P>标记的ID属性值依次为p1Node、p2Node和p3Node。下面，我们分别从不同的节点开始，举例说明如何寻址到其他的节点：

 

起始节点到达节点寻址表达式
<BODY>p1NodebodyNode.firstChild 或bodyNode.childNodes[0]
p1Node的孩子节点bodyNode.firstChild.firstChild
文本项节点bodyNode.childNodes[1]
p3NodeBodyNode.childNodes[3] 或bodyNode.lastChild
p1Node文本项节点p1Node.nextSibling
p2Nodep1Node.nextSibling.nextSibling
p3Nodep1Node.nextSibling.nextSibling.nextSibling
p3Nodep1Node的孩子节点p3Node.previousSibling.previousSibling.previousSibling.childNodes[0]

　　以上列举的都是从双亲（parent）到孩子或者孩子到孩子方向的寻址表达式，借助我们介绍另外一种导航方向：使用parentNode属性从孩子到双亲。比如：要从每一个<P>标记开始寻址到<BODY>标记，可以使用p1Node.parentNode、p2Node.parentNode或者 p3Node.parentNode。
　　为了加深对以上节点导航表达式的理解，我们编写了一段JavaScript代码，它将显示出文档DOM的每个节点的nodeName值。请注意，除了上面举例的简单文档中涉及到的节点外，还包含一个<Script>标记节点。为了不使问题复杂化，代码中不使用lastChild属性。代码如下：

<HTML>
<HEAD>
<TITLE> Simple DOM Demo </title>
<STYLE>TYPE="text/css">
<!--
FORM.tb {display:inline;}
.twidth{width:100%}
.include{ font-size: 75%; font-family: verdana, arial, helvetica;}
.includebig{font-family: verdana, arial, helvetica;}
.includebig A:link { color: blue; }
.includebig A:visited { color: purple; }
.include A:link { color: blue; }
.include A:visited { color: purple; }
.submitter { font-size: 75%; font-family: verdana, arial, helvetica; }
pre.code {color: #660099; margin-left:5%}
address {text-align: right}
body {background:#FFFFFF; margin-left: 5%; margin-right: 5%}
-->
</STYLE>
</HEAD>
<BODY ID="bodyNode"><P ID = "p1Node">This is paragraph 1.</P>
This is the document body
<P ID = "p2Node"> </P>
<P ID = "p3Node"></P>
<SCRIPT LANGUAGE="JavaScript">
alert(
"bodyNode.firstChild.nodeName = " + bodyNode.firstChild.nodeName + "/n" +
"bodyNode.firstChild.data = " + bodyNode.firstChild.data + "/n" +
"bodyNode.childNodes[0].nodeName = " + bodyNode.childNodes[0].nodeName + "/n" +
"bodyNode.childNodes[1].nodeName = " + bodyNode.childNodes[1].nodeName + "/n" +
"bodyNode.childNodes[1].data = " + bodyNode.childNodes[1].data + "/n" +
"bodyNode.childNodes[3].nodeName = " + bodyNode.childNodes[3].nodeName + "/n" +
"bodyNode.childNodes[4].nodeName = " + bodyNode.childNodes[4].nodeName + "/n" +
"p1Node.nextSibling.nodeName = " + p1Node.nextSibling.nodeName + "/n" +
"p1Node.nextSibling.nextSibling.nodeName = " + p1Node.nextSibling.nextSibling.nodeName + "/n" +
"p1Node.nextSibling.nextSibling.nextSibling.nodeName = " + p1Node.nextSibling.nextSibling.nextSibling.nodeName+ "/n" +
"p3Node.previousSibling.previousSibling.previousSibling.childNodes[0].nodeName = " +
p3Node.previousSibling.previousSibling.previousSibling.childNodes[0].nodeName + "/n" +
"p1Node.parentNode.nodeName = " + p1Node.parentNode.nodeName + "/n" +
"p2Node.parentNode.nodeName = " + p2Node.parentNode.nodeName + "/n" +
"p3Node.parentNode.nodeName = " + p3Node.parentNode.nodeName + "/n" +
"bodyNode.firstChild.firstChild.parentNode.parentNode.nodeName = " +
bodyNode.firstChild.firstChild.parentNode.parentNode.nodeName + "/n"
　　);
</SCRIPT>
</BODY>
</HTML>

　　执行后，结果图示如下：

vipxiaotian
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript中Dom树结构分析
BeMount
03-20 513
JavaScript中Dom树结构分析
前端学习笔记04-JavaScript
abc_123_cba_123的博客
02-24 359
前端学习笔记04-JavaScript一、引入方式 一、引入方式 JS 有3种书写位置，分别为行内、内嵌和外部。 1.行内式 JS < input type=“button” value=“点我试试” οnclick=“alert(‘Hello World’)” /> 优缺点： 1.可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick。 2.注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号。 3.可读性差， 在ht
DOM基础
系统运维
08-05 104
DOM基础 DOM(Document Object Model)——文档对象模型 什么是DOM？ Document Object Model (DOM)是HTML和XML文档的编程接口。它提供了上述文档的一种结构化表示，同时也定义了一种通过程序来改变文档结构，风格，以及内容的方式。DOM用一组结构化的节点以及对象来表示文档。本质上就是将网页和脚本语言以及编程语言连接起来。 一个网页是一个文...
Dom模型學習
wasabi ~编码 测试 倾听 设计!
03-27 91
四个非常适用的DOM方法：getElementById, getElementByTagName, getAttribute和setAttribute 比較有用的方法： 1、新建一个dom元素，参数为标签名——document.createElement("tagName") 2、把一个元素添加到某个元素下面——parentElement.appendChild(childElem...
节点/`childNodes`子节点/`previousSibling`兄弟节点`nextSibling`/父亲节点
不懂帕斯的博客
04-23 189
01-节点查找-网页一切皆节点 <!-- 这是注释 --> <div class="box">我是前端小白</div> <script> // 网页一切皆节点：document也是节点，是顶级节点 // 节点有三要素：nodeType nodeName nodeValue console.log(document.nodeType) console.log(docum
JavaScriptDOM编程学习笔记（一）DOM概述
weixin_30522095的博客
05-05 66
首先介绍下DOM，一套对文档的内容进行抽象和概念化的方法。即Document Object Model，当创建了一个网页并加载到Web浏览器中时，DOM就把编写的网页转换为一个文档对象，而通过浏览器提供的网页模型，就能通过Javascript去读取这张地图。 举个例子来说，DOM对于浏览器加载的网页，就像城市地图上的标识物映射城市，按图索骥即可找到你需要的地方。 Javascript中的对象拆...
python入门到高级全栈工程师培训 第3期 附课件代码
06-07
python入门到高级全栈工程师培训视频学习资料；本资料仅用于学习，请查看后24小时之内删除。 【课程内容】 第1章 01 计算机发展史 02 计算机系统 03 小结 04 数据的概念 05 进制转换 06 原码补码反码 07 物理层和...
精通JS脚本之ExtJS框架.part1.rar
03-02
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
精通JS脚本之ExtJS框架.part2.rar
03-02
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
网络架构师148讲视频课程
01-16
│ 第42节：应用上Nginx过后的体系结构.avi │ 第43节：Varnish简介、安装和基本使用.avi │ 第44节：VCL基本语法和使用，负载均衡.avi │ 第45节：VCL实现健康检查、ACL访问控制.avi │ 第46节：Grace模式和Saint...
js实现DOM结构
weixin_30657541的博客
03-30 539
/* 编写一段js脚本生成下面的DOM结构。要求使用标准的DOM方法或属性 <div id='example'> <p class='slogan'>淘，你喜欢</p> </div> */ var newdiv = document.createElement('div'); newdiv.id = 'e...
浅析~DOM结构中的元素节点、属性节点、文本节点
热门推荐
风一样的少年
08-28 1万+
首先明确什么是DOM： DOM=DocumentObjectModel，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构 DOM是表示和处理一个HTML或XML文档的常用方法 DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围...
DOM的应用
honey_1234567890的博客
02-03 376
DOM的应用 下面，我将从如何创建、删除、插入DOM元素以及文档碎片这四个方面来为大家简单介绍一下DOM的应用。 （一）创建DOM元素
[经典]js dom DOMDocument 属性和方法
pc70762540的专栏
06-03 341
最近发现DOMDocument对象很重要,还有XMLHTTP也很重要注意大小写一定不能弄错.属性:1Attributes 存储节点的属性列表(只读)2childNodes 存储节点的子节点列表(只读)3dataType 返回此节点的数据类型4Definition 以DTD或XML模式给出的节点的定义(只读)5Doctype 指定文档类型节点(只读)6documentElement 返回文档的根元素
DOM结构
u011841589的博客
01-04 524
深入浅出JavaScript （六）分析DOM模型
李龙生
01-27 3205
DOM是一种结构化对象模型提供了标签对象通用的访问方式，将HTML文件视为一个节点树，每一个标签和文字都是一个节点，可以访问每个节点和节点内容。          这样我们就可以通过DOM提供给的方法、接口来访问HTML内容，而不需要单个元素一个一个的查询。          优点：          跨平台和程序语言的程序接口                  DOM提供应用程序环境的一
(ECMAScript,)BOM和DOM
TianCi_MouHai的博客
04-05 550
JavaScript 的内容，包含以下三部分：ECMAScript（核心）：JavaScript 语言基础；DOM（文档对象模型）：规定了访问HTML和XML的接口；BOM（浏览器对象模型）：提供了独立于内容而在浏览器窗口之间进行交互的对象和方法。ECMAScript 规定了 JavaScript 脚本的核心语法，如 数据类型、关键字、保留字、运算符、对象和语句等，它不属于任何浏览器。ECMASc...
jsdom ReferenceError: performance is not defined
最新发布
08-20
JSDOM 是一个基于 Node.js 的库，它可以在非浏览器环境中模拟浏览器的 DOM 和其他浏览器特定的 API。 首先，确保你已经安装了 JSDOM： ``` npm install js＊＊＊ ``` 然后，在你的代码中引入 JSDOM 并创建一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值