JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素是指 HTML 文档中的标记或元素,这些标记或元素可以通过 JavaScript 来访问、操作和修改,从而实现对 DOM 文档的动态操作。
获取元素
获取元素是使用 JavaScript 操作 DOM 文档的第一步,常见的获取元素的方法有以下几种:
getElementById
使用 getElementById
方法可以通过元素的 id 属性获取元素,该方法使用起来非常简单,下面是一个示例:
let element = document.getElementById("idName");
getElementsByClassName
使用 getElementsByClassName
方法可以通过元素的 class 属性获取元素,该方法将返回一个包含指定 class 的所有元素的 NodeList 对象,下面是一个示例:
let elements = document.getElementsByClassName("className");
getElementsByTagName
使用 getElementsByTagName
方法可以通过元素的标记名获取元素,该方法将返回一个包含指定标记名的所有元素的 NodeList 对象,下面是一个示例:
let elements = document.getElementsByTagName("tagName");
querySelector
使用 querySelector
方法可以通过 CSS 选择器获取元素,该方法将返回匹配指定选择器的第一个元素,下面是一个示例:
let element = document.querySelector("selector");
querySelectorAll
使用 querySelectorAll
方法可以通过 CSS 选择器获取元素,该方法将返回匹配指定选择器的所有元素的 NodeList 对象,下面是一个示例:
let elements = document.querySelectorAll("selector");
操作元素
获取到元素之后,就可以对其进行操作,常见的操作有以下几种:
修改元素属性
可以通过 JavaScript 修改元素的属性,例如修改元素的文本内容、样式、属性等,下面是一些示例:
let element = document.getElementById("idName");
// 修改文本内容
element.textContent = "new text";
// 修改样式
element.style.color = "red";
// 修改属性
element.setAttribute("attrName", "attrValue");
添加、删除元素
可以通过 JavaScript 添加、删除元素,下面是一些示例:
// 添加元素
let newElement = document.createElement("tagName");
parent.appendChild(newElement);
// 删除元素
let element = document.getElementById("idName");
element.remove();
修改元素类名
可以通过 JavaScript 修改元素的类名,下面是一个示例:
let element = document.getElementById("idName");
element.classList.add("newClass");
事件
JavaScript 可以捕获 DOM 元素的事件并响应事件,常见的事件有以下几种:
click
当元素被点击时触发,下面是一个示例:
let element = document.getElementById("idName");
element.addEventListener("click", function() {
alert("clicked");
});
mouseover
当鼠标移动到元素上时触发,下面是一个示例:
let element = document.getElementById("idName");
element.addEventListener("mouseover", function() {
alert("mouse over");
});
submit
当表单被提交时触发,下面是一个示例:
let form = document.getElementById("formName");
form.addEventListener("submit", function() {
alert("form submitted");
});
结论
JavaScript HTML DOM 元素 (节点)是实现动态操作 DOM 文档的重要工具,可以通过获取元素、操作元素、事件等方法实现对 DOM 文档的灵活操作,为 Web 应用程序的开发提供了强大的支持。