使用 Document 对象
1、使用 Document 元数据
Document 对象的用途之一是向你提供关于文档的信息，下表介绍了用来获取文档元数据的属性。
| 属性 | 说明 | 返回 |
|---|---|---|
| characterSet | 返回文档的字符集编码。这是一个只读属性 | 字符串 |
| charset | 获取或设置文档的字符集编码 | 字符串 |
| compatMode | 获取文档的兼容性模式 | 字符串 |
| cookie | 获取或设置当前文档的 cookie | 字符串 |
| defaultCharset | 获取浏览器所使用的默认字符编码 | 字符串 |
| defaultView | 返回当前文档的 Window 对象 | Window |
| dir | 获取或设置当前文档的文本方向 | 字符串 |
| domain | 获取或设置当前文档的域名 | 字符串 |
| implementation | 提供可用 DOM 功能的信息 | DOMImplementation |
| lastModified | 返回文档的最后修改时间 | 字符串 |
| location | 提供当前文档的 URL 信息 | Location |
| readyState | 返回当前文档的状态。这是一个只读属性 | 字符串 |
| referrer | 返回链接到当前文档的文档 URL（就是对应 HTTP 标头的值） | 字符串 |
| title | 获取或设置当前文档的标题 | 字符串 |
1.1、获取文档信息
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
</head>
<body>
<script>
document.writeln("<pre>");
document.writeln("characterSet: " + document.characterSet);
document.writeln("charset: " + document.charset);
document.writeln("compatMode: " + document.compatMode);
document.writeln("defaultCharset: " + document.defaultCharset);
document.writeln("dir: " + document.dir);
document.writeln("domain: " + document.domain);
document.writeln("lastModified: " + document.lastModified);
document.writeln("referrer: " + document.referrer);
document.writeln("title: " + document.title);
document.write("</pre>");
</script>
</body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JkNnaAzd-1625046285574)(素材/文档的基本信息.png)]](https://i-blog.csdnimg.cn/blog_migrate/4e4de44fdf10fddde3c74a78e1f6133c.png)
1.1.1、理解怪异模式
compatMode 属性告诉你浏览器是如何处理文档内容的。compatMode 属性会返回两个值中的一个：
| 值 | 说明 |
|---|---|
| CSS1Compat | 此文档遵循某个有效的 HTML 规范 |
| BackCompat | 此文档含有非标准的功能，已触发怪异模式 |
1.2、使用 Location 对象
doucument.location 属性返回一个 Location 对象，这个对象给你提供了文档的地址信息，也允许你导航到其他文档上。
| 属性 | 说明 | 值 |
|---|---|---|
| protocol | 获取或设置文档 URL 的协议部分 | 字符串 |
| host | 获取或设置文档 URL 的主机和端口部分 | 字符串 |
| href | 获取或设置当前文档的地址 | 字符串 |
| hostname | 获取或设置文档 URL 的主机名部分 | 字符串 |
| port | 获取或设置文档 URL 的端口部分 | 字符串 |
| pathname | 获取或设置文档 URL 的路径部分 | 字符串 |
| search | 获取或设置文档 URL 的查询（问号串）部分 | 字符串 |
| hash | 获取或设置文档 URL 的锚（井号串）部分 | 字符串 |
| assign(<URL>) | 导航到指定 URL 上 | void |
| replace(<URL>) | 清除当前文档并导航到 URL 所指向的那个文档 | void |
| reload() | 重新加载当前文档 | void |
| resolveURL(<URL>) | 将指定的相对 URL 解析成绝对 URL | 字符串 |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
</head>
<body>
<script>
document.writeln("<pre>");
document.writeln("protocol: " + document.location.protocol);
document.writeln("host: " + document.location.host);
document.writeln("hostname: " + document.location.hostname);
document.writeln("port: " + document.location.port);
document.writeln("pathname: " + document.location.pathname);
document.writeln("search: " + document.location.search);
document.writeln("hash: " + document.location.hash);
document.write("</pre>");
</script>
</body>
</html>
假设就 http://titan/listings/example.html?query=apples#apples 这个 URL 所返回的值：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jmWc5FxQ-1625046285575)(素材/用Location对象来获取信息.png)]](https://i-blog.csdnimg.cn/blog_migrate/1a3f04bd16d88ac501ef2f58086489da.png)
1.2.1、使用 Location 对象导航到其他地方
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
</head>
<body>
<p>
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
<button id="pressme">Press Me</button>
<p>
One of the most interesting aspects of fruit is the variety available in
each country. I live near London, in an area which is known for
its apples.
</p>
<img id="banana" src="banana-small.png" alt="small banana"/>
<script>
document.getElementById("pressme").onclick = function() {
document.location.hash = "banana";
}
</script>
</body>
</html>
这个例子包含了一个 button 元素，当它被点击时会给 document.location.hash 属性指派一个新值。我通过一个事件把按钮和点击时执行的 JavaScript 函数关联起来。这就是 onclick 属性的作用。
这一改动会让浏览器导航到某个 id 属性值匹配 hash 值的元素上。
虽然我只是导航到了相同文档的不同位置，但也可以用 Location 对象的属性来导航到其他文档。不过，这种做法通常是用 href 属性来实现，因为你可以设置完整的 URL。也可以使用 Location 对象定义一些方法。
assign 和 replace 方法的区别在于，replace 会把当前文档从浏览器历史中移除，这就意味着如果用户点击了后退按钮，浏览器就会跳过当前文档，就像它从未访问过该文档一样。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
</head>
<body>
<button id="pressme">Press Me</button>
<script>
document.getElementById("pressme").onclick = function() {
document.location.assign("http://apress.com");
}
</script>
</body>
</html>
1.3、读取和写入 cookie
cookie 属性让你可以读取、添加和更新文档所关联的 cookie。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
</head>
<body>
<p id="cookiedata">
</p>
<button id="write">Add Cookie</button>
<button id="update">Update Cookie</button>
<script>
var cookieCount = 0;
document.getElementById("update").onclick = updateCookie;
document.getElementById("write").onclick = createCookie;
readCookies();
function readCookies() {
document.getElementById("cookiedata").innerHTML = document.cookie;
}
function createCookie() {
cookieCount++;
document.cookie = "Cookie_" + cookieCount + "=Value_" + cookieCount;
readCookies();
}
function updateCookie() {
document.cookie = "Cookie_" + cookieCount + "=Updated_" + cookieCount;
readCookies();
}
</script>
</body>
</html>
cookie 属性的工作方式稍微有点古怪。当你读取该属性的值时，会得到与文档相关联的所有 cookie。cookie 是形式为 name1=value1;name2=value2。
与之相对，当你想要创建新的 cookie 时，要指派一个新的名称/值对作为 cookie 属性的值，它将会被添加到文档的 cookies 集合。一次只能设置一个 cookie。如果设置的值和现有的某个 cookie 具备相同的名称部分，那么就会用值部分更新那个 cookie。
代码清单包含了一段脚本来读取、创建和更新 cookie。readCookies 函数读取 document.cookie 属性的值，并将结果设置为某个段落（p）元素的内容。
这个文档里有两个 button 元素，当 Add Cookie 按钮被点击时，createCookie 函数会给 cookie 属性指派一个新值，这个值会被添加到 cookie 集合中。Update Cookie 按钮会调用 updateCookie 函数。这个函数给某个现有的 cookie 提供一个新值。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6WQfg7qy-1625046285576)(素材/添加和更新cookie.png)]](https://i-blog.csdnimg.cn/blog_migrate/c58bd60c6735aa31a1f50f1e19480673.png)
可以添加到 cookie 的额外字段：
| 额外值 | 说明 |
|---|---|
| path=<path> | 设置 cookie 关联的路径，如果没有指定则默认使用当前文档的路径 |
| domain=<domian> | 设置 cookie 关联的域名，如果没有指定则默认使用当前文档的域名 |
| max-age=<seconds> | 设置 cookie 的有效期，以秒的形式从它创建之时开始计算 |
| expires=<date> | 设置 cookies 的有效期，用的是 GMT 格式的日期 |
| secure | 只有在安全（HTTPS）连接时才会发送 cookies |
这些额外的项目可以被附加到名称/值对的后面，以分号隔开。
1.4、理解就绪状态
document.readyState 属性向你提供了加载和解析 HTML 文档过程中当前处于哪个阶段的信息。此属性会返回三个值：
| 值 | 说明 |
|---|---|
| loading | 浏览器正在加载和处理此文档 |
| interactive | 文档已被解析，但浏览器还在加载其中链接的资源（图像和媒体文件等） |
| complete | 文档已被解析，所有的资源也加载完毕 |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<script>
document.onreadystatechange = function() {
if (document.readyState == "interactive") {
document.getElementById("pressme").onclick = function() {
document.getElementById("results").innerHTML = "Button Pressed";
}
}
}
</script>
</head>
<body>
<button id="pressme">Press Me</button>
<pre id="results"></pre>
</body>
</html>
这段脚本使用文档就绪状态来推迟一个函数的执行，直到文档进入 interactive 阶段。脚本代码要求能够找到在脚本执行时尚未被浏览器载入的文档元素。通过推迟脚本执行直到文档加载完成，我就能确定这些元素的可以找到的。
1.5、获取 DOM 的实现情况
document.implementation 属性向你提供了浏览器对 DOM 功能的实现信息。这个属性返回一个 DOMImplementation 对象，它包含一个你会感兴趣的方法：hasFeature 方法。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
</head>
<body>
<script>
var features = ["Core", "HTML", "CSS", "Selectors-API"];
var levels = ["1.0", "2.0", "3.0"];
document.writeln("<pre>");
for (var i = 0; i < features.length; i++) {
document.writeln("Checking for feature: " + features[i]);
for (var j = 0; j < levels.length; j++) {
document.write(features[i] + " Level " + levels[j] + ": ");
document.writeln(document.implementation.hasFeature(features[i],
levels[j]));
}
}
document.write("</pre>")
</script>
</body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9TXcrXmj-1625046285576)(素材/获取DOM的实现情况.png)]](https://i-blog.csdnimg.cn/blog_migrate/903223530b95d393cebf31fa508c42c2.png)
2、获取 HTML 元素对象
Document 对象的一大关键功能是作为一个入口，让你能够访问代表文档里各个元素的对象。可以用几种不同的方法来执行这个任务。有些属性会返回代表特定文档元素类型的对象，有些方法能让你很方便地运用条件搜索来找到匹配的元素，还可以将 DOM 视为一棵树并沿着它的结构进行导航。
2.1、使用属性获取元素对象
Document 对象为你提供了一组属性，它们会返回代表文档中特定元素或元素类型的对象。
| 属性 | 说明 | 返回 |
|---|---|---|
| activeElement | 返回一个代表当前带有键盘焦点元素的对象 | HTMLElement |
| body | 返回一个代表 body 元素的对象 | HTMLElement |
| Embeds plugins | 返回所有代表 embed 元素的对象 | HTMLCollection |
| forms | 返回所有代表 form 元素的对象 | HTMLCollection |
| head | 返回一个代表 head 元素的对象 | HTMLHeadElement |
| images | 返回所有代表 img 元素的对象 | HTMLCollection |
| links | 返回所有代表文档里具备 href 属性的 a 和 area 元素的对象 | HTMLCollection |
| scripts | 返回所有代表 scripts 元素的对象 | HTMLCollection |
下面代码就演示了访问集合内对象的两种方法：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
pre {border: medium double black;}
</style>
</head>
<body>
<pre id="results"></pre>
<img id="lemon" src="lemon.png" alt="lemon"/>
<p>
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
<img id="apple" src="apple.png" alt="apple"/>
<p>
One of the most interesting aspects of fruit is the variety available in
each country. I live near London, in an area which is known for
its apples.
</p>
<img id="banana" src="banana-small.png" alt="small banana"/>
<script>
var resultsElement = document.getElementById("results");
var elems = document.images;
for (var i = 0; i < elems.length; i++) {
resultsElement.innerHTML += "Image Element: " + elems[i].id + "\n";
}
var srcValue = elems.namedItem("apple").src;
resultsElement.innerHTML += "Src for apple element is: " + srcValue + "\n";
</script>
</body>
</html>
第一种使用 HTMLCollection 对象的方法是将它视为一个数组。它的 length 属性会返回集合里的项目数量，它还支持使用标准的 JavaScript 数组索引标记（element[i] 这种表示方法）来直接访问集合里边的各个对象。
第二种方法是使用 namedItem 方法，它会返回集合里带有指定 id 或 name 属性值（如果有的话）的项目。这就是我在示例中用的第二种方法，我使用了 namedItem 方法来获取代表某个特定 img 元素的对象，该元素的 id 属性值为 apple。
2.2、使用数组标记获取已命名元素
还可以使用数组风格的标记来获取代表某个已命名元素的对象。它指的是带有 id 或 name 属性值的元素。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
pre {border: medium double black;}
</style>
</head>
<body>
<pre id="results"></pre>
<img id="lemon" name="image" src="lemon.png" alt="lemon"/>
<p>
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
<img id="apple" name="image" src="apple.png" alt="apple"/>
<p>
One of the most interesting aspects of fruit is the variety available in
each country. I live near London, in an area which is known for
its apples.
</p>
<img id="banana" src="banana-small.png" alt="small banana"/>
<script>
var resultsElement = document.getElementById("results");
var elems = document["apple"];
if (elems.namedItem) {
for (var i = 0; i < elems.length; i++) {
resultsElement.innerHTML += "Image Element: " + elems[i].id + "\n";
}
} else {
resultsElement.innerHTML += "Src for element is: " + elems.src + "\n";
}
</script>
</body>
</html>
这个代码使用了数组风格的索引标记来获取代表某个 id 值为 apple 元素的对象。用这种方法获取元素的特别之处在于，根据文档内容或元素排列顺序的不同，可能会得到不同种类的结果。
浏览器以深度优先的顺序看待文档里的所有元素，尝试将 id 或 name 属性与指定的值进行匹配。如果第一次匹配到的是一个 id 属性，那么浏览器就会停止搜索（因为 id 值在文档里必须是唯一的）并返回一个代表匹配元素的 HTMLElement 对象。
如果第一次匹配到的是一个 name 属性值，那么你将得到的或者是一个 HTMLElement（如果只有一个匹配的元素），或者是一个 HTMLCollection（如果有不止一个匹配的元素）。浏览器开始匹配 name 值后就不会再匹配 id 值了。
2.3、搜索元素
Document 对象定义了许多方法，它可以用来搜索文档里的元素。
| 属性 | 说明 | 返回 |
|---|---|---|
| getElementById(<id>) | 返回带有指定 id 值的元素 | HTMLElement |
| getElementByClassName(<class>) | 返回带有指定 class 值的元素 | HTMLElement[] |
| getElementByName(<name>) | 返回带有指定 name 值的元素 | HTMLElement[] |
| getElementByTagName(<tag>) | 返回带有指定类型的元素 | HTMLElement[] |
| querySelector(<selector>) | 返回匹配指定 CSS 选择器的第一个元素 | HTMLElement |
| querySelectorAll(<selector>) | 返回匹配指定 CSS 选择器的所有元素 | HTMLElement[] |
这些搜索方法被分为两类，下面代码演示了第一类 getElement 开头的：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
pre {border: medium double black;}
</style>
</head>
<body>
<pre id="results"></pre>
<img id="lemon" class="fruits" name="apple" src="lemon.png" alt="lemon"/>
<p>
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
<img id="apple" class="fruits images" name="apple" src="apple.png" alt="apple"/>
<p>
One of the most interesting aspects of fruit is the variety available in
each country. I live near London, in an area which is known for
its apples.
</p>
<img id="banana" src="banana-small.png" alt="small banana"/>
<script>
var resultsElement = document.getElementById("results");
var pElems = document.getElementsByTagName("p");
resultsElement.innerHTML += "There are " + pElems.length + " p elements\n";
var fruitsElems = document.getElementsByClassName("fruits");
resultsElement.innerHTML += "There are " + fruitsElems.length
+ " elements in the fruits class\n";
var nameElems = document.getElementsByName("apple");
resultsElement.innerHTML += "There are " + nameElems.length
+ " elements with the name 'apple'";
</script>
</body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JqlROM4Y-1625046285577)(素材/使用getElement属性.png)]](https://i-blog.csdnimg.cn/blog_migrate/dc110d8b01cfeac2a787a3593ad91f60.png)
在使用 getElementById 方法时，如果找不到带有指定 id 值的元素，浏览器就会返回 null。与之相对，其他的方法总是会返回一个 HTMLElement 对象数组，但如果找不到匹配，length 属性就会返回 0。
另一种方法：用 CSS 选择器进行搜索
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
pre {border: medium double black;}
</style>
</head>
<body>
<pre id="results"></pre>
<img id="lemon" class="fruits" name="apple" src="lemon.png" alt="lemon"/>
<p>
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
<img id="apple" class="fruits images" name="apple" src="apple.png" alt="apple"/>
<p>
One of the most interesting aspects of fruit is the variety available in
each country. I live near London, in an area which is known for
its apples.
</p>
<img id="banana" src="banana-small.png" alt="small banana"/>
<script>
var resultsElement = document.getElementById("results");
var elems = document.querySelectorAll("p, img#apple")
resultsElement.innerHTML += "The selector matched " + elems.length
+ " elements\n";
</script>
</body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E9SPAXQp-1625046285579)(素材/使用CSS选择器进行搜索.png)]](https://i-blog.csdnimg.cn/blog_migrate/9e7328f3909a87c322ac0d5d9683b95a.png)
2.4、合并进行链式搜索
DOM 的一个实用功能是几乎所有 Document 对象实现的搜索方法同时也能被 HTMLElement 对象实现（一个除外），这让你可以合并进行链式搜索。唯一的例外是 getElementById 方法，只有 Document 对象才能使用它。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
pre {border: medium double black;}
</style>
</head>
<body>
<pre id="results"></pre>
<p id="tblock">
There are lots of different kinds of fruit - there are over 500 varieties
of <span id="banana">banana</span> alone. By the time we add the countless
types of <span id="apple">apples</span>,
<span="orange">oranges</span="orange">, and other well-known fruit, we are
faced with thousands of choices.
</p>
<script>
var resultsElement = document.getElementById("results");
var elems = document.getElementById("tblock").getElementsByTagName("span");
resultsElement.innerHTML += "There are " + elems.length + " span elements\n";
var elems2 = document.getElementById("tblock").querySelectorAll("span");
resultsElement.innerHTML += "There are " + elems2.length
+ " span elements (Mix)\n";
var selElems = document.querySelectorAll("#tblock > span");
resultsElement.innerHTML += "There are " + selElems.length
+ " span elements (CSS)\n";
</script>
</body>
</html>
此例使用了两次链式搜索，这两次都是从 getElementById 方法开始（它会返回之后进行处理的单个对象）。在第一个例子中，我用 getElementsByTagName 方法链接了一个搜索。在第二个例子中，则通过 querySelectorAll 方法使用了一个非常简单的 CSS 选择器。这些例子都返回一个 span 元素的集合，它们都位于 id 为 tblock 的 p 元素之内。
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iwYTlceB-1625046285580)(素材/合并进行链式搜索.png)]](https://i-blog.csdnimg.cn/blog_migrate/9c25b95f36369c5c56ad38faa11be82a.png)
3、在 DOM 树里导航
另一种搜索元素的方法是将 DOM 视为一棵树，然后在它的层级结构里导航。
| 属性 | 说明 | 返回 |
|---|---|---|
| childNodes | 返回子元素组 | HTMLElement[] |
| firstChild | 返回第一个子元素 | HTMLElement |
| hasChildNodes() | 如果当前元素有子元素就返回 true | 布尔值 |
| lastChild | 返回倒数第一个子元素 | HTMLElement |
| nextSibling | 返回定义在当前元素之后的兄弟元素 | HTMLElement |
| parentNode | 返回父元素 | HTMLElement |
| previousSibling | 返回定义在当前元素之前的兄弟元素 | HTMLElement |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
pre {border: medium double black;}
</style>
</head>
<body>
<pre id="results"></pre>
<p id="tblock">
There are lots of different kinds of fruit - there are over 500 varieties
of <span id="banana">banana</span> alone. By the time we add the countless
types of <span id="apple">apples</span>,
<span="orange">oranges</span="orange">, and other well-known fruit, we are
faced with thousands of choices.
</p>
<img id="apple" class="fruits images" name="apple" src="apple.png" alt="apple"/>
<img id="banana" src="banana-small.png" alt="small banana"/>
<p>
One of the most interesting aspects of fruit is the variety available in
each country. I live near London, in an area which is known for
its apples.
</p>
<p>
<button id="parent">Parent</button>
<button id="child">First Child</button>
<button id="prev">Prev Sibling</button>
<button id="next">Next Sibling</button>
</p>
<script>
var resultsElem = document.getElementById("results");
var element = document.body;
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = handleButtonClick;
}
processNewElement(element);
function handleButtonClick(e) {
if (element.style) {
element.style.backgroundColor = "white";
}
if (e.target.id == "parent" && element != document.body) {
element = element.parentNode;
} else if (e.target.id == "child" && element.hasChildNodes()) {
element = element.firstChild;
} else if (e.target.id == "prev" && element.previousSibling) {
element = element.previousSibling;
} else if (e.target.id == "next" && element.nextSibling) {
element = element.nextSibling;
}
processNewElement(element);
if (element.style) {
element.style.backgroundColor = "lightgrey";
}
}
function processNewElement(elem) {
resultsElem.innerHTML = "Element type: " + elem + "\n";
resultsElem.innerHTML += "Element id: " + elem.id + "\n";
resultsElem.innerHTML += "Has child nodes: "
+ elem.hasChildNodes() + "\n";
if (elem.previousSibling) {
resultsElem.innerHTML += ("Prev sibling is: "
+ elem.previousSibling + "\n");
} else {
resultsElem.innerHTML += "No prev sibling\n";
}
if (elem.nextSibling) {
resultsElem.innerHTML += "Next sibling is: "
+ elem.nextSibling + "\n";
} else {
resultsElem.innerHTML += "No next sibling\n";
}
}
</script>
</body>
</html>
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OKmQkRMX-1625046285580)(素材/在DOM树里导航.png)]](https://i-blog.csdnimg.cn/blog_migrate/bb7277eec3910dcaed7f183883a62c42.png)
2140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
