1. 通过 ID 访问元素
可以使用 getElementById 方法通过元素的 ID 来获取单个元素。
var element = document.getElementById("elementId");
2. 通过标签名访问元素
可以使用 getElementsByTagName 方法通过元素的标签名获取一组元素。
var elements = document.getElementsByTagName("div");
3. 通过类名访问元素
可以使用 getElementsByClassName 方法通过元素的类名获取一组元素。
var elements = document.getElementsByClassName("className");
4. 通过 CSS 选择器访问元素
可以使用 querySelector 和 querySelectorAll 方法通过 CSS 选择器获取元素。
var element = document.querySelector("#elementId");
var elements = document.querySelectorAll(".className");
5. 通过层级关系访问元素
可以通过访问元素的父节点、子节点或兄弟节点来获取相关元素。
- 获取父节点：
var parent = element.parentNode;
- 获取子节点：
var children = element.childNodes; // 包含文本节点
var firstChild = element.firstChild; // 获取第一个子节点
var lastChild = element.lastChild; // 获取最后一个子节点
- 获取兄弟节点：
var nextSibling = element.nextSibling; // 获取下一个兄弟节点
var previousSibling = element.previousSibling; // 获取上一个兄弟节点
6. 通过事件触发访问元素
可以通过事件触发时的事件对象（通常作为函数的参数传递）来获取相关元素。
function handleClick(event) {
var clickedElement = event.target; // 获取触发事件的元素
}
这些访问方式可以根据具体需求进行选择。在实际开发中，通常会根据元素的特征、结构或交互需求选择合适的访问方式。
转载请注明出处：http://www.zyzy.cn/article/detail/4352/HTML