JavaScript之DOM-4 文档结构和遍历(节点树、元素树、文档的遍历)

一、节点树

节点树概念

- HTML DOM 将 HTML 文档视作树结构

- 文档中的元素、属性、文本、注释等都被看作一个节点

- 这种结构被称为节点树:

上下层节点

- 节点树中的节点彼此拥有层级关系，DOM 使用如下属性遍历整棵节点树:

平行的节点

- 节点树中使用如下方法访问平行的兄弟节点:

二、元素树

元素树概念

- 元素树是节点树的一个子集，只包含其中的元素节点

上下层元素

- 与节点树一样，元素树上的元素节点也有父子关系，使用如下属性可以获取这些关系:

平行的元素

- 元素树使用如下属性访问平行的元素:

三、文档的遍历

文档的遍历

- 为了遍历上述文档中的每个元素，可以先从其根元素开始:

- 遍历整棵文档树，可以使用方法的递归调用

总结：本章内容主要介绍了 JavaScript DOM 文档结构和遍历(节点树、元素树、文档的遍历)

时间： 2024-10-12 20:43:38

JavaScript之DOM-4 文档结构和遍历(节点树、元素树、文档的遍历)的相关文章

HTML5的文档结构和新的语义元素

学习前端的东西似乎没有什么捷径,就是直接上手撸就完了本文目标:(熟知) 1.创建基本HTML5文档结构 2.使用新的语义元素来布局页面下面直接上代码: <!DOCTYPE html>  <html lang="en">  <head> <meta charset="UTF-8">

通过阅读和学习书籍<CSS设计指南>总结 <CSS设计指南>/Charles lvyke-Smith著.李松峰译-人民邮电出版社本书网站:http://www.stylinwithcss.com 强烈推荐!!深入浅出,精简,适合入门!! HTML标记与文档结构 1.1 HTML标记基础 1.1.1 文本用闭合标签 ??闭合标签的基本格式如下: <标签名>文本内容<标签名/> <标签名属性_1="属性值" 属性_2="属

HTML5：组织文档结构

文档部分,即body部分,包含了访问者可以看到的内容.传统的HTML文档通常通过div元素来组织文档结构,再配上适当的样式表.但div元素的问题是缺少语义信息,在查看别人的源代码时,必须费点劲才能理解哪个div表示什么,整个页面时怎么搭建起来的,通常需要在HTML页面.样式表和浏览器之间跳来跳去.特别是如果HTML页面的组织结构不好,很容易就会导致困惑.对此,HTML5中新增了许多语义元素,用来替换div元素,并且将语义和呈现分离.所有的语义元素都有一个显著的特点:不真正做任何事,它们在外观上对

Poi之Word文档结构介绍

1.poi之word文档结构介绍之正文段落一个文档包含多个段落,一个段落包含多个Runs,一个Runs包含多个Run,Run是文档的最小单元获取所有段落:List<XWPFParagraph> paragraphs = word.getParagraphs(); 获取一个段落中的所有Runs:List<XWPFRun> xwpfRuns = xwpfParagraph.getRuns(); 获取一个Runs中的一个Run:XWPFRun run = xwpfRuns.get(i

javascript操作DOM方法整理

原自本人整理,主要来源于这里.大家如果有补充,十分欢迎大家留言. 一.获取节点 document.getElementById();//id="" document.getElementsByName();//name="" document.getElementsByTagName();//"input" document.getElementsByClassName();//class="" 二.css选择器 docume

javascript中DOM部分基础知识总结

1.DOM介绍 1.1 DOM概念文档对象模型(Document Object Model),它定义了访问和处理HTML文档的标准方法.现在我们主要接触到的是HTML DOM. HTML文档中的每个成分都是一个节点.HTML文档中的所有节点组成了一个文档树(节点树).HTML文档中的每个元素.属性.文本等都代表着树中的一个节点.树起始于文档节点,并由此继续延伸枝条,直到处于这棵树最低级别的所有文本节点为止.学习DOM,就是学习一些操作页面元素的API(方法).下图表示一个文档树. 1.2 DO

JavaScript之DOM文档对象模型

1.DOM是文档对象模型(Document Object Model)的简称. 当网页加载时,可以将结构化文档在内存中转换成对象树. 简单的说,DOM并不是一种技术,而是一种访问结构化文档的思想.借助DOM模型,我们可以对DOM树进行修改.删除.新增等操作,让结构化文档动态化. 2.DOM模型中的节点--文档可以说是由节点构成的集合.在DOM模型中有以下3种节点: (1)元素节点:各种标签就是这些元素节点的名称,如<ul>.<p>等: (2)文本节点:文本节点总是被包含在元素节点的

JavaScript的DOM（文档对象）基础语法总结1

---恢复内容开始--- 前言:HTML文档可以说由节点构成的集合,DOM节点有: 1). 元素节点:上图中<html>.<body>.<p>等都是元素节点,即标签. 2). 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript.DOM.CSS等文本. 3). 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com". 1.节点属性: 2.遍历节点树

HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

本文为兄弟连IT教育机构官方 HTML5培训教程,主要介绍:HTML5移动开发之路(42)--HTML4与HTML5文档结构比较一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head> </head> <body> <h1>第一章小强的HTML5移动开发之路</h1> <h2>1.1 HTM