专栏首页cwl_Java前端基础-文档对象模型 (DOM)

前端基础-文档对象模型 (DOM)

第1章 文档对象模型 (DOM)

1.1 基本概念

DOM是JavaScript操作网页的接口,全称为“文档对象模型”(Document Object Model)。 它的作用是将网页转为一个JavaScript对象,从而可以用脚本进行各种操作(增删改查)。

浏览器会根据DOM模型,将结构化文档(比如HTML和XML)解析成一系列的节点, 再由这些节点组成一个树状结构(DOM Tree)。 所有的节点和最终的树状结构,都有规范的对外接口。

JavaScript是一门编程语言,而DOM是浏览器对HTML文档结构化后的一个模型;

严格地说,DOM不属于JavaScript,但是我们最常用的就是使用JavaScript操作DOM;

1.2 节点的概念

DOM的最小组成单位叫做节点(node)。文档的树形结构(DOM树),就是由各种不同类型的节点组成。

每个节点都可以看作是文档树的一片叶子。

最顶层的节点就是document节点,它代表了整个文档;是文档的根节点。

每张网页都有自己的document节点,window.document属性就指向这个节点的。

只要浏览器开始载入HTML文档,这个节点对象就存在了,可以直接调用。

每一个HTML标签元素,在DOM树上都会转化成一个Element节点对象;

文档里面最高一层一般是HTML标签,其他HTML标签节点都是它的下级。

除了根节点以外,其他节点对于周围的节点都存在三种关系:

父节点关系(parentNode):直接的那个上级节点 
子节点关系(childNodes):直接的下级节点 
同级节点关系(sibling):拥有同一个父节点的节点

常用dom操作:

查找页面的标签元素

标签增加、修改、删除等操作

标签的属性相关操作

给标签元素绑定事件(设置当什么什么时候,做什么什么事情)

1.3 查找节点

上一节我们知道,整个文档的节点就是document节点,那么想要具体找到某个节点, 我们可以使用document提供的一系列方法:

<div>
	<p id="p1">1111111111</p>
	<i>2222222222</i>
	<p class='p'>1111111111</p>
	<i>2222222222</i>
	<p class="p">1111111111</p>
	<i>2222222222</i>
	<div id="p">
	    <p name="p">3333333333</p>
	</div>
</div>

getElementsByTagName() 返回所有指定HTML标签的元素,返回值是一个类似数组的HTMLCollection对象;匹配失败,返回[] 参数是想要获取节点的具体节点名称,就是 标签名;

var p = document.getElementsByTagName('p');
//标签节点.style.样式名 = '样式值'  可以给标签节点设置css样式
p[3].style.background = 'red';

getElementsByClassName() 返回所有class名字符合指定条件的元素,返回值是一个类似数组的HTMLCollection对象;匹配失败,返回[] 参数为 标签的class属性的值

var p = document.getElementsByClassName('p');
p[1].style.background = 'yellow';

getElementsByName() 选择拥有name属性的HTML元素,返回值是一个类似数组的HTMLCollection对象;匹配失败,返回[] 参数为 标签的name属性的值; 注意,使用时,最好选择原生具有name属性的元素;

var p = document.getElementsByName('p');
p[0].style.background = 'yellow';

getElementById() 返回匹配指定id属性的元素节点;没有发现匹配的节点,则返回null 参数为 标签的id属性的值,参数大小写敏感;

var p = document.getElementById('p');
p.style.background = 'yellow';

querySelector()、querySelectorAll() document.querySelector方法接受一个CSS选择器作为参数,返回匹配该选择器的元素节点; 如果有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回null;

document.querySelectorAll方法与querySelector用法类似, 区别是返回一个类似数组的HTMLCollection对象,包含所有匹配给定选择器的节点。

var p = document.querySelector('.p');
p.style.background = 'yellow';
var p = document.querySelectorAll('.p');
p[1].style.background = 'yellow';

多个参数值,使用,(英文逗号)隔开,而querySelector()返回第一个选中的节点;

var p = document.querySelectorAll('i,.p');
for(var i=0;i<p.length;i++){
    p[i].style.background = 'yellow';
}

这两个方法都支持复杂的CSS选择器。

//选中 id 属性值为p1的元素
// var p = document.querySelectorAll('[id="p1"]');
//选中div元素的class属相值为p的元素
// var p = document.querySelectorAll('div.p');
//选中所有的p标签,但是class值为p的除外
var p = document.querySelectorAll('p:not(.p)');

for(var i=0;i<p.length;i++){
    p[i].style.background = 'yellow';
}

但是,它们不支持CSS伪元素的选择器(比如:first-line和:first-letter) 和伪类的选择器(比如:link和:visited),即无法选中伪元素和伪类。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 快速学习-以太坊全节点

    cwl_java
  • 3分钟速读原著《Java数据结构与算法》(三)

    cwl_java
  • 快速学习-Oozie的功能模块介绍

    cwl_java
  • 各大中间件底层技术-分布式一致性协议 Raft 详解

    在一个技术团队内假设角色都是 均等的,会导致什么情况呢?产品提出一个需求,就可以随便去找团队中的任意一个人去发起需求。如果这个人因为请假走了,但是他没有把需求及...

    Java_老男孩
  • 详解 React 16 的 Diff 策略

    这是我 Deep In React 系列的第二篇文章,如果还没有读过的强烈建议你先读第一篇:详谈 React Fiber 架构(1)。

    Nealyang
  • Rafy 领域实体框架 - 树型实体功能(自关联表)

    在 Rafy 领域实体框架中,对自关联的实体结构做了特殊的处理,下面对这一功能进行讲解。 场景 在开发数据库应用程序时,往往会遇到自关联表的场景。例如,分类信息...

    用户1172223
  • 分布式系统一致性和共识基础(二)

    The Byzantine Generals Problem拜占庭将军问题是Lesilie Lamport等人 1982年发表的论文, 具体PDF链接, htt...

    Zeal
  • 详解 React 16 的 Diff 策略

    这是我 Deep In React 系列的第二篇文章,如果还没有读过的强烈建议你先读第一篇:详谈 React Fiber 架构(1)。

    胡哥有话说
  • 详解 React 16 的 Diff 策略

    我相信在看这篇文章的读者一般都已经了解过 React 16 以前的 Diff 算法了,这个算法也算是 React 跨时代或者说最有影响力的一点了,使 React...

    桃翁
  • 3-Kubernetes进阶架构学习操作与配置

    Q:什么是节点? 答:Kubernetes中节点(node)指的是一个工作机器曾经叫做 minion , 但是需要注意不同的集群中,节点可能是虚拟机也可能是物理...

    WeiyiGeek

扫码关注云+社区

领取腾讯云代金券