DOM 基础

曲泽慧

2020-07-21

blog

DOM 简介
DOM document.get 方法
document.querySelector 方法
选择后对 style 进行修改
利用变量(var)快速访问
DOM classList 的使用
DOM 的 toggle 方法
利用 DOM 添加事件
利用 DOM 修改文本
利用 DOM 修改属性
更多内容

HTML — Structure
CSS — Style
JS — Function

DOM 简介

Document Object Model 文本对象模型

对于一段 HTML 代码：

<html>
	<head>
		<title>This is a page title</title>
	</head>
	<body>
		<h1>This is a heading</h1>
		<p>This is a paragraph</p>
		<p>This is a paragraph</p>
	</body>
</html>

可以利用 Chrome 插件，HTML Tree Generator 来看网页 HTML 结构

在浏览器 Console 中输入 document，会返回完整的 HTML 代码。

DOM 有两种常用选择器，即 document.get 以及 querySelector 方法。querySelector 往往更加高效以及准确。

DOM `document.get` 方法

对于以下 HTML 代码，

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<h1 id = "title">Hello</h1>

	<button>Click me</button>

	<ul>
		<li class = 'list'>Fisrt</li>
		<li class = 'list'>Second</li>
		<li class = 'list'>Third</li>
	</ul>
</body>

</html>

<!--通过 Tag 标签来获得对象-->
document.getElementsByTagName("body");

<!--对于 li，可以访问 length 属性，或者对应位置的值-->
document.getElementsByTagName("li").length;
document.getElementsByTagName("li")[1];

<!--通过 document.get 访问类对象，返回 li 中所有的值-->
document.getElementsByClassName("list");
// 返回 HTMLCollection(3) [li.list, li.list, li.list]

<!--通过 document.get 访问 id-->
document.getElementsById("title");
// 返回 <h1 id="title">Hello</h1>

`document.querySelector` 方法

对于以下 HTML 代码，

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<h1 id = "title">Hello</h1>

	<button>Click me</button>

	<ul id = "sp=list">
		<li class = 'list'>Fisrt</li>
		<li class = 'list'>Second</li>
		<li>Third</li>    <!--注意这里取消了对于 Third 的 list class-->
	</ul>
</body>

</html>

<!--通过 querySelector 选择-->
document.querySelector("li");
// 只会返回一个 list class 的 li 标签对象
// 即 <list class = "list">First</li>
// 因为 querySelector 只会遍历代码找到第一个 li 并返回

<!--通过 querySelectorAll 来选择全部标签对象-->
document.querySelectorAll("li");
// 返回全部
// 即 NodeList(3) [li.list, li.list, li]

<!--querySelector 可以以"外标签 内标签"的方式更加精准对标签进行定位-->
document.querySelector("ul li");
// 返回 ul 中的第一个 li
// 即 <li class="list">First</li>

<!--利用 querySelector 选取 id 对应的 li-->
document.querySelectorAll("#sp-list li");
// 返回 Node(3) [li.list, li.list, li]

<!--利用 querySelector 选取 id 对应的 li 下，进一步的 list 类-->
document.querySelectorAll("#sp=list li.list");
// 返回 Nodelist(2) [li.list, li.list]

选择后对 `style` 进行修改

我们可以利用选择器来对 HTML 进行修改。对于下面一段代码：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<h1 id = "title">Hello</h1>

	<button>Click me</button>

	<ul>
		<li class = 'list'>Fisrt</li>
		<li class = 'list'>Second</li>
		<li class = 'list'>Third</li>
	</ul>
</body>

</html>

<!--利用 querySelector 对标题颜色进行修改 -->
document.querySelector("h1").style.color = "red"

<!--利用 querySelector 对标题背景进行修改-->
document.querySelector("h1").style.backgroundColor = "black"

实际上，可以利用 JS 修改所有 CSS Object，但属性名称不同，如在 CSS 中 background-color 在 JS 中使用驼峰书（Camel Case）写方法，即 backgroundColor

更多的可以在 w3shool.com 找到所有的 HTML DOM Style Object

利用变量(`var`)快速访问

我们可以利用新建变量的方法来快速访问某一个对象。如下代码:

var title = document.querySelector("h1")

<!--这样就看可以快速访问并修改了-->
title.sytle.backgroundColor = "white";

DOM `classList` 的使用

对于以下 HTML 代码:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<h1 class = "title">Hello</h1>

	<button>Click me</button>

	<ul>
		<li class = 'list'>Fisrt</li>
		<li class = 'list'>Second</li>
		<li class = 'list'>Third</li>
	</ul>
</body>

</html>

使用 classList 可以返回对应元素的信息，

document.querySelector("h1").classList;
// 返回
// DOMTokenList ["title", value: "title"]
//	0: "title"
//	length: 1
//	value: "title"
//	__proto__: DOMTokenList

document.querySelector("li").classList;
// 返回
// DOMTokenList ["list", value: "list"]
//	0: "list"
//	length: 1
//	value: "list"
//	__proto__: DOMTokenList

加入我们在 CSS 中添加了一个新的 title 类及对应的属性

.title {
	color: red;
}

可以利用 classList 的 add 方法，来为选择的对象元素，添加 CSS 中定义的类属性：

document.querySelector("h1").classList.add("title");

<!--也可以进行移除-->
document.querySelector("h1").classList.remove("title");

DOM 的 `toggle` 方法

使用 toggle 方法可以切换是否添加某一类属性，

document.querySelector("h1").classList.toggle("title");
// 返回
// true

document.querySelector("h1").classList.toggle("title");
// 返回
// false

利用 DOM 添加事件

加时间监听器 .addEventListner("事件", "当事件执行时发生什么内容")

document.querySelector("Button").addEventListner("click", function() {
	document.querySelector("h1").classList.toggle("title");
});
// 可以实现点击按钮时，切换 h1 颜色

利用 DOM 修改文本

利用 innerHTML 来修改

<!--修改文本-->
document.querySelector("h1").innerHTML = "Goodbye";

<!--加斜体-->
document.querySelector("h1").innerHTML = "<em>Goodbye<em>";

<!--返回文字内容，注意不会返回格式，只会返回文本-->
document.querySelector("h1").textContent;

利用 DOM 修改属性

document.querySelector("li").attributes;
// 返回
// 属性，包括 class，class 的值等等

document.querySelector("ul").attributes;
// 返回
// id, class 及对应的值

<!--获得属性-->
document.querySelector("ul").getattributes;
// 获得"list"

<!--对属性进行修改-->
document.querySelector("li").attributes.class.value = "title";

<!--更简单的方法, setAttribute-->
document.querySelector("h1").setAttribute("class", "title");

DOM 简介

DOM document.get 方法

document.querySelector 方法

选择后对 style 进行修改

利用变量(var)快速访问

DOM classList 的使用

DOM 的 toggle 方法