JavaScript HTML DOM：构建交互式网页的核心技术

当我们谈论现代网页开发时，JavaScript HTML DOM（文档对象模型）是我们必须掌握的强大工具。它将 HTML 文档的结构表示为一个对象树，允许 JavaScript 与网页的结构和内容进行交互。通过操作 DOM，我们可以在无需重新加载页面的情况下，更新页面的内容、结构和样式。

!html

JavaScript DOM 的核心特性

• 树状结构：DOM 像家谱树一样组织，元素之间具有父子关系。这种结构让我们能够根据元素的位置轻松地查找和修改内容。
• 元素访问：我们可以使用多种方法（如 INLINECODE61b292b8、INLINECODE1d004e94 和 querySelector）来访问网页上的特定元素。

示例：下面的代码演示了如何通过 ID 访问并修改 JavaScript HTML DOM 的内容。

HTML


CODEBLOCK_728640a5

在这个例子中

• 我们使用了 getElementById 方法来获取 DOM 中的特定元素。
• 通过点击按钮，我们触发了 changeText 函数。
• 该函数获取了 ID 为 "demo" 的元素，并更新了其文本内容。

输出结果

!Output

访问 DOM 中的元素

getElementById()

通过元素的 ID 获取该元素。

let heading = document.getElementById("title");
console.log(heading.textContent);

getElementsByClassName()

返回包含指定类名的所有元素的集合。

let items = document.getElementsByClassName("list-item");
console.log(items[0].textContent);

getElementsByTagName()

根据标签名选择元素。

let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length);

querySelector()

返回匹配指定 CSS 选择器的第一个元素。

let firstParagraph = document.querySelector("p");
console.log(firstParagraph.textContent);

querySelectorAll()

返回匹配指定 CSS 选择器的所有元素。

let allParagraphs = document.querySelectorAll("p");
allParagraphs.forEach(p => console.log(p.textContent));

修改 DOM

更改内容

我们可以使用 INLINECODE71dd927f 或 INLINECODE73c1a44b 来修改元素的内容。

document.getElementById("title").textContent = "New Heading";
document.getElementById("content").innerHTML = "Updated Content";

更改属性

我们可以修改元素的属性，例如 INLINECODE30cb019f、INLINECODE54a5dc8d、alt 等。

document.getElementById("myImage").src = "new-image.jpg";

添加和删除元素

创建一个新元素：

let newPara = document.createElement("p");
newPara.textContent = "This is a new paragraph.";
document.body.appendChild(newPara);

删除一个元素：

let oldPara = document.getElementById("removeMe");
oldPara.remove();

DOM 中的事件处理

JavaScript 允许我们处理各种事件，例如点击、按键、鼠标移动等。

添加事件监听器

document.getElementById("btn").addEventListener("click", function() { 
   alert("Button Clicked!");
});

移除事件监听器

function sayHello() { 
   console.log("Hello!");
}
let btn = document.getElementById("btn");
btn.addEventListener("click", sayHello);
btn.removeEventListener("click", sayHello);

事件对象

事件对象提供了关于事件的详细信息。

document.getElementById("inputField").addEventListener("keyup", function(event) {
   console.log("Key pressed: ", event.key);
});

遍历 DOM

JavaScript 提供了多种属性来帮助我们在 DOM 树中进行导航。

• parentNode：获取父级元素。
• children：获取所有子元素。
• firstChild / lastChild：获取第一个或最后一个子节点。
• nextSibling / previousSibling：获取下一个或上一个兄弟节点。

示例：

let parent = document.getElementById("myDiv").parentNode;
console.log(parent.tagName);