Javascript教程十————DOM

关注

原创最新推荐文章于 2026-01-01 03:28:12 发布 155 阅读 AI 写同款· GEO 优化 ›

JavaScript的DOM（JS）目录 1.DOM概述 2.获取HTML元素 3.修改HTML 4 修改CSS样式 5.元素操作 6.DOM事件 7.EvenListener监听事件 1.DOM概述通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对... 阅读详情

DOM对象

DOM是HTML文件被浏览器解析后的一个树形结构，用于在浏览器中显示HTML中的内容，同时浏览器只会生成一颗DOM树，因此，只有一个DOM的根结点document。

操纵DOM树的操作：遍历、添加、删除、更新。

获取一个DOM树的节点主要方法有三种：

document.getElementById() // ID 是唯一的在HTML文件中
document.getElementsByTagname() // 根据标签来获取一组节点
document.getElementsByClassName() // 根据classname获取一组节点

var test = document.getElementById('test');
// 获取节点test下的所有直属子节点:
var cs = test.children;
// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;

更新

var test = document.getElementById('test');
test.innerHTML = 'ABC'; // test内的HTML改成‘ABC’
test.innerText = 'ABC'; // test内的文本改成‘ABC’
test.style.color = 'red'; // 更改样式

插入

如果某个标签内容是空的，那么test.innerHTML()会为你添加上新节点，但如果内部有内容，则会出现覆盖的情况。

appendChild

把一个子节点添加到父节点的最后一个子节点。

insertBefore

parentElement.insertBefore(newElement, referenceElement);
// 子节点会插入到referenceElement之前

删除

要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把字节点删掉。

var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);

事件

JavaScript与HTML的交互是依靠事件进行驱动的。所谓事件 event，便是网页的点击或鼠标动作作出的响应。通俗的说，这种模型其实就是一个观察者模式。（事件是对象主题，而这一个个的监听器就是一个个观察者）

这里请先查看一下JS教程十一——事件循环机制，之后再来看这里。

事件流便是事件从触发开始到完成一系列动作的流程。但是事件流的顺序有两种，而且是完全不同的两种。

事件冒泡流

事件冒泡流是微软（IE）公司提出的，事件触发是由最里面的源对象开始，一直向外扩散，这个原对象就是 event.target ，是由里向外的触发，举个🌰：

<div onclick='submit()'>
	<div onclick= 'click()'>
		<p onclick = 'button()'/>
	</div> 
</div>

执行流程：button --> click --> submit（其实这也是人的常识认知）就像气泡冒泡一样，从水底冒泡到水面

事件捕获流

事件捕获流是网景（Netscape）公司提出的，这是第二种，事件捕获，就和第一种截然相反，是从外到里进行一一捕获。

执行流程：submit --> click --> button

事件流

DOM的事件流一般分为三个阶段：事件捕获阶段、目标阶段、事件冒泡阶段。

1、事件捕获：网页的根节点DOM，然后从跟节点一层层像里面去捕获目标，一直倒发生事件的标签上。dom —> div

2、目标阶段：事件处于 div 标签上，也是事件处理阶段。

3、事件冒泡：捕获到事件后，再将事件绑定到 DOM 树上，返回到根节点上。

事件委托

事件委托的意思是，不会在事件源上放置事件监听，而是把监听放置在父级标签上，举个🌰：

当我们有一连串的标签，他们都需要绑定同一个函数（假设是点击显示文字内容）

如果把每个标签都绑定事件，那么新增标签，还需要继续绑定，就十分麻烦。所以事件就会被委托给他们的父级标签。

var father = document.getElementById('theFather');

father.addEventlistener('click', showText,false);   // 获取父级标签，绑定事件监听器，一旦监听到有点击动作，就会响应函数showText

function showText(){
	console.log(event.target.innerHTML);  
}

事件委托其实依赖的是事件的冒泡，真实的event.target会在冒泡过程中被父级标签监听到。

addEventListener

为标签绑定事件监听器，addEventListener一共有三个参数：

addEventListener（event，function， useCapture）;

event ：触发的动作；function：动作会执行的函数操作；useCapture：true，捕获期间执行；false，冒泡期间执行。

<div id="btn3">
	btn3
	<div id="btn2">
    	btn2
    	<div id="btn1">
        	btn1
    	</div>
    </div>
</div>
<script>
btn1.addEventListener('click',function(){
	console.log('btn1捕获')
}, true)
btn1.addEventListener('click',function(){
	console.log('btn1冒泡')
}, false)
btn2.addEventListener('click',function(){
	console.log('btn2捕获')
}, true)
	btn2.addEventListener('click',function(){
console.log('btn2冒泡')
}, false)
btn3.addEventListener('click',function(){
	console.log('btn3捕获')
}, true)
btn3.addEventListener('click',function(){
	console.log('btn3冒泡')
}, false)
</script>

btn3捕获 – btn2捕获 – btn1捕获 – btn1冒泡 – btn2冒泡 – btn3冒泡

注意：因为最底层的btn1同时绑定了冒泡和捕获，执行的顺序完全按照绑定的先后进行。