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就 ...
随机推荐
- Json中判断是JSONArray还是JSONObject
聪明的人总是能想到别人会遇到的问题,提前给出解决方案. List propList = new ArrayList(); //装载数据的list JSONArray array= JSONArray. ...
- flask中的目录解析
首先我们看一下博客blog的封面,flask和django都属于web框架.不过flask属于轻量级web框架,功能的实现是通过扩展实现的,extension.py 中存放各个对象,具体的功能通过对象 ...
- (13)C++ 多态
虚析构和纯虚析构用来解决父类指针释放子类对象的问题,此时会不调用子类的析构函数 如果子类没有堆数据,可以不使用虚析构
- docker-compose 搭建 Redis Sentinel 测试环境
docker-compose 搭建 Redis Sentinel 测试环境 本文介绍如何使用 docker-compose 快速搭建一个 Redis Sentinel 测试环境.其中 Redis 集群 ...
- Linux安装Oracle 10g
目录 目录 环境 RHEL6 Configuration Update JDK 配置Oracle安装环境 硬件检测 软件检测 编辑配置文件 安装Oracle Database 环境 系统 RHEL6 ...
- Git 设置和取消代理(SOCKS5代理)
设置代理 git config --global http.proxy 'socks5://127.0.0.1:1080' git config --global https.proxy 'socks ...
- jQuery.inArray()方法
$.inArray() 函数用于在数组中查找指定值,并返回它的索引值(如果没有找到,则返回-1) 提示:源数组不会受到影响,过滤结果只反映在返回的结果数组中. 语法 $.inArray( value, ...
- 什么是AngularJs？特点是什么？和JQuery什么区别和联系
什么是AngularJs? AngularJs是js框架,集中操作数据,不关注Dom操作,适用于以数据操作为主的的SPA(单页应用). 它的特点 采用MVC模型 双向数据绑定 依赖注入 模块化 与jQ ...
- Device Drivers
Types of Device Drivers Windows可能会有User-mode的驱动,但是我们只关注Kernel-Mode的驱动. WDM Drivers WDM是一种驱动模型,是比较常用的 ...
- cesium清除选定事件
cesium清除选定事件 此处的案例不一定适合你的项目,但可以给你一个思路.清除选定,就是还原你选中之前的状态.比如你点击一个面高亮,面的颜色发生改变:并且会弹出一个divPoint框.此时的清除选定 ...