获取元素
1. getElementById(id): 通过元素的 ID 获取单个元素节点。
var element = document.getElementById("elementId");
2. getElementsByClassName(className): 通过类名获取一组元素节点。
var elements = document.getElementsByClassName("className");
3. getElementsByTagName(tagName): 通过标签名获取一组元素节点。
var elements = document.getElementsByTagName("div");
4. querySelector(selector): 通过 CSS 选择器获取匹配的第一个元素节点。
var element = document.querySelector(".className");
5. querySelectorAll(selector): 通过 CSS 选择器获取匹配的所有元素节点。
var elements = document.querySelectorAll("div");
创建和操作元素
6. createElement(tagName): 创建一个新的元素节点。
var newElement = document.createElement("div");
7. createTextNode(text): 创建一个新的文本节点。
var newText = document.createTextNode("This is a text node");
8. appendChild(node): 将节点添加为另一个节点的子节点。
parentElement.appendChild(newElement);
9. removeChild(node): 从父节点中移除子节点。
parentElement.removeChild(childNode);
10. replaceChild(newNode, oldNode): 用新节点替换旧节点。
parentElement.replaceChild(newElement, oldElement);
节点属性和内容
11. getAttribute(attributeName): 获取元素的指定属性值。
var value = element.getAttribute("attributeName");
12. setAttribute(attributeName, value): 设置元素的指定属性值。
element.setAttribute("attributeName", "newValue");
13. textContent: 获取或设置元素的文本内容。
var textContent = element.textContent;
element.textContent = "New text content";
事件处理
14. addEventListener(event, function): 向元素添加事件监听器。
element.addEventListener("click", function() {
// 处理点击事件的函数
});
15. removeEventListener(event, function): 从元素移除事件监听器。
element.removeEventListener("click", myFunction);
这只是 HTML DOM 提供的方法中的一小部分。这些方法可以帮助你操纵文档的结构和内容,使你能够通过 JavaScript 实现丰富的交互式网页。在实际应用中,根据具体需求,你可能会使用更多其他的方法和属性。
转载请注明出处:http://www.zyzy.cn/article/detail/4350/HTML