JavaScript学习笔记——JavaScript与网页交互：DOM文档对象模型

最新推荐文章于 2023-06-04 11:25:29 发布

Insomnia_X

最新推荐文章于 2023-06-04 11:25:29 发布

阅读量885

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/Insomnia_X/article/details/118658284

版权

JavaScript学习笔记专栏收录该内容

41 篇文章 2 订阅

订阅专栏

本文详细介绍了JavaScript如何通过文档对象模型DOM与HTML网页交互，包括DOM的工作原理、元素操作（如修改内容、选择元素）以及事件处理程序的使用。重点讲解了如何确保代码在网页加载完毕后执行，以及关键方法如getElementById、setAttribute等的使用示例。

摘要由CSDN通过智能技术生成

Web页面(Web Page)（也称为文档Document）
网页是一个动态的数据结构，可以通过JavaScript与之交互：访问并读取网页中的元素内容；修改网页的内容或结构等

使用文档对象模型DOM（Document Object Model），能够与代码所属的网页交互，从而能够编写出动态的网页

JavaScript与网页的交互——文档对象模型DOM

JavaScript与HTML是不同的事物：JavaScript是代码，HTML是标记
它们如何交互？——通过网页的表示，即文档对象模型DOM实现

在浏览器内部，使用文档对象模型DOM来表示网页

浏览器在加载并分析HTML时，还会创建DOM，并将一系列表示标记的对象存储在DOM中。
JavaScript可与DOM交互，修改其中的元素对象
JavaScript修改DOM时，浏览器动态地更新网页，从而用户看到动态变化的网页
文档对象模型DOM是一颗树：
根部为document对象
其余部分为HTML标记中的各个元素对象

在HTML中，网页由元素组成（<div>、<h1>、<h2>、<p>等）
可以使用id唯一标识一个元素；使用类(class)标识一组元素
在JavaScript和CSS中，可以根据id或类选择特定的元素，并对其进行操作

确保网页(和DOM)加载完毕后再运行代码

使用JavaScript处理DOM时，确保在网页完全加载后再运行JavaScript代码（这意味这DOM一定已经被创建）

解决方案一：将`<script>`元素放在`<body>`末尾

不要将包含JavaScript代码的<script>元素放在网页的<head>元素中！
务必将<script>元素放在<body>元素的末尾，以确保在网页完全加载后（这意味这DOM一定已经被创建），再修改DOM

解决方案二：事件处理程序（回调函数）（详见文末）

window是JavaScript内置对象，表示浏览器窗口
window.onload()方法，用于指定[仅在网页加载完毕后才会运行]的代码
网页加载完毕后，将立即自动调用window对象的onload属性指向的事件处理程序

利用这一特性，将需要等待网页加载完毕后才执行的代码封装到一个函数(事件处理程序)中，并将这个函数(事件处理程序)赋给对象window的属性onload

<script>
function init(){
	//init函数中包含所有[需要在网页加载完毕后才执行]的代码
	//与处理DOM有关的代码，都需要在网页加载完毕后才执行
	var mood = document.getElementById("boy");
	mood.innerHTML = "I am happpy!";
}
window.onload = init;//将init函数赋值给属性window.onload
</script>

document对象

在JavaScript代码中，使用document对象来访问DOM
document对象包含用来访问和修改DOM的属性和方法

`document.getElementById`方法:根据id选择元素

传入某个元素的id（一个字符串），返回网页中相应的那个元素对象
当传入的id不存在，返回null

`document.getElementsByClassName`方法:根据类选择元素

传入类名，返回属于这个类的元素集合

`document.getElementsByTagName`方法:根据标签名选择元素

传入标签名，返回与这个标签名匹配的元素集合

`document.getElementsByName`方法:根据name选择元素

`document.querySelector`方法:用选择器查找元素

传入一个选择器（类似于CSS选择器），返回匹配的第一个元素
例如var li = document.querySelector("playlist .song");查找id为playlist的元素，再在其中查找第一个class特性为song的元素

`document.querySelectorAll`方法:用选择器查找元素

传入一个选择器，以Nodelist返回匹配的所有元素

注意，后面两个名称中带Elements(而非Element)的方法，可能返回多个元素
具体是返回NodeList对象，访问元素的方法类似数组，但添加和删除元素时NodeList与数组则完全不同

NodeList对象是一个Node集合，而Node就是DOM树中的element对象

元素对象

这里所说的“元素内容”、“元素特性”，都是对于HTML的各种标签元素(div、h等)而言的
在JavaScript中，我们统一化地处理：将HTML元素(通过DOM）化为对象，称为元素对象

牢记：元素对象本质是一个对象
i.e.元素对象包含一些属性和方法，可以使用它们来读取和修改元素的内容

因此，后文的id“元素特性”、innerHTML“元素内容”、 getAttribute方法…等等关于元素的一切，它们本质上都是元素对象的属性，并非高深莫测的东西，不要被迷惑！

因此，用getAttribute方法“获取元素的id特性的值”，等价于访问(元素)对象的id属性
i.e. elem.getAttribute("id")等效于elem.id（有细微差别，见后文getAttribute）

注意：每当获取值时，先确认获得了期望的值

getElementById、getAttribute当目标不存在时都会返回null
因此，获取元素时，务必检查返回的是否是null

设置元素内容：innerHTML属性

innerHTML包含元素的文本内容和全部嵌套的HTML元素
i.e. innerHTML表示元素内部的HTML（如<p>元素可能包含文本和<img>元素）
修改元素对象的innerHTML属性的值，可修改元素的内容
通过修改innerHTML来修改元素时，所做的修改将立即在网页中反映出来

   var mood = document.getElementById("boy");//获取元素对象
   mood.innerHTML = "I am happpy!";//修改元素对象的innerHTML属性

innerHTML直接照搬从该元素起始标签<p>到终止位置</p>的全部内容(包含html标签和换行符、制表符)
另有innerText方法，提取从元素起始标签终止位置的全部文本内容

获得元素特性：getAttribute方法/句点表示法

Object.getAttribute(要获取的特性的名称)
getAttribute方法用于获取元素的特性值
元素对象的特性也是属性，即elem.getAttribute(“id”)等效于elem.id

当传入的特性不存在， getAttribute返回null
当传入的属性名不存在，elem.属性名返回undefined

设置元素特性：setAttribute方法

setAttribute方法用于设置元素的特性值
Object.setAttribute(要修改的特性的名称,要设置的特性值)

当传入特性不存在，将自动在元素中创建它

(1)设置元素特性Elem.setAttribute("id","1")
(2)设置对象属性Elem.id="1"
这两种方式有什么区别？
结论：统一用setAttribute()更好
详解：见JavaScript学习笔记——HTML中的元素与JavaScript中的对象，有何区别？

删除元素：removeNode和removeChild方法

要删除的元素.removeNode(true);

removeChild()方法删除父元素下的某个子元素
要删除的元素.parentNode.removeChild(要删除的元素);删除某个元素本身

ps. 删除元素时，将同时删除其所有子元素

添加新元素：createElement、appendChild方法

已有的父元素.removeNode(要添加的子元素);

var newItem=document.createElement("li");
newItem.innerHTML="Something New";//新建一个<li>元素，内容为字符串

var ul=document.getElementById("playlist");
ul.appenChild(newItem);//新元素作为子节点加入

获取某个元素的子元素、兄弟元素、父元素等

childNodes属性返回节点的子节点集合（NodeList对象）
children属性返回节点的子节点集合（数组）
还有firstChild、firstElementChild、lastChild等

注意，childNodes、firstChild、lastChild等返回的结果中包含了很多意想不到的东西，最好通过nodeType将返回集合过滤一遍再进行使用

元素.parentNode.children[]数组含有所有兄弟节点
previousSibling、previousElementSibling获取上一个兄弟节点
nextSibling、nextElementSibling获取下一个兄弟节点

parentNode、parentElement获取父节点
offsetParent获取所有父节点

事件处理程序（回调函数）

在JavaScript中，在某事件(如网页加载完毕)发生后，能够“感应”到事件发生的对象能够在第一时间通知程序员

这种通知的具体实现方式：了解事件的对象提供一个函数，事件发生后，这个对象将通过调用这个函数来通知我们，而我们可以自定义这个函数

这就是回调函数(callback)，也称事件处理程序(event handler)
由此我们可以处理很多不同类型的事件

例如
可使用window对象的onload属性给加载事件指定事件处理程序(回调函数)
网页加载完毕后，将立即调用window对象的onload属性指向的事件处理程序

验证一下所学知识

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Just a Generic Page</title>
</head>
<body>
	<h1>Just a generic heading</h1>
	<p id="msg">//id为"msg"的元素
		I'm just an obligatory paragraph.
	</p>
	
	<script>
	function init(){//处理DOM有关的代码，用事件处理程序确保在网页加载后运行
		var elem=document.getElementById("msg");
		
		//验证：元素对象的特性也是属性，即elem.getAttribute("id")等效于elem.id
		var attr1=elem.getAttribute("id");
		console.log(attr1);//输出"msg"
		var attr2=elem.id;
		console.log(attr2);//输出"msg"
		var attr3=elem[id];
		console.log(attr3);//报错，应该写为var attr3=elem["id"];
		
		//未解决的问题
		//attr1.test=false;
		//console.log(attr1.test);
		//为什么显示undefined?
				
		//显示元素对象的所有属性
		for (var prop in elem){
			console.log(prop+": "+elem[prop]);
		}
		//部分输出：
		//id: msg
		//
		//innerHTML: 
		//		I'm just an obligatory paragraph.
		//	
		//outerHTML: <p id="msg">
		//		I'm just an obligatory paragraph.
		//	</p>
		//innerText: I'm just an obligatory paragraph.
		//outerText: I'm just an obligatory paragraph.
	};
	window.onload=init;//网页加载完后执行事件处理程序init
	
	function wakeUpUser() {//与DOM无关的代码，不必放入事件处理程序
		alert("Are you going to stare at this boring page forever?");
	}
	setTimeout(wakeUpUser, 5000);
	</script>
</body>
</html>