什么是 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. beautifhulsoup4的使用

    Beautiful: - 基本使用 from bs4 import BeautifulSoup   - 解析器:       lxml, html.parser​   soup = Beautiful ...

  2. php time()函数 语法

    php time()函数 语法 time()函数怎么用? php time()函数用来返回当前时间的unix时间戳.语法是time(),返回自从 Unix 纪元(格林威治时间 1970 年 1 月 1 ...

  3. MD5、SHA1、DES加密和解密，Base64编码解码

    /// <summary> /// EncryptHelper 来自 www.Admin10000.com /// </summary> public class Encryp ...

  4. implements Serializable有什么作用

    转自 http://blog.csdn.net/dinghqalex/article/details/46009911

  5. 兼容iphone x刘海的正确姿势

    在 ios 11 中我们可以使用 viewport-fit=cover + safe-area-inset-*. 那么是不是 ios11 以下就用不了这些了呢?是的,但你见过 iphone x+ 有 ...

  6. margin 负值问题

    * margin-top 和 margin-left 负值,自身元素向上.向左移动: * margin-right 负值,右侧元素左移,自身元素不受影响: * margin-bottom 负值,下方元 ...

  7. JAVA StringUtils方法全集

    StringUtils方法全集 org.apache.commons.lang.StringUtils中方法的操作对象是java.lang.String类型的对象,是JDK提供 的String类型操作 ...

  8. ceph命令拷屏

    常用命令ceph -w ceph df ceph features ceph fs ls ceph fs status ceph fsid ceph health ceph -s ceph statu ...

  9. ES6数组中删除指定元素

    知识点: ES6从数组中删除指定元素 findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引.否则返回-1. arr.splice(arr.findIndex(item => ...

  10. 数据库的基本使用（C#语言）

    目录 insert select 的使用 delete update 更新 Like模糊查询 Order 排序 GETDATA() 聚合函数:MAX,MIN,AVG,SUM,COUNT Max COU ...