DOM学习总结（六）DOM导航
什么是 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导航的更多相关文章
- JavaScript学习 - 基础(六) - DOM基础操作
DOM: DOM定义了访问HTML 和XML 文档的标准:1.核心DOM 针对结构化文档的标准模型2.XMK DOM 针对XML文档的标准模型3.HTML DOM 针对HTML文档的标准模型 DOM节 ...
- HTML DOM 学习
HTML DOM 学习 By: Mirror王宇阳 E-mail:2821319009@qq.com 博客主页:https://www.cnblogs.com/wangyuyang1016/ DOM ...
- javascript学习 真正理解DOM脚本编程技术背后的思路和原则
本文学习来源于<javascriptDOM编程艺术>仅作笔记 学会怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页. 循序渐进:从最核心的内容开始,逐步 ...
- JavaScript DOM学习总结（一）
DOM 什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法. W3C给出的DOM定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...
- js学习总结：DOM节点二（dom基本操作）
一.DOM继承树 DOM——Document Object Model DOM定义了表示修改文档所需要的方法.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml的一类厂商定义,也有人称 ...
- HTML DOM 学习笔记
一.HTML DOM定义了所有HTML元素的对象和属性,以及访问他们的方法即:HTML DOM是关于如何获取,修改,添加,删除HTML元素的标准二.DOM节点1.分类整个文档是一个文档节点每个HTML ...
- 第一百六十七节，jQuery，DOM 节点操作，DOM 节点模型操作
jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- 前端基础-BOM和DOM学习
JavaScript分为 ECMAScript,BOM,DOM. BOM:是指浏览器对象模型,使JavaScript有能力与浏览器进行对象. DOM:是指文档对象模型,通过它,可以访问HTML文档的所 ...
- 前端学习 之 JavaScript DOM 与 BOM
一. DOM介绍 1. 什么是DOM? DOM:文档对象模型.DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构. 目的其实就是为了能让js操作html元素而制定的一个规范. DOM就 ...
随机推荐
- Mybatis缓存+配置
mybatis提供了缓存机制减轻数据库压力,提高数据库性能 mybatis的缓存分为两级:一级缓存.二级缓存 一级缓存是SqlSession级别的缓存,缓存的数据只在SqlSession内有效 二级缓 ...
- STM32点LED灯
一.建立项目模板 这里的user中重复引用了system_stm32f10x.c Output中选择Create HEXFile,并且可以选择输出路径. Listing中可以选择输出路径. 然后在C/ ...
- 2019牛客多校第四场D-triples I 贪心
D-triples 题意 给你一个\(n\),问至少有几个数或运算起来可以等于\(n\),并且输出数量和这个几个数.题目说明给的\(n\)一定符合条件(不会输出\(n= 1\) 之类不存在情况). 思 ...
- implements Serializable有什么作用
转自 http://blog.csdn.net/dinghqalex/article/details/46009911
- 分布式系统理论基础8：zookeeper分布式协调服务
本文转自 https://www.cnblogs.com/bangerlee/p/5268485.html 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到 ...
- 团队冲刺DAY4
DES算法 算法概要 在DES.java当中创立两个方法分别用作加密和解密 通过 `public static byte[] encrypt(byte[] data, String sKey) 创建方 ...
- ajax图片上传，单个按钮实现选择图片和上传
//图片原件上传功能 function gosubmit(file, key) { var formData = new FormData($("#inputForm")[0]); ...
- legend2---17、legend2里面怎么面向对象
legend2---17.legend2里面怎么面向对象 一.总结 一句话总结: mvc本身挺优:本身mvc的开发模式,就算是面向过程下也还行,如果面向对象那就更加棒了 实体类无需属性:由于php的生 ...
- ARMv8 架构与指令集.学习笔记
目 录 第1章 ARMv8简介. 3 1.1基础认识. 3 1.2 相关专业名词解释. 3 第2章 Execution State 4 2.1 提供两种Execution State 4 2.2 决定 ...
- java并发编程笔记（三）——线程安全性
java并发编程笔记(三)--线程安全性 线程安全性: 当多个线程访问某个类时,不管运行时环境采用何种调度方式或者这些进程将如何交替执行,并且在主调代码中不需要任何额外的同步或协同,这个类都能表现 ...