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就 ...
随机推荐
- 生成函数小结——[ EGF ][ ln 的一个套路 ][ 概率生成函数 ]
看了jcvb的WC2015交流课件.虽然没懂后面的复合逆部分,但生成函数感觉受益良多. 指数生成函数 集合中大小为 i 的对象的权值是 \( a_i \) ,该集合的生成函数是 \( \sum\lim ...
- POJ 1151 线段树+扫描线（计算矩形面积并）
前一篇博客有了讲解就不再叙述了 #include<cstdio> #include<cstring> #include<cmath> #include<ios ...
- Node.js环境下通过Express创建Web项目
通过Express命令创建项目 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express ...
- js的 算法 和 数据结构
js的 算法 1.对一个对象数组按照对象某个属性进行排序 : https://www.cnblogs.com/webcabana/p/7460038.html 在做公交的项目中就碰到过这种算法问题, ...
- QTP学习笔记1
1.将变量值写入datatable/ 从datatable中取值赋给变量 DataTable("列名","sheet名") = 变量名 变量名 = DataTa ...
- Android Studio3.3中Cannot resolve symbol ActivityTestRule
最近在看<Android编程权威指南>,在Windows10下安装了Android Studio3.3,边看编练习书中的例子程序,看到第21章""音频播放与单元测试&q ...
- ZanUI-WeApp -- 一个颜值高、好用、易扩展的微信小程序 UI 库
ZanUI-WeApp -- 一个颜值高.好用.易扩展的微信小程序 UI 库:https://cnodejs.org/topic/589d625a5c8036f7019e7a4a 微信小程序之官方UI ...
- Scrapy框架: 第一个程序
首先创建项目: scrappy start project maitian 第二步: 明确要抓取的字段items.py import scrapy class MaitianItem(scrapy.I ...
- .net EntityFramework dbContext 如何实例化
1 .DbContext怎么在Asp.mvc中使如何实例化 public class Repository { //实例化EF容器:有弊端.一个线程里可能会创建多个DbContext //DbCont ...
- Socket网络编程--初级
如果想开发一个基于TCP/IP协议的网络程序,应用程序之间则主要通过Socket交换数据 .NET Socket支持四种编程模式 1.居于阻塞模式的Socket编程 2.”非阻塞“模式的Socket编 ...