遍历文档内容,得到HTML层级结构
嗯。。没发现有写好的,那就自己写一个,刚好自己今天看了DOM操作的知识点,巩固一下。
HTML可以表示为一个层次结构,生成的DOM Tree 就是类似与数据结构中的树一样,每个DOM节点都有它的childNodes(动态的类数组对象), parentNode(指向父节点),nextSibling(下一个兄弟节点),previousSibling(上一个兄弟节点),还有辅助类的firstChild和lastChild。
因为不同浏览器中对节点的遍历处理的不一样,比如:
<ul id = "mylist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
如果是IE解析,ul 元素会有3个子节点,而其他浏览器,ul 元素有七个子节点,包括3个 li 元素和 4个文本节点(<li>元素之间的空格),所以如果只想访问当前节点的元素子节点,在用childNodes遍历的时候需要先判断一下子节点的nodeType,如果等于1(element node),再执行想要的操作。
H5对DOM操作也做了响应的扩展, 提供firstElementChild, lastElementChild, previousElementChild, nextElementChild 这样的更方便的元素遍历方式。
所以这道题就可以用树的深度优先遍历DOM Tree,来打印出HTML的层级结构。
代码如下:
//用document.write输出的时候:
var space = '';
function renderD(node, space) {
if(node === null) return;
var child = node.firstElementChild;
space += ' ';
while(child != null && child.nodeName.toLowerCase() != 'br') {
document.write(space + child.nodeName + '<br>');
renderD(child, space);
child = child.nextElementSibling;
} } renderD(document, space);
//console输出
var space = '';
(function renderD(node, space) {
if(node === null) return;
var child = node.firstElementChild;
space += ' ';
while(child != null) {
console.log(space + child.nodeName + '\n');
renderD(child, space);
child = child.nextElementSibling;
} })(document, space);
注:文档的根节点是document
在JS红宝书中289页,我觉得它的元素遍历不对。。 那个while循环的条件完全就忽视掉了当前节点的最后一个子元素啊囧
遍历文档内容,得到HTML层级结构的更多相关文章
- DOM操作-遍历HTML文档内容
基础: JS nodeType返回类型:http://blog.csdn.net/qyf_5445/article/details/9232907 代码: <!DOCTYPE html> ...
- bs4--官文--遍历文档树
遍历文档树 还拿”爱丽丝梦游仙境”的文档来做例子: html_doc = """ <html><head><title>The Dor ...
- jsonp 遍历文档
遍历文档 将html解析成一个Document后,就可以使用类似Dom的方法进行操作 File input = new File("/tmp/input.html"); Docum ...
- 运用 Range 对象处理 Word 文档内容
运用 Range 对象处理 Word 文档内容 在所有 Office 应用程序中,Microsoft Word 可能是应用最广泛的应用程序,它还经常在自定义 Office 解决方案中扮演重要的角色 ...
- 【Javascript DOM读书笔记】chapter8 充实文档内容
本章目的 作者举出了第一个实例,为一篇 web 页面动态创建缩略语(abbreviation)的列表.大家知道,我们可以使用 <abbr>...</abbr> 来指示一个缩略语 ...
- 前端(十八)—— jQuery高级操作:选择器、文本属性与类、事件、文档操作、动画、结构关系
JQ选择器.文本属性与类.事件.文档操作.动画.结构关系 可参考jQuery的API文档 一.选择器 1.css语法匹配 标签 | 类 | id | 交集 群组 | 后代 | 兄弟 伪类 | 属性 $ ...
- 使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解(新手必学)
为大家介绍下Python爬虫库BeautifulSoup遍历文档树并对标签进行操作的详细方法与函数下面就是使用Python爬虫库BeautifulSoup对文档树进行遍历并对标签进行操作的实例,都是最 ...
- 使用requests爬取梨视频、bilibili视频、汽车之家,bs4遍历文档树、搜索文档树,css选择器
今日内容概要 使用requests爬取梨视频 requests+bs4爬取汽车之家 bs4遍历文档树 bs4搜索文档树 css选择器 内容详细 1.使用requests爬取梨视频 # 模拟发送http ...
- 织梦DedeCMS首页调用单页文档内容的方法
很多使用织梦dedecms单页文档功能的朋友都想知道如何在织梦首页调用单页文档的内容,下面就教大家具体的实现方法: 具体步骤如下: 首先在首页模板需要显示单页文档内容的地方插入如下代码: {dede: ...
随机推荐
- 【廖雪峰老师python教程】——OOP
概述 面向对象编程——Object Oriented Programming,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 数据封装.继承和多态 ...
- Ubuntu下使用Git_4
在这个第四个文章中,我将练习GIT的高级阶段了,由于高级阶段的内容转的比较多,我自己的代码除了我自己可以看懂意外,大家可能看不懂,所以我将会按照 http://git.wiki.navisec.it/ ...
- Python 3基础教程25-异常处理
在Python中,异常处理,主要是try except语句,通常语法格式如下. try: 代码块1 except Exception as e: print(e) 代码2 接着前面读取CSV文件,如果 ...
- 监控memcache服务
监控memcache服务是否正常,模拟用户(web客户端)检测. 使用nc命令加上set/get来模拟检测,以及监控响应时间及命中率. #!/bin/bash #################### ...
- LLLYYY的数字思维(模拟题)
链接:https://ac.nowcoder.com/acm/contest/318/G LLLYYY很喜欢写暴力模拟贪心思维.某一天在机房,他突然抛给了队友ppq一 个问题.问题如下: 有一个函数f ...
- 对SE的认识
对SE的认识 简述 “架构师”,也就是SE,总是给外人一种比较牛逼的感觉,其实踏实做开发的真的很少关注这个title. 抛开这个名词,这个角色的存在的确有一定的意义,因为项目中需要一个能“带领大家前进 ...
- python第三天(dictionary应用)转
1.题目: python实现英文文章中出现单词频率的统计 前言: 这道题在实际应用场景中使用比较广泛,比如统计历年来四六级考试中出现的高频词汇,记得李笑来就利用他的编程技能出版过一本背单词的畅销书 ...
- Spring Cloud文档地址大全
Spring Cloud:http://cloud.spring.io/spring-cloud-static/spring-cloud.html Spring Cloud Config:http:/ ...
- STL中的set容器的一点总结2
http://blog.csdn.net/sunshinewave/article/details/8068326 1.关于set C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像 ...
- const用法详解(转)
http://www.cnblogs.com/StudyRush/archive/2010/10/06/1844690.html 面向对象是C++的重要特性. 但是c++在c的基础上新增加的几点优化也 ...