JavaScript基础之DOM

原创已于 2022-04-15 22:10:04 修改 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2022-04-15 19:19:52 首次发布

笔记同时被 2 个专栏收录

24 篇文章

订阅专栏

前端基础

24 篇文章

订阅专栏

这篇博客详细介绍了DOM（文档对象模型）的概念及其在JavaScript中的应用，包括如何通过DOM来操作HTML元素，如获取、创建、修改元素节点。此外，文章还探讨了事件处理，如事件监听、事件冒泡和事件委托，以及各种事件的处理方法，如鼠标事件、键盘事件和滚轮事件。最后，讨论了如何处理文档加载、元素样式和属性的读写，以及浏览器兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM

DOM，Document Object Model 文档对象模型

JS中通过DOM来对HTML文档进行操作。只要理解了DOM皆可以随心所欲的操作WEB页面

文档。文档指的是网页，一个网页就是一个文档
对象。对象指将网页中的每一个节点都转换为对象
模型。模型用来表示节点和节点之间的关系，方便操作页面

节点（Node）

节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点

虽然都是节点，但是节点的类型却是不同的

常用的节点：

文档节点（Document），代表整个网页
元素节点（Element），代表网页中的标签
属性节点（Attribute），代表元素的属性
文本节点（Text），代表网页中的文本内容

DOM操作

在网页中浏览器已经为我们提供了document对象，它代表的是整个网页，它是window对象的属性，可以在页面中直接使用。

document查询方法：

根据元素的id属性查询一个元素节点对象：document.getElementById(“id属性值”)；
根据元素的name属性值查询一组元素节点对象：document.getElementsByName(“name属性值”)；
根据标签名来查询一组元素节点对象：document.getElementsByTagName(“标签名”)；

<button id="btn">我是一个按钮</button>
<script type="text/javascript">
	/*console.log(document);*/
	var btn = document.getElementById("btn");
	console.log(btn.innerHTML);//"我是一个按钮"
	btn.innerHTML="你好";
	console.log(btn.innerHTML);//"你好"
	console.log(btn);//"[object HTMLButtonElement]"
</script>

事件（Event）

事件指的是用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动。。。

绑定事件的方式：

可以在标签的事件属性中设置相应的JS代码。结构和行为耦合，不推荐

<button id="btn" onmousemove="alert('讨厌，你点我干嘛！');">我是一个按钮</button>

可以通过为对象的指定事件属性设置回调函数的形式来处理事件。

<script>
	var btn = document.getElementById("btn");
	//单击响应函数
	btn.onclick = function() {
		alert("点我干嘛！");
	};
</script>

文档的加载

浏览器在加载一个页面时，是按照自上向下的顺序加载的，加载一行执行一行。

如果将js代码编写到页面的上边，当代码执行时，页面中的DOM对象还没有加载，此时将会无法正常获取到DOM对象，导致DOM操作失败。

解决方式一：可以将js代码编写到body的下边

<body>
	<button id="btn">按钮</button>

	<script>
		var btn = document.getElementById("btn");
		btn.onclick = function() {
			alert("哈哈");
		};
	</script>
</body>

解决方式二：将js代码编写到window.onload = function(){}中

window.onload对应的回调函数会在整个页面加载完毕以后才执行，所以可以确保代码执行时，所有的DOM对象已经加载完毕了

<script>  
    window.onload = function(){  
        var btn = document.getElementById("btn");  
        btn.onclick = function(){  
        };
    };
</script>

DOM查询

获取元素节点（通过document对象调用）：

getElementById() 通过id属性获取一个元素节点对象
getElementByTagName() 通过标签名获取一组元素节点对象
getElementByName() 通过name属性获取一组元素节点对象

子节点包括便签元素中的文本，子元素自包含标签元素

获取元素节点的子节点（通过具体的元素节点调用）：

getElementsByTagName() 方法，返回当前节点的指定标签名后代节点
元素.childNodes 获取当前元素的所有子节点，会获取到空白的文本子节点【在IE8及以下的浏览器中，不会将空白当成子节点】
元素.children 获取当前元素的所有子元素
元素.firstChild 获取当前元素的第一个子节点，会获取到空白的文本子节点
元素.firstElementChild 获取当前元素的第一个子元素
元素.lastChild 获取当前节点的最后一个子节点

获取父节点和兄弟节点（通过具体的节点调用）：

元素.parentNode 获取当前元素的父元素
元素.previousSibling 获取当前节点的前一个兄弟节点，也可能获取到空白的文本子节点
previousElementSibling 获取前一个兄弟元素【IE8及以下不支持】
元素.nextSibling 获取当前节点的后一个兄弟节点

innerHTML和innerText

这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性。两个属性作用类似，都可以获取到标签内部的内容，不同是innerHTML会获取到html标签，而innerText会自动去除标签。如果使用这两个属性来设置标签内部的内容时，没有任何区别的

元素节点的属性：

获取 元素对象.属性名
设置 元素对象.属性名 = 新的值

其他属性：

nodeValu：文本节点可以通过nodeValue属性获取和设置文本节点的内容
innerHTML：元素节点通过该属性获取和设置标签内部的html代码

document对象的其他的属性和方法

document.body 获取页面中的body元素
document.documentElement 获取页面中html根元素
document.all 获取页面中的所有元素，相当于document.getElementsByTagName("*");
document.getElementsByClassName() 根据元素的class属性值查询一组元素节点对象【这个方法不支持IE8及以下的浏览器】
document.querySelector() 根据CSS选择器去页面中查询一个元素，如果匹配到的元素有多个，则它会返回查询到的第一个元素
document.querySelectorAll() 根据CSS选择器去页面中查询一组元素，会将匹配到所有元素封装到一个数组中返回，即使只匹配到一个

DOM修改

document.createElement() 用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回
document.createTextNode() 可以根据文本内容创建一个文本节点对象
appendChild 向一个父节点中添加一个新的子节点。用法：父.appendChild(子节点)
insertBefore 将一个新的节点插入到旧节点的前边。用法：父节点.insertBefore(新节点,旧节点)
replaceChild 使用一个新的节点去替换旧节点。用法：父节点.replaceChild(新节点,旧节点)
removeChild 删除指定的子节点。用法：父节点.removeChild(子节点)。推荐方式：子节点.parentNode.removeChild(子节点)
以上方法，实际就是改变了相应元素（标签）的innerHTML的值。

myClick("btn07",function(){  
    //向city中添加广州  
    var city = document.getElementById("city");  
  
    /*  
	* 使用innerHTML也可以完成DOM的增删改的相关操作  
	* 一般我们会两种方式结合使用  
	*/  
    //city.innerHTML += "<li>广州</li>";  
  
    //创建一个li  
    var li = document.createElement("li");  
    //向li中设置文本  
    li.innerHTML = "广州";  
    //将li添加到city中  
    city.appendChild(li);  
  
});

confirm()用于弹出一个带有确认和取消按钮的提示框，需要一个字符串作为参数，该字符串将会作为提示文字显示出来。

for循环会在页面加载完成之后立即执行，而响应函数会在超链接被点击时才执行，当响应函数执行时，for循环早已执行完毕

DOM对CSS的操作

读取和修改内联样式

通过JS修改元素的内联样式。

语法：元素.style.样式名 = 样式值

注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法将-去掉，然后将-后的字母改大写。例如：background-color改为backgroundColor

通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示。

通过JS获取元素的内联样式

语法：元素.style.样式名

通过style属性设置和读取的都是内联样式，无法读取样式表中的样式

读取元素的当前样式

获取元素当前显示的样式

语法：元素.currentStyle.样式名。

它可以用来读取当前元素正在显示的样式。如果当前元素没有设置该样式，则获取它的默认值

currentStyle只有IE浏览器支持，其他的浏览器都不支持。

在其他浏览器中可以使用**getComputedStyle()**这个方法来获取元素当前的样式，这个方法是window的方法，可以直接使用。需要两个参数：

第一个：要获取样式的元素
第二个：可以传递一个伪元素，一般都传null

var obj = getComputedStyle(box1,null);
alert(obj.width);

getComputedStyle()方法会返回一个对象，对象中封装了当前元素对应的样式。但是该方法不支持IE8及以下的浏览器

可以通过对象.样式名来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值。比如：没有设置width，它不会获取到auto，而是一个长度

通过currentStyle和getComputedStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性

//正常浏览器的方式                                                            
alert(getComputedStyle(box1,null).backgroundColor);        
//IE8的方式                                                              
alert(box1.currentStyle.backgroundColor);

实现兼容性

/*  
* 定义一个函数，用来获取指定元素的当前的样式  
* 参数：  
* 		obj 要获取样式的元素  
* 		name 要获取的样式名  
*/  
function getStyle(obj , name){  
//对象.属性不存在，不会报错，如果直接寻找对象，（当前作用域到全局作用域）找不到会报错  
    if(window.getComputedStyle){  
        //正常浏览器的方式，具有getComputedStyle()方法【IE8及以下没有】
        return getComputedStyle(obj , null)[name];  
    }else{  
        //IE8的方式，没有getComputedStyle()方法  
        return obj.currentStyle[name];  
    }  
    //return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];			  
}

其他的样式相关的属性

注意：以下样式都是只读的,未指明偏移量都是相对于当前窗口左上角

属性/方法	描述
clientHeight	返回元素的可见高度(不带px)，包括元素的内容区和内边距的高度
clientWidth	返回元素的可见宽度(不带px)，包括元素的内容区和内边距的宽度
offsetHeight	获取整个元素的高度，包括内容区、内边距、边框
offfsetWidth	获取整个元素的宽度，包括内容区、内边距、边框
offsetParent	当前元素的定位父元素，获取离它最近的开启了定位的祖先元素如果所有的祖先元素都没有开启定位，则返回body
offsetLeft/offsetTop	当前元素相对于其定位父元素的水平/垂直偏移量
scrollHeight/scrollWidth	获取元素整个滚动区域的高度/宽度
scrollTop/scrollLeft	获取元素垂直/水平滚动条滚动的距离，判断滚动条是否滚动到底

当满足scrollHeight - scrollTop == clientHeight，说明垂直滚动条滚动到底了

当满足scrollWidth - scrollLeft == clientWidth，说明水平滚动条滚动到底了

事件（Event）

事件对象

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标、键盘哪个按键被按下、鼠标滚轮滚动的方向。。。

可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存

例子：

//解决事件对象的兼容性问题
元素.事件 = function(event){  
    event = event || window.event;  
};  
  
元素.事件 = function(e){  
	e = e || event;  
	  
};

获取到鼠标的坐标

onmousemove 该事件将会在鼠标在元素中移动时被触发

clientX和clientY 用于获取鼠标在当前的可见窗口的坐标

div的偏移量，是相对于整个页面的

pageX和pageY 可以获取鼠标相对于当前页面的坐标

但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用

var left = event.clientX;

var top = event.clientY;

事件的冒泡（Bubble）

事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，其祖先元素上的相同事件也会触发。

事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消

可以将事件对象的cancelBubble设置为true，即可取消冒泡。

例如：

元素.事件 = function(event){  
    event = event || window.event;  
    event.cancelBubble = true;  
};

事件的委派

我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的

我们可以尝试将其绑定给元素的共同的祖先元素

指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素。从而通过祖先元素的响应函数来处理事件。

事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能。

target ： event中的target表示的触发事件的对象

事件的绑定

使用对象.事件 = 函数的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的

addEventListener()

通过这个方法也可以为元素绑定响应函数。参数：

事件的字符串，不要on
回调函数，当事件触发时该函数会被调用
是否在捕获阶段触发事件，需要一个布尔值，一般都传false

使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，

这样当事件被触发时，响应函数将会按照函数的绑定顺序执行

这个方法不支持IE8及以下的浏览器

btn01.addEventListener("click",function(){  
	alert(1);  
},false);  
  
btn01.addEventListener("click",function(){  
	alert(2);  
},false);

attachEvent()

在IE8中可以使用attachEvent()来绑定事件。参数：

事件的字符串，要on
回调函数

这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反

btn01.attachEvent("onclick",function(){  
alert(1);  
});  
  
btn01.attachEvent("onclick",function(){  
alert(2);  
});

//定义一个函数，用来为指定元素绑定响应函数  
/*  
			 * addEventListener()中的this，是绑定事件的对象  
			 * attachEvent()中的this，是window  
			 *  需要统一两个方法this  
			 */  
/*  
			 * 参数：  
			 * 	obj 要绑定事件的对象  
			 * 	eventStr 事件的字符串(不要on)  
			 *  callback 回调函数  
			 */  
function bind(obj , eventStr , callback){  
    if(obj.addEventListener){  
        //大部分浏览器兼容的方式  
        obj.addEventListener(eventStr , callback , false);  
    }else{  
        /*  
					 * this是谁由调用方式决定  
					 * callback.call(obj)  
					 */  
        //IE8及以下  
        obj.attachEvent("on"+eventStr , function(){  
            //在匿名函数中调用回调函数  
            callback.call(obj);  
        });  
    }  
}

事件的传播

关于事件的传播网景公司和微软公司有不同的理解：

微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播的，也就是当事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素

W3C综合了两个公司的方案，将事件传播分成了三个阶段：

捕获阶段。在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件【IE8及以下的浏览器中没有捕获阶段】
目标阶段。事件捕获到目标元素，捕获结束开始在目标元素上触发事件
冒泡阶段。事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true。一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false。

常用事件

鼠标事件

拖拽事件

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1 {
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			#box2 {
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left: 200px;
				top: 200px;
			}
		</style>

		<script type="text/javascript">
			window.onload = function() {
				/*  
				 * 拖拽box1元素  
				 *  - 拖拽的流程
				 * 		1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown  
				 * 		2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove  
				 * 		3.当鼠标松开时，被拖拽元素固定在当前位置	onmouseup  
				 */

				//获取box1  
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var img1 = document.getElementById("img1");

				//开启box1的拖拽  
				drag(box1);
				//开启box2的  
				drag(box2);

				drag(img1);

			};

			/*  
			 * 提取一个专门用来设置拖拽的函数  
			 * 参数：开启拖拽的元素  
			 */
			function drag(obj) {
				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown  
				obj.onmousedown = function(event) {

					//设置box1捕获所有鼠标按下的事件  
					/*  
					 * setCapture()  
					 * 	- 只有IE支持，但是在火狐中调用时不会报错，  
					 * 		而如果使用chrome调用，会报错  
					 */
					/*if(box1.setCapture){  
						box1.setCapture();  
					}*/
					obj.setCapture && obj.setCapture();

					event = event || window.event;
					//div的偏移量 鼠标.clentX - 元素.offsetLeft  
					//div的偏移量 鼠标.clentY - 元素.offsetTop  
					var ol = event.clientX - obj.offsetLeft;
					var ot = event.clientY - obj.offsetTop;

					//为document绑定一个onmousemove事件  
					document.onmousemove = function(event) {
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove  
						//获取鼠标的坐标  
						var left = event.clientX - ol;
						var top = event.clientY - ot;

						//修改box1的位置  
						obj.style.left = left + "px";
						obj.style.top = top + "px";

					};

					//为document绑定一个鼠标松开事件  
					document.onmouseup = function() {
						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup  
						//取消document的onmousemove事件  
						document.onmousemove = null;
						//取消document的onmouseup事件  
						document.onmouseup = null;
						//当鼠标松开时，取消对事件的捕获  
						obj.releaseCapture && obj.releaseCapture();
					};

					/*  
					 * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，  
					 * 	此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，  
					 * 	如果不希望发生这个行为，则可以通过return false来取消默认行为  
					 *   
					 * 但是这招对IE8不起作用  
					 */
					return false;
				};
			}
		</script>
	</head>

	<body>
		我是一段文字
		<div id="box1"></div>
		<div id="box2"></div>
		<img src="img/an.jpg" id="img1" style="position: absolute;" />
	</body>
</html>

滚轮事件

onwheel都支持

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1 {
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {

				//获取id为box1的div  
				var box1 = document.getElementById("box1");

				//为box1绑定一个鼠标滚轮滚动的事件  
				/*  
				 * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，  
				 * 	但是火狐不支持该属性  
				 *   
				 * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件  
				 * 	注意该事件需要通过addEventListener()函数来绑定  
				 */

				box1.onmousewheel = function(event) {

					event = event || window.event;

					//event.wheelDelta 可以获取鼠标滚轮滚动的方向  
					//向上滚 120   向下滚 -120  
					//wheelDelta这个值我们不看大小，只看正负  

					//alert(event.wheelDelta);  

					//wheelDelta这个属性火狐中不支持  
					//在火狐中使用event.detail来获取滚动的方向  
					//向上滚 -3  向下滚 3  
					//alert(event.detail);  

					/*  
					 * 当鼠标滚轮向下滚动时，box1变长  
					 * 	当滚轮向上滚动时，box1变短  
					 */
					//判断鼠标滚轮滚动的方向  
					if(event.wheelDelta > 0 || event.detail < 0) {
						//向上滚，box1变短  
						box1.style.height = box1.clientHeight - 10 + "px";

					} else {
						//向下滚，box1变长  
						box1.style.height = box1.clientHeight + 10 + "px";
					}

					/*  
					 * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false  
					 * 需要使用event来取消默认行为event.preventDefault();  
					 * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错  
					 */
					event.preventDefault && event.preventDefault();

					/*  
					 * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，  
					 * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为  
					 */
					return false;

				};

				//为火狐绑定滚轮事件  
				bind(box1, "DOMMouseScroll", box1.onmousewheel);

			};

			function bind(obj, eventStr, callback) {
				if(obj.addEventListener) {
					//大部分浏览器兼容的方式  
					obj.addEventListener(eventStr, callback, false);
				} else {
					/*  
					 * this是谁由调用方式决定  
					 * callback.call(obj)  
					 */
					//IE8及以下  
					obj.attachEvent("on" + eventStr, function() {
						//在匿名函数中调用回调函数  
						callback.call(obj);
					});
				}
			}
		</script>
	</head>

	<body style="height: 2000px;">

		<div id="box1"></div>

	</body>

</html>

键盘事件

onkeydown

表示按键被按下。对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发。当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快，这种设计是为了防止误操作的发生。

onkeyup

表示按键被松开

键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document

keyCode

可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下。

除了keyCode，事件对象中还提供了几个属性：altKey、ctrlKey、shiftKey。这个三个用来判断alt ctrl 和 shift是否被按下

如果按下则返回true，否则返回false

//console.log(event.keyCode);  
  
//判断一个y是否被按下  
//判断y和ctrl是否同时被按下  
if(event.keyCode === 89 && event.ctrlKey){
	console.log("ctrl和y都被按下了");
}

input.onkeydown = function(event) {  
    event = event || window.event;  
    //数字 48 - 57
    //使文本框中不能输入数字  
    if(event.keyCode >= 48 && event.keyCode <= 57) {  
        //在文本框中输入内容，属于onkeydown的默认行为  
        //如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中  
        return false;  
    }  
};