什么是 HTML DOM 导航？

DOM是一个以节点关系组成的结构，所以我们可以使用节点之间的关联找到整个HTML页面中的元素

1.HTML DOM 节点列表：

getElementsByTagName("") 方法 //返回所查找元素的所有节点列表

节点列表是一个节点数组
可以通过下标访问这些节点（注意下标是从0开始）

2.HTML DOM 节点列表长度：

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

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

<p>Hello World!</p>

<p>The DOM is very useful!</p>

<p>This example demonstrates the <b>length</b> property.</p>

<script>

x=document.getElementsByTagName("p"); //找到 p 标签的所有节点列表

for (i=0;i<x.length;i++)

{

document.write(x[i].innerHTML);

document.write("<br>");

}

</script>

3.导航节点

使用三个节点属性，可以在文档结构中进行导航，从而找到任何我们想找到的元素

1.firstChild //当前获取到的元素的首个子元素

2.lastChild //当前获取的元素的最后一个子元素

3.parentNode //当前元素的父元素

比如：
以body为例

<body> //<body> 元素是首个 <p> 元素和 <div> 元素的父节点（parentNode）

<p>蒙娜丽莎的微笑</p> //首个 <p> 元素是 <body> 元素的首个子元素（firstChild）

<div> //<div> 元素是 <body> 元素的最后一个子元素（lastChild）
<p>西门吹雪</p>

<p>叶孤城</p>
</div>

</body>

firstChild 属性可以用来访问元素的文本

<body> <p id="intro">大熊猫</p> </body> <script> x=document.getElementById("intro"); document.write(x.firstChild.nodeValue); //输出结果为 大熊猫 </script>

DOM 根节点

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

document.documentElement - 全部文档

document.body - 文档的主体，把整个页面都获取到了

hildNodes属性 和 nodeValue属性

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

借助getElementById 方法实现获取元素的文本内容

 <p id="intro">Hello World!</p>

 <script>

 var

  txt=document.getElementById("intro").childNodes[0].nodeValue;

 document.write(txt);

 </script>

DOM学习总结（六）DOM导航的更多相关文章

  1. JavaScript学习 - 基础(六) - DOM基础操作

    DOM: DOM定义了访问HTML 和XML 文档的标准:1.核心DOM 针对结构化文档的标准模型2.XMK DOM 针对XML文档的标准模型3.HTML DOM 针对HTML文档的标准模型 DOM节 ...

  2. HTML DOM 学习

    HTML DOM 学习 By: Mirror王宇阳 E-mail:2821319009@qq.com 博客主页:https://www.cnblogs.com/wangyuyang1016/ DOM ...

  3. javascript学习 真正理解DOM脚本编程技术背后的思路和原则

    本文学习来源于<javascriptDOM编程艺术>仅作笔记 学会怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页. 循序渐进:从最核心的内容开始,逐步 ...

  4. JavaScript DOM学习总结（一）

    DOM 什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法.   W3C给出的DOM定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...

  5. js学习总结：DOM节点二（dom基本操作）

    一.DOM继承树 DOM——Document Object Model DOM定义了表示修改文档所需要的方法.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml的一类厂商定义,也有人称 ...

  6. HTML DOM 学习笔记

    一.HTML DOM定义了所有HTML元素的对象和属性,以及访问他们的方法即:HTML DOM是关于如何获取,修改,添加,删除HTML元素的标准二.DOM节点1.分类整个文档是一个文档节点每个HTML ...

  7. 第一百六十七节，jQuery，DOM 节点操作，DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  8. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  9. 前端基础-BOM和DOM学习

    JavaScript分为 ECMAScript,BOM,DOM. BOM:是指浏览器对象模型,使JavaScript有能力与浏览器进行对象. DOM:是指文档对象模型,通过它,可以访问HTML文档的所 ...

  10. 前端学习 之 JavaScript DOM 与 BOM

    一. DOM介绍 1. 什么是DOM? DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构. 目的其实就是为了能让js操作html元素而制定的一个规范. DOM就 ...

随机推荐

  1. 测试demo 配置

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  2. SpringDataJpa全部依赖

    <properties> <spring.version>4.2.4.RELEASE</spring.version> <hibernate.version& ...

  3. python--表达式形式的yield、面向过程编程、内置函数

    yield的表达式形式 def init(func): def wrapper(*args, **kwargs): g = func(*args, **kwargs) next(g) return g ...

  4. 获取FileSystem

    /** * 根据配置文件获取HDFS操作对象 * 有两种方法: * 1.使用conf直接从本地获取配置文件创建HDFS对象 * 2.多用于本地没有hadoop系统,但是可以远程访问.使用给定的URI和 ...

  5. zabbix 如何监控php-fpm?

    zabbix监控php-fpm主要是通过nginx配置php-fpm的状态输出页面,在正则取值.要nginx能输出php-fpm的状态首先要先修改php-fpm的配置,没有开启nginx是没有法输出p ...

  6. Android学习拾遗

    1. java中的flush()作用:强制将输出流缓冲区的数据送出. 2. 文件存储: 存储到内部:另外使用一个class实现,最开始初始化用了this,后来放在这里不合适,改成了带参数的构造方法. ...

  7. 升级到Xcode 5.1和iOS 7遇到的各种问题及解决办法汇总：

    <iOS 企业证书部署无效的问题>:http://t.cn/8s7ILWZ <clipsToBounds 属性默认值变了>:http://weibo.com/165881473 ...

  8. 本地安装了flash，前台浏览器还显示需要安装flash？是因为版本需要对应

    NPAPI:适用于FireFox(火狐).Safari(苹果).Opera (欧朋,12.17版以下) PPAPI:适用于Chromium浏览器.Opera (欧朋,15.00版以上) ActiveX ...

  9. freemark 语法

    我们通过后端model. addAttribute() 传递到前端的值来进行界面渲染 它的循环语句 和其他的有点不同: if 循环 <#if 条件语句> </#if> if  ...

  10. Java核心基础知识(一)：概念、语法、使用、源码

    1. Java中OOP的特点? OOP(Object Oriented Programming):面向对象编程.具有封装.继承.多态三大特征. 封装:解决数据安全性问题: 继承:解决代码的重用性问题: ...