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就 ...
随机推荐
- linux su su-的区别
su只是切换用户. su - 切换用户并切换shell环境. su another pwd后为/home/current su - another pwd后为/home/another
- Linq 使用Startswith 出现空引用的问题
一.问题 我使用的是Entity Fromwork CodeFirst来操作数据库,昨天在使用startswith查询数据的时候发现一个问题,就是经常一直报空引用的错误,查了很久才找到原因,这里做一个 ...
- PHP filter_id() 函数
定义和用法 filter_id() 函数返回指定过滤器的 ID 号. 如果成功则返回过滤器的 ID 号,如果过滤器不存在则返回 NULL. 语法 filter_id(filter_name) 参数 描 ...
- leetcode骚题目列表
114,二叉树原地前序遍历转链表 令人不舒服的空间限制 4,O(logn)寻找两个数组的中位数 感觉诡异又很其妙的二分 279,判断一个数可拆成最少几个平方数的和 有O(n)解法,如果把sqrt视为O ...
- GO 学习资源收集
golang图书,在线阅读Go轻松学https://www.golang123.com/book/16 Go示例学https://www.golang123.com/book/17 Go Web 编 ...
- Wireshark协议分析1
一.界面简介 1.抓包工具栏 2.文件工具栏 3.包定位工具栏 4.颜色以及滚动界面工具栏 5.数据包列表字体定义工具栏 6.首选项工具栏 二.过滤规则 1.过滤 IP ip.src eq 192 ...
- mysql全家桶（二）数据操作
一.数据操作1.增#新增insert into 表名(字段列表) values(值列表);INSERT INTO table_name ( field1, field2,...fieldN ) VAL ...
- 用processing生成屏保程序
想法 利用随机数控制圆圈的大小.位置以及颜色,可以产生随机的美感. 让小球动起来,并且在屏幕边界处产生反弹效果. 代码 1: float circle_x = (float) 0.0; 2: floa ...
- flex属性flex-grow、flex-shrink、flex-basis
tip: 1)这些属性写在子元素中,作用于子元素(父元素中应设置display:flex) 2)作用是子元素如何分配父元素的空间 3) flex-grow 是扩展比率,当子元素宽度总和小于父元素宽度时 ...
- winserver 2008 找不到回收站的解决办法
桌面新建文件夹,命名为 “回收站.{645ff040-5081-101b-9f08-00aa002f954e}”,就可以了.