文档章节

理解HTML DOM :节点,节点树,访问节点

mxPickle
 mxPickle
发布于 2017/09/07 16:34
字数 736
阅读 5
收藏 0
点赞 0
评论 0

1.HTML DOM 定义了访问和操作HTML文档的标准方法。

2.HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。

注意:

DOM 是这样规定的:
(1)整个文档是一个文档节点
(2)每个 HTML 标签是一个元素节点
(3)包含在 HTML 元素中的文本是文本节点
(4)每一个 HTML 属性是一个属性节点
*注释属于注释节点
*Node 层次
*节点彼此都有等级关系。

总结:HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素属性文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。

(三)访问节点

通过 DOM,您可访问 HTML 文档中的每个节点。

查找并访问节点:可通过若干种方法来查找您希望操作的元素,如:

(1)通过使用 getElementById() getElementsByTagName() 方法。【注意:这两种方法会忽略文档的结构】
(2)通过使用一个元素节点的 parentNodefirstChild 以及 lastChild 属。

语法、用法

1.getElementById() 语法

用法:document.getElementById("ID");

注释:getElementById() 无法工作在 XML 中。在 XML 文档中,您必须通过拥有类型 id 的属性来进行搜索,而此类型必须在 XML DTD 中进行声明。

2.getElementsByTagName() 方法

用法:document.getElementsByTagName("标签名称");

getElementsByTagName() 会指定的标签名返回所有的元素(作为一个节点列表),这些元素是您在使用此方法时所处的元素的后代。

getElementsByTagName() 可被用于任何的 HTML 元素。

Example:

节点列表(nodeList)

当我们使用节点列表时,通常要把此列表保存在一个变量中,就像这样:
var x=document.getElementsByTagName("p");现在,变量 x 包含着页面中所有 <p> 元素的一个列表,并且我们可以通过它们的索引号来访问这些 <p> 元素。

注释:索引号从 0 开始。

(1)可以通过使用 length 属性循环遍历节点列表

var x=document.getElementsByTagName("p");
for (var i=0;i<x.length;i++)
  { 
  // do something with each paragraph
  }

(2)可以通过索引号来访问某个具体的元素

要访问第三个 <p> 元素,您可以这么写:var y=x[2];

parentNode、firstChild以及lastChild

这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构,在文档中进行“短距离的旅行”。

请看下面这个 HTML 片段:

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>Alaska</td>
  </tr>
</table>

在上面的HTML代码中,第一个 <td> 是 <tr> 元素的首个子元素(firstChild),而最后一个 <td> 是 <tr>元素的最后一个子元素(lastChild)。此外,<tr> 是每个 <td>元 素的父节点(parentNode)

【待续,在下一章节~~~~~~】

 

 

© 著作权归作者所有

共有 人打赏支持
mxPickle
粉丝 0
博文 5
码字总数 2170
作品 0
深圳
前端工程师
【JavaScript基础知识】——DOM基础

基本概念 DOM即文档对象模型,针对HTML和XML文档的API(应用程序接口)。它描绘了一个层次化的节点树,运行开发人员添加、移除和修改页面的某一部分。DOM可以以一种独立于平台和语言的方式访...

柠檬酷 ⋅ 2015/11/16 ⋅ 0

DOM系列:DOM树和遍历DOM

上一节,咱们整理了DOM系列中的第一篇,主要介绍浏览器与DOM相关的知识。从标题中我们可以看出来,今天所要学的东西包含两个部分,第一部分是DOM树,第二部分是遍历DOM。如果你和我一样对于D...

一个敲代码的前端妹子 ⋅ 05/28 ⋅ 0

【JavaScript】详解HTML DOM

HTML DOM定义了访问和操作HTML文档的标准方法。HTML DOM 把HTML文档呈现为带有元素、属性和文本的树结构(节点树)。 HTML DOM简介 HTML文档对象模型(HTML Document Object Model)定义了访...

磊神Ray ⋅ 2011/11/14 ⋅ 0

掌握 Ajax,第 5 部分: 操纵 DOM

Brett McLaughlin, 作者,编辑, O'Reilly Media Inc. 本文内容包括: · 跨浏览器、跨语言 ·节点的概念 ·节点的属性 ·节点方法 ·API 设计问题 ·通用节点类型 ·文档节点 ·元素节点 ·属...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

Javascript中DOM技术的的简单学习

第十四课 DOM技术概述 1:DOM概述   文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。 DOM是一...

别叫小伙 ⋅ 2016/08/13 ⋅ 0

JavaScript DOM常见知识点总结

理论知识回顾 DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。DOM脱胎于Netscape及微软...

周希孟 ⋅ 05/09 ⋅ 0

理解关键的渲染路径

本文转载自:《Understanding the Critical Rendering Path》,原文地址:https: //bitsofco.de/understanding-the-critical-rendering-path/ 当浏览器从服务器接收到一个HTML页面的请求时,到...

lecepin ⋅ 2017/02/08 ⋅ 0

JavaScript和DOM

[toc] 一些补充(不知道放在哪里、、、): :指定节点的class :可以访问body节点 :检查是否被选中(true) :在document加载完成后调用 一、初识DOM 文档对象模型DOM(Document Object Model...

AsuraDong ⋅ 2017/11/19 ⋅ 0

js的DOM节点操作:创建 ,插入,删除,复制,查找节点

DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准。其赋予了JS操作节点的能力。当网页被加载时,浏览器就会创建页面的文档对象模型。...

torrex ⋅ 2017/01/12 ⋅ 0

AJAX基础(三)——DOM基础及DOM操纵HTML

DOM的概念 DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。有一点...

白志华 ⋅ 2015/09/28 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

马氏距离与欧氏距离

马氏距离 马氏距离也可以定义为两个服从同一分布并且其协方差矩阵为Σ的随机变量之间的差异程度。 如果协方差矩阵为单位矩阵,那么马氏距离就简化为欧氏距离,如果协方差矩阵为对角阵,则其也...

漫步当下 ⋅ 昨天 ⋅ 0

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部