HTML DOM 方法
HTML DOM 方法
HTML DOM (Document Object Model) 方法是用于处理 HTML 文档的 JavaScript 方法。HTML DOM 方法可以让我们通过 JavaScript 来访问和操作 HTML 文档中的元素，属性和事件。
获取元素
通过 HTML DOM 方法可以获取 HTML 文档中的元素，以下是几个获取元素的方法：
getElementById(id)
通过元素的 ID 属性获取元素
var element = document.getElementById("my-id");
getElementsByClassName(className)
通过元素的 class 属性获取元素，返回是一个类数组对象（HTMLCollection），可以通过下标获取指定的元素
var elements = document.getElementsByClassName("my-class");
var element = elements[0];
getElementsByTagName(tagName)
通过元素的标签名获取元素，返回是一个类数组对象（HTMLCollection），可以通过下标获取指定的元素
var elements = document.getElementsByTagName("p");
var element = elements[0];
querySelector(selector)
通过 CSS 选择器获取元素，返回获取到的第一个元素
var element = document.querySelector(".my-class");
querySelectorAll(selector)
通过 CSS 选择器获取元素，返回获取到的全部元素，返回是一个 NodeList 对象，可以通过下标获取指定的元素
var elements = document.querySelectorAll(".my-class");
var element = elements[0];
操作元素
通过 HTML DOM 方法可以操作 HTML 文档中的元素，以下是几个操作元素的方法：
修改元素内容
使用 innerHTML 属性可以修改元素的内容
var element = document.getElementById("my-id");
element.innerHTML = "修改后的内容";
修改元素样式
使用 style 属性可以修改元素的样式
var element = document.getElementById("my-id");
element.style.color = "red";
element.style.fontSize = "16px";
修改元素属性
使用 setAttribute() 方法可以修改元素的属性
var element = document.getElementById("my-id");
element.setAttribute("title", "新属性值");
添加元素
使用 createElement() 方法可以创建一个新的元素，使用 appendChild() 方法可以添加一个子元素
var parent = document.getElementById("parent-id");
var child = document.createElement("p");
child.innerHTML = "新添加的子元素内容";
parent.appendChild(child);
删除元素
使用 remove() 或 removeChild() 方法可以删除元素
var element = document.getElementById("my-id");
element.remove(); // 新版浏览器支持
// 或
var parent = document.getElementById("parent-id");
var child = document.getElementById("child-id");
parent.removeChild(child);
操作事件
通过 HTML DOM 方法可以操作 HTML 文档中的事件，以下是几个操作事件的方法：
添加事件监听器
使用 addEventListener() 方法可以添加一个事件监听器
var element = document.getElementById("my-button");
element.addEventListener("click", function() {
alert("按钮被点击了！");
});
移除事件监听器
使用 removeEventListener() 方法可以移除一个事件监听器
var element = document.getElementById("my-button");
element.removeEventListener("click", function() {
alert("按钮被点击了！");
});
触发事件
使用 dispatchEvent() 方法可以手动触发一个事件
var element = document.getElementById("my-button");
var event = new Event("click");
element.dispatchEvent(event);
总结
HTML DOM 方法是非常重要的前端技术之一，通过它我们可以访问和操作 HTML 文档中的元素、属性和事件，有效地提升了网站的交互性和表现力。在实际开发中，掌握 HTML DOM 方法的使用技巧和规范用法，将有助于我们更好地实现网站的交互和动态效果。