什么是 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. MariaDB 更新查询

    UPDATE 命令通过更改值来修改现有字段. 它使用SET子句指定要修改的列,并指定分配的新值. 这些值可以是字段的表达式或默认值. 设置默认值需要使用DEFAULT关键字. 该命令还可以使用WHER ...

  2. DMA实验总结

    一.RCC设置 没什么好写的之前USART的基本一样 /************************************************************************ ...

  3. 【Flutter学习】之绘画实例(一)

    一,概述 画布(Canvas) 画布是一个矩形区域,我们可以控制其每一像素来绘制我们想要的内容 Canvas 拥有多种绘制点.线.路径.矩形.圆形.以及添加图像等的方法,结合这些方法我们可以绘制出千变 ...

  4. if语句里面continue和break的区别

    break:结束整个循环体 continue:结束本次循环 代码说明: public static void main(String[] args) { int x=0; while(x++ < ...

  5. （转）深入剖析Java中的装箱和拆箱

    转:https://www.cnblogs.com/dolphin0520/p/3780005.html 深入剖析Java中的装箱和拆箱 自动装箱和拆箱问题是Java中一个老生常谈的问题了,今天我们就 ...

  6. vim 更改注释颜色

    在 ~/.vimrc 添加命令: highlight Comment ctermfg=green

  7. HDU 3746 Cyclic Nacklace (KMP找循环节)

    题目链接:HDU 3746 Sample Input 3 aaa abca abcde Sample Output 0 2 5 Author possessor WC Source HDU 3rd & ...

  8. 使用jmeter做接口测试----柠檬不萌！

    一.乱码解决方案 1.jmeter查看结果树乱码 (1)在jmeter的bin目录下找到jmeter.properties这个文件,添加上 sampleresult.default.encoding= ...

  9. 20140914 1到N自然数排序

    1.关于一道1到N自然数排序的华为面试题 http://blog.csdn.net/hongyuan19/article/details/1887656 为什么想进入华为 你对华为了解多少? 华为给我 ...

  10. Python matplotlib 交互模式

    在交互模式下一定要执行plt.pause(0.0001)  才会显示图像