文档章节

javaScript 要点(十五)HTML DOM 导航

MR_BT
 MR_BT
发布于 2017/01/21 01:05
字数 555
阅读 4
收藏 0

通过 HTML DOM,能够使用节点关系在节点树中导航。


 

1.HTML DOM 节点列表

getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。

下面的代码选取文档中的所有 <p> 节点:

 1 <body>
 2 
 3 <p>Hello World!</p>
 4 <p>The DOM is very useful!</p>
 5 <p>The DOM !</p>
 6 <script>
 7 x=document.getElementsByTagName("p");
 8 document.write("The innerHTML of the second paragraph is: " + x[2].innerHTML);
 9 </script>
10 
11 </body>

💡注意:下标号从 0 开始。

 

2.HTML DOM 节点列表长度

length 属性定义节点列表中节点的数量。

您可以使用 length 属性来循环节点列表:

1 x=document.getElementsByTagName("p");
2 
3 for (i=0;i<x.length;i++)
4 {
5 document.write(x[i].innerHTML);
6 document.write("<br />");
7 }

导航节点关系

您能够使用三个节点属性:parentNode、firstChild 以及 lastChild ,在文档结构中进行导航。

请看下面的 HTML 片段:

 1 <html>
 2 <body>
 3 
 4 <p>Hello World!</p>
 5 <div>
 6   <p>The DOM is very useful!</p>
 7   <p>This example demonstrates node relationships.</p>
 8 </div>
 9 
10 </body>
11 </html>
  • 首个 <p> 元素是 <body> 元素的首个子元素(firstChild)
  • <div> 元素是 <body> 元素的最后一个子元素(lastChild)
  • <body> 元素是首个 <p> 元素和 <div> 元素的父节点(parentNode)

firstChild 属性可用于访问元素的文本:

 1 <html>
 2 <body>
 3 
 4 <p id="intro">Hello World!</p>
 5 
 6 <script>
 7 x=document.getElementById("intro");
 8 document.write(x.firstChild.nodeValue);
 9 </script>
10 
11 </body>
12 </html>

 

DOM 根节点

这里有两个特殊的属性,可以访问全部文档:

  • document.documentElement - 全部文档
  • document.body - 文档的主体
 1 <html>
 2 <body>
 3 
 4 <p>Hello World!</p>
 5 <div>
 6 <p>The DOM is very useful!</p>
 7 <p>This example demonstrates the <b>document.body</b> property.</p>
 8 </div>
 9 
10 <script>
11 alert(document.body.innerHTML);
12 </script>
13 
14 </body>
15 </html>

childNodes 和 nodeValue

除了 innerHTML 属性,您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容

下面的代码获取 id="intro" 的 <p> 元素的值:

 1 <html>
 2 <body>
 3 
 4 <p id="intro">Hello World!</p>
 5 
 6 <script>
 7 var txt=document.getElementById("intro").childNodes[0].nodeValue;
 8 document.write(txt);
 9 </script>
10 
11 </body>
12 </html>

getElementById 是一个方法,而 childNodes 和 nodeValue 是属性。

在本教程中,我们将使用 innerHTML 属性。不过,学习上面的方法有助于对 DOM 树结构和导航的理解。

 

本文转载自:http://www.cnblogs.com/tig666666/p/5957426.html

MR_BT
粉丝 0
博文 49
码字总数 13680
作品 0
深圳
高级程序员
私信 提问
掌握这11项技能,你就是优秀的前端开发工程师

导读: 你也许会觉得前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的。但当你深入其中时,一定会发现好像前端开发不是那么简单,光网站性能优化、响应式、框架就让你焦头...

半饱即好
2018/06/26
0
0
掌握11项技能,你就是优秀的前端开发工程师

导读: 你也许会觉得前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的。但当你深入其中时,一定会发现好像前端开发不是那么简单,光网站性能优化、响应式、框架就让你焦头...

半饱即好
2014/05/14
3K
25
现代浏览器探秘(part3):渲染

翻译:疯狂的技术宅 原文:developers.google.com/web/updates… 现代浏览器探秘(part1):架构 现代浏览器探秘(part2):导航 渲染器进程的内部工作原理 这是关于浏览器内部工作原理系列的第3...

京程一灯
01/15
0
0
JavaScript 学习(1)

参考资料:http://www.w3school.com.cn/js/index.asp 额,发现 http://www.w3cschool.cc 这里的资料似乎比上面那个更新鲜一些... 一、教程 js是一种轻量级的编程语言,可插入html页面中,并由...

明天以后
2014/09/30
233
0
回到基础:理解 JavaScript DOM

翻译:疯狂的技术宅 原文:medium.freecodecamp.org/an-introduc… Javascript DOM(文档对象模型)是一个允许开发人员操纵页面内容、结构和风格的接口。在本文中,我们将理解什么是 DOM 以及...

疯狂的技术宅
04/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
今天
7
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
今天
6
0
Flutter系列之在 macOS 上安装和配置 Flutter 开发环境

本文为Flutter开发环境在macOS下安装全过程: 一、系统配置要求 想要安装并运行 Flutter,你的开发环境需要最低满足以下要求: 操作系统:macOS(64位) 磁盘空间:700 MB(不包含 IDE 或其余...

過愙
今天
6
0
OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.5K
16
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
42
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部