JavaScript驾驭网页－DOM

JavaScript驾驭网页－DOM攻略

DOM（Document Object Model）是一种表述HTML、XML等文档的标准模型，由节点树构成，后续操作都基于节点树上的节点。

1. 获取元素

想要驾驭网页，首先需要获取要操作的元素。

1.1 通过id获取元素

let element = document.getElementById("elementId");

1.2 通过类名获取元素

let elements = document.getElementsByClassName("className");

1.3 通过标签名获取元素

let elements = document.getElementsByTagName("tagName");

1.4 通过选择器获取元素

let element = document.querySelector("#elementId .className");
let elements = document.querySelectorAll("tagName.className");

2. 修改元素样式

操作元素最常见的就是修改样式。

element.style.property = "value";

其中property是CSS属性名，value是属性值。如修改字体大小：

let element = document.getElementById("elementId");
element.style.fontSize = "20px";

3. 添加、删除元素

通过DOM，可以在html代码中添加、删除元素。

3.1 添加元素

let parentElement = document.getElementById("parentElementId");
let childElement = document.createElement("tagName");
parentElement.appendChild(childElement);

3.2 删除元素

let parentElement = document.getElementById("parentElementId");
let childElement = document.getElementById("childElementId");
parentElement.removeChild(childElement);

4. 事件监听

最后介绍一下事件监听，可以用来实现交互效果。

element.addEventListener("eventName", function(event) {
    // 执行操作
});

其中eventName是事件名，比如"click"、"mouseover"等；event是事件对象，可以获取事件的信息，如鼠标坐标、键盘按键等。
如在按钮被点击时，修改元素背景色：

let buttonElement = document.getElementById("buttonElementId");
let element = document.getElementById("elementId");
buttonElement.addEventListener("click", function(event) {
    element.style.backgroundColor = "red";
});

以上就是JavaScript驾驭网页－DOM的完整攻略。