打了BOM,来了DOM?

📜个人简介

⭐️个人主页:微风洋洋🙋‍♂️
🍑博客领域:编程基础,后端
🍅写作风格:干货,干货,还是tmd的干货
🌸精选专栏【JavaScript】
🚀支持洋锅:点赞👍、收藏⭐、留言💬

好久不见,甚是想念!
大家好!我是微风洋洋

之前洋锅花了两篇文章来介绍BOM,没想到刚讲完啦BOM,就来了DOM。就好像是打了小的,来了老的,是不是玩不起?
那DOM有时何许人也?是BOM的爹地嘛?

传送门

什么,BOM指的是物料清单?

JavaScript实现“双11”秒杀,你也可以

一、DOM对象简介

🌴 什么是DOM

DOM:Document Object Model,文档对象模型。

作用:是一套规范文档内容的通用型标准。

DOM发展历史
1.

  • 时间:1998年10月。
  • 事件:DOM正式成为W3C的推荐标准。
  • 名称:第1级DOM(DOM Level 1,或DOM1)。
  • 作用:为XML和HTML文档中的元素、节点、属性等提供了必备的属性和方法。
  • 参考:最初结合了Netscape及微软公司开发的DHTML(动态HTML)思想。

2.
  • 时间:2000年11月。
  • 事件:发布了第2级DOM(DOM Level 2,或DOM2)。
  • 作用:在DOM1的基础上增加了样式表对象模型。
  • 名称:第3级DOM(DOM Level 3,或DOM3) 。
  • 作用:在DOM2基础上增加了内容模型、文档验证以及键盘鼠标事件等功能。
  • 提示:直到目前为止,DOM几乎被所有浏览器所支持。

🌴 DOM HTML节点树

DOM HTML指的是DOM中为操作HTML文档提供的属性和方法。

  • 文档(Document)表示HTML文件。
  • 文档中的标签称为元素(Element)。
  • 文档中的所有内容称为节点(Node)。

因此,一个HTML文件可以看作是所有元素组成的一个节点树,各元素节点之间有级别的划分

在这里插入图片描述

在这里插入图片描述


  • HTML文档根据节点作用,分为标签节点、文本节点、属性节点和注释节点。
  • 各节点之间的关系,又可分为以下几个方面:
  • 根节点:标签是整个文档的根节点,有且仅由一个。
  • 子节点:指的是某一个节点的下级节点。
  • 父节点:指的是某一个节点的上级节点。
  • 兄弟节点:两个节点同属于一个父节点。

🌴 DOM对象的继承关系

通过前面的学习可以知道,在JavaScript中要对网页中的元素进行操作,可以利用document对象的getElementById()方法实现,但是此方法的返回值类型是什么?下面通过代码进行查看。

在这里插入图片描述

在这里插入图片描述


📌 总结

  • document和Element是两种不同类型的节点(Node)对象。
  • 它们不仅能够使用Node对象的一系列属性和方法完成节点操作。
  • 也可以使用特有的属性和方法完成不同类型节点的操作。

在这里插入图片描述

除了document和Element对象,还有其他几种类型的节点对象也继承Node对象,如文本(Text)、注释(Comment)等。


举个例子
在这里插入图片描述


代码实现👇


	<div id="test"></div>
	<script>
	var test = document.getElementById('test');
	console.log(test); // 输出结果:<div id="test"></div>
	console.log(test.__proto__); // 输出结果:HTMLDivElement { …… }
	</script>
	
	<div id="test"></div>
	<script>
	var test = document.getElementById('test');
	console.log(test.nodeName); // 通过节点方式获取节点名,输出结果:DIV
	console.log(test.tagName); // 通过元素方式获取标签名,输出结果:DIV
	console.log(document.nodeName); // document属于节点,输出结果:#document
	console.log(document.tagName); // document不属于元素,输出结果:undefined
	</script>
	
	<script>
	var test = document.getElementById('test');
	test.nodeType === Node.ELEMENT_NODE; // 比较结果:true
	document.nodeType === Node.DOCUMENT_NODE; // 比较结果:true
	<script>

在这里插入图片描述



二、DOM节点操作

🌴 获取节点

由于HTML文档可以看做是一个节点树,因此,可以利用操作节点的方式操作HTML中的元素。

在这里插入图片描述

childNodes属性与前面学习过的children属性的区别。

相同点:都可以获取某元素的子元素。

不同点: childNodes属性用于节点操作,返回值中还会包括文本节点等其他类型的节点,是一个NodeList对象的集合。 children属性用于元素操作,返回的是HTMLCollection对象的集合

举个例子

在这里插入图片描述

代码实现👇


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>节点操作</title>
	</head>
	<body>
	<ul id="ul">
	<li>JS</li>
	<li>BOM</li>
	<li>DOM</li>
	<!--注释-->
	</ul>
	<script>
	var ul = document.getElementById('ul'); // 根据id获取ul的元素对象
	console.log(ul.childNodes); // 查看ul下的所有节点
	</script>
	</body>
	</html>

📌 注意

childNodes属性在IE6~8不会获取文本节点,在IE9及以上版本和主流浏览器中则可以获取文本节点。

此外,由于document对象继承自Node节点对象,因此document对象也可以进行以上的节点操作。

在这里插入图片描述



🌴 节点追加

在获取元素的节点后,还可以利用DOM提供的方法实现节点的添加,如创建一个li元素节点,为li元素节点创建一个文本节点等。

在这里插入图片描述

create系列的方法是由document对象提供的,与Node对象无关。

举个例子

在这里插入图片描述

代码实现👇


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>节点追加</title>
	</head>
	<body>
	<script>
	var h2 = document.createElement('h2'); // 创建h2元素节点
	var text = document.createTextNode('Hello JavaScript'); // 创建文本节点
	var attr = document.createAttribute('align'); // 创建属性节点
	attr.value = 'center'; // 为属性节点赋值
	h2.setAttributeNode(attr); // 为h2元素添加属性节点
	h2.appendChild(text); // 为h2元素添加文本节点
	document.body.appendChild(h2); // 将h2节点追加为body元素的子节点
	console.log(document.getElementsByTagName('h2')[0]);
	</script>
	</body>
	</html>



🌴 节点删除

语法:removeChild()和removeAttributeNode()方法实现。

返回值:是被移出的元素节点或属性节点。

举个例子

在这里插入图片描述

代码实现👇


	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>删除节点和节点属性</title>
	</head>
	<body>
	<ul>
	<li>PHP</li><li>JavaScript</li><li class="strong">UI</li>
	</ul>
	<script>
	var child = document.getElementsByTagName('li')[2]; // 获取第3个li元素
	var attr = child.getAttributeNode('class'); // 获取元素的class属性值
	console.log(child.removeAttributeNode(attr)); // 删除元素的class属性值
	console.log(child.parentNode.removeChild(child)); // 删除元素
	</script>
	</body>
	</html>

如果觉得这篇文章对你有一丢丢启发的话,不妨 点赞👍、收藏⭐、留言💬支持一下,你的支持将是我继续创作的最大动力❤️❤️❤️

由于作者水平有限,如有错误和不准确之处在所难免,本人也很想知道这些错误,恳望读者批评指正!

if (学会了){
点赞收藏给个好评,我祝福您学啥会啥;
}else{
点赞收藏给个好评,我相信您定能学会;
}

  • 90
    点赞
  • 69
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 161
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 161
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

微风洋洋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值