DOM 操作是使用 JavaScript 添加、修改和删除 HTML 元素。
在本章中，我假设您已经在一个文件夹中创建并链接了 HTML、CSS 和 JavaScript 文件，该文件夹将容纳这些文件。
包含上面定义的所有文件的文件夹示例
检查 DOM
了解如何查看代码显示的任何错误或添加到 DOM 的任何元素对我们来说很重要。为了成功实现这一点，我们将在 Chrome 浏览器中使用 DevTools，可以使用Ctrl + Shift + I命令访问它。
对于一个空项目，例如下图，我们使用上面的命令来查看我们在 index.html 中的元素。
查找 HTML 元素
我们的目标是使用 Javascript 访问、操作和附加 HTML 元素。为此，我们必须从 HTML 文件中找到我们需要的元素。为此，我们通常为 HTML 元素提供类或 id 属性，以便更容易找到节点。
执行
<div class="heading">Shopping List</div>
<li id="list_items">Car</li>
寻找节点
JavaScript 定义了几种使用文档对象查找 DOM 节点的方法。
按重要性排序的三种最流行的方法是：
-
getElementByID()
-
getElementsByClassName()
-
getElementsByTagName()
document.getElementById()
这是查找和访问节点的最快方法，它需要 HTML 元素 id，并且由于每个元素的 id 都是唯一的，因此它只返回一个元素。
句法
getElementById(id)
执行
给定 HTML 代码：
<html>
<head>
<title>getElementById example</title>
</head>
<body>
<p id="para">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
</body>
</html>
JavaScript 代码
function changeColor(newColor) {
const elem = document.getElementById('para');
elem.style.color = newColor;
}
document.getElementsByClassName()
此方法通过其类名查找元素。类名不需要是唯一的，因此此方法返回一个 HTMLCollection，它是一个带有元素列表的类数组结构。
句法
getElementsByClassName(names)
执行
document.getElementsByClassName('test')
document.getElementsByTagName
当我们不知道元素的 id 或类名，但我们知道它的标签名时，使用此方法；由于标签名称不是唯一的，我们返回一个 HTMLCollection。
句法
getElementsByTagName(tagName)
执行
const p = secondChild.getElementsByTagName("p")[0];
查找嵌套节点
要查找嵌套节点，我们使用以下两种方法：
-
查询选择器（）
-
查询选择器全部（）
查询选择器（）
此方法接受一个参数，一个或多个 CSS 兼容选择器的字符串，并返回文档中与指定选择器或选择器组匹配的第一个元素。如果没有找到匹配项，则返回 null。
句法
querySelector(selectors)
执行
给定 HTML 代码：
<div id="items"></div>
给定 JavaScript 代码：
const list_items = document.querySelector("#items");
list_items;
查询选择器全部（）
此方法接受包含一个或多个选择器的字符串作为其参数。它返回所有匹配元素的 Nodelist 集合。NodeList 将是一个类似数组的结构，其中包含一个 dom 节点列表。
句法
querySelectorAll(selectors)
执行
const texts = document.querySelectorAll("p");
创建 DOM 元素
要在 JavaScript 中创建元素，我们使用document.createElement()方法。我们将任何有效的 HTML 标记作为参数传递。
向 DOM 添加元素
我们可以使用 append() 和 innerHTML 来添加和查看 DOM 中显示的元素。
附加（）
此方法在 Element 的最后一个子元素之后插入一组 Node 对象或字符串对象。
关于附加的重要注意事项：
-
允许您附加字符串对象。
-
没有返回值。
-
可以附加多个节点和字符串。
句法
append(param1)
append(param1, param2)
append(param1, param2, /* … ,*/ paramN)
执行
示例 1
const ul = document.createElement("ul");
for (let i = 0; i < 3; i++) {
const li = document.createElement("li");
li.textContent = (i + 1).toString();
ul.append(li);
}
element.append(ul);
示例 2
let div = document.createElement("div")
let p = document.createElement("p")
div.append("Some text", p)
内部HTML
此属性获取或设置元素中包含的 HTML 或 XML 标记。
执行
给定 HTML 代码：
<ul id="list">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
JavaScript 实现是：
const list = document.getElementById("list");
list.innerHTML += `<li><a href="#">Item ${list.children.length + 1}</a></li>`;
由于各种原因，不建议使用此过程：
-
它更容易出错，并且很难找到错误。
-
它可能会对网站性能产生负面影响。
-
它使网站面临用户注入恶意代码的风险。
更改 DOM 节点的属性
我们可以使用style属性来改变 DOM 的外观。
执行
const element = document.getElementById("main");
element.style.height = "300px";
element.style.backgroundColor = "#27647B";
从 DOM 中移除元素
移除孩子（）
顾名思义，此方法从 DOM 中移除一个子节点并返回移除的节点。
句法
removeChild(child);
执行
鉴于此 HTML 代码：
<div id="top">
<div id="nested"></div>
</div>
在知道其父节点时删除指定元素：
let d = document.getElementById("top");
let d_child = document.getElementById("nested");
let deleteChild = d.removeChild(d_nested);
element.remove()
此方法调用自身的 remove 方法。
句法
remove()
执行
const element = document.getElementById('list-items');
element.remove(); // Removes the div with the 'list-items' id
JavaScript 事件
JavaScript 能够“监听”浏览器内部发生的事情。它可以侦听诸如浏览器是否调整大小或是否有人单击屏幕上的特定图像等事件。
有不同类型的 JavaScript 事件；要了解更多信息，请单击此链接。
在 DOM 节点上创建事件监听器
为了在 JavaScript 中处理事件，我们在要添加侦听器的元素上使用addEventListener()方法。我们向它传递两个参数：
-
要侦听的事件的名称。
-
用于“处理”事件的回调函数。
句法
addEventListener(type, listener);
执行
const input = document.getElementById('input');
input.addEventListener('click', function() {
alert('I was clicked!');
});
DOMContentLoaded 事件
确保我们的代码在正确的时间运行很重要。
DOMContentLoaded事件在初始 HTML 文档完全加载和解析后触发，无需等待样式表、图像和子框架完成加载。
Window接口可以监听该事件。
句法
addEventListener('DOMContentLoaded', (event) => {});
onDOMContentLoaded = (event) => { };
执行
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
});
加载事件
load事件在资源及其所有依赖资源（包括 CSS 和 JavaScript）完成加载时触发。
句法
addEventListener('load', (event) => {});
执行
window.addEventListener('load', (event) => {
console.log('page is fully loaded');
});
我希望这篇文章能帮助你理解如何操作 DOM。在下一篇文章中，我们将与服务器通信，获取数据，并使用 DOM 将其显示在浏览器上。
文章来源：https://scanairobi.hashnode.dev/manipulating-the-dom-with-javascript
网友评论