HTML DOM之三：节点关系导航
1、获取节点列表
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <p>Hello World!</p>
6 <p>DOM 很有用！</p>
7 <p>本例演示 <b>length</b> 属性。</p>
8
9 <script>
10 x=document.getElementsByTagName("p");
11 for (i=0;i<x.length;i++)
12 {
13 document.write(x[i].innerHTML);
14 document.write("<br>");
15 }
16 </script>
17 </body>
18 </html>
2、导航节点关系
您能够使用三个节点属性：parentNode、firstChild 以及 lastChild、childNodes[]，在文档结构中进行导航。
请看下面的 HTML 片段：
<html>
<body> <p>Hello World!</p>
<div>
<p>DOM 很有用!</p>
<p>本例演示节点关系。</p>
</div> </body>
</html>
- 首个 <p> 元素是 <body> 元素的首个子元素（firstChild）
- <div> 元素是 <body> 元素的最后一个子元素（lastChild）
- <body> 元素是首个 <p> 元素和 <div> 元素的父节点（parentNode）
例子2.1：firstChild 属性可用于访问元素的文本：
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <p id="intro">Hello World!</p>
6
7 <script>
8 x=document.getElementById("intro");
9 document.write(x.firstChild.nodeValue);
10 </script>
11
12 </body>
13 </html>
例子2.2：除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <p id="intro">Hello World!</p>
6
7 <script>
8 txt=document.getElementById("intro").childNodes[0].nodeValue;
9 document.write(txt);
10 </script>
11
12 </body>
13 </html>
3、DOM 根节点
这里有两个特殊的属性，可以访问全部文档：
- document.documentElement - 全部文档
- document.body - 文档的主体
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <p>Hello World!</p>
6 <div>
7 <p>DOM 很有用！</p>
8 <p>本例演示 <b>document.body</b> 属性。</p>
9 </div>
10
11 <script>
12 alert(document.body.innerHTML);
13 </script>
14
15 </body>
16 </html>
HTML DOM之三：节点关系导航的更多相关文章
- DOM树节点关系
DOM是JS中专门操作HTML页面内容的 他的三种基本使用方法是: 1. document.getElementById(''): ——>选取html页面中带有Id的属性名: 2.docum ...
- 深入理解DOM节点关系
× 目录 [1]父级属性 [2]子级属性 [3]同级属性[4]包含方法[5]关系方法 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不 ...
- DOM节点关系,节点关系
DOM节点关系 定义 节点中的各种关系可以用传统的家族关系来描述,相当于把文档树比喻成家谱. 属性 [nodeType.nodeName.nodeValue] 每个节点都有这三个属性,且节点类型不同, ...
- jacascript DOM节点——节点关系与操作
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...
- 深入学习jQuery节点关系
× 目录 [1]后代元素 [2]祖先元素 [3]兄弟元素 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点之间的关系构成了层次,而所有页面标记则表现为一个以特定节点为根节点的树形 ...
- 深入解析浏览器的幕后工作原理(三) 呈现树和 DOM 树的关系
呈现树和 DOM 树的关系 呈现器是和 DOM 元素相对应的,但并非一一对应.非可视化的 DOM 元素不会插入呈现树中,例如"head"元素.如果元素的 display 属性值为& ...
- JS中BOM和DOM之间的关系
一.Javascript组成JavaScript的实现包括以下3个部分:1.核心(ECMAScript):描述了JS的语法和基本对象.2.文档对象模型 (DOM):处理网页内容的方法和接口.3.浏览器 ...
- JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
- DOM树节点和事件
一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点 DOM节点分为三大类: 元素节点,属性节点,文本节点 ...
- JavaScript之DOM创建节点
上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...
随机推荐
- 快速上手 | Datavines 两表值比对规则用法
Datavines 是一站式开源数据可观测性平台,提供元数据管理.数据概览报告.数据质量管理,数据分布查询.数据趋势洞察等核心能力,致力于帮助用户全面地了解和掌管数据,让您做到心中有数. 场景 比较某 ...
- 2023-07-17：给定一个数组arr，长度为n， 再给定一个数字k，表示一定要将arr划分成k个集合， 每个数字只能进一个集合。 返回每个集合内部的平均值都累加起来最小的值。 平均值向下取整。 1
2023-07-17:给定一个数组arr,长度为n, 再给定一个数字k,表示一定要将arr划分成k个集合, 每个数字只能进一个集合. 返回每个集合内部的平均值都累加起来最小的值. 平均值向下取整. 1 ...
- linux 问题： ssh登录报错，ssh_exchange_identification，多次几次可以登录
分析 怀疑是句柄数不够,和ssh的最大登录限制 确认 2.1 确认句柄数 过程: ~# systemctl status sshd | grep -i pid Main PID: 3767395 (s ...
- Blazor前后端框架Known-V1.2.10
V1.2.10 Known是基于C#和Blazor开发的前后端分离快速开发框架,开箱即用,跨平台,一处代码,多处运行. Gitee: https://gitee.com/known/Known Git ...
- 洛谷 P1387 最大正方形 题解
方法1 二分+暴力+前缀和Check 注意细节 通过二维前缀和判定矩形内是否全为1,计算和等于长度的平方就判断为是 复杂度\(\Theta (n^2\log{n})\) #include <bi ...
- arrch架构部署redis，报错： ignore-warnings ARM64-COW-BUG
arrch架构服务器redis部署完成后,启动报错.做个记录. arrch架构的redis安装包 下载链接:https://pan.baidu.com/s/1TMXNpMvMDWRFD1f5km7Mw ...
- 《深入理解Java虚拟机》读书笔记：垃圾收集算法
由于垃圾收集算法的实现涉及大量的程序细节,而且各个平台的虚拟机操作内存的方法又各不相同,因此本节不打算过多地讨论算法的实现,只是介绍几种算法的思想及其发展过程. 垃圾收集算法概要 1. 标记-清除算法 ...
- Xshell7 / Xftp7 永久免费，官网直连下载地址
主要目的是让大家随时随地从官网下载Xshell和Xftp免费版(个人/家庭/学校免费) 最新变动:官方目前仅提供最新版以及上一个版本的软件下载!其他版本不提供下载 免费版5版本(最后一个版本,无任何限 ...
- 第2章 Git安装
兄弟,恭喜你,刷到这篇超详细安装GIt教程,就让Codeyang带你一步一步的安装Git!~~ Git官网地址: https://git-scm.com/ 查看 GNU 协议,可以直接点击下一步. 选 ...
- 关于TCP 四次挥手过程中的reset包问题
数据包过程 TCP状态机转换过程 客户端在接受到第32个数据包之后,应该发送1个对FIN的ACK数据包,然而客户端缺直接连续发送了3个Rest数据包36~38,客户端并未进入time wait阶段,直 ...