在JavaScript中,DOM(文档对象模型)操作允许你访问和更改HTML文档的结构、样式和内容。以下是一些常用的DOM操作方法:
- 获取元素:使用
getElementById()
、getElementsByClassName()
、getElementsByTagName()
、querySelector()
和querySelectorAll()
方法获取HTML元素。
var elementById = document.getElementById("myId"); var elementsByClassName = document.getElementsByClassName("myClass"); var elementsByTagName = document.getElementsByTagName("div"); var elementByQuerySelector = document.querySelector("#myId"); var elementsByQuerySelectorAll = document.querySelectorAll(".myClass");
- 创建元素:使用
createElement()
方法创建新的HTML元素。
var newElement = document.createElement("div");
- 添加元素:使用
appendChild()
、insertBefore()
和replaceChild()
方法将新元素添加到DOM中。
var parentElement = document.getElementById("parent"); var newElement = document.createElement("div"); parentElement.appendChild(newElement);
- 删除元素:使用
removeChild()
方法从DOM中删除元素。
var parentElement = document.getElementById("parent"); var childElement = document.getElementById("child"); parentElement.removeChild(childElement);
- 修改元素内容:使用
innerHTML
、innerText
和textContent
属性获取或设置元素的内容。
var element = document.getElementById("myElement"); element.innerHTML = "Hello, World!"; element.innerText = "Hello, World!"; element.textContent = "Hello, World!";
- 修改元素属性:使用
getAttribute()
、setAttribute()
、removeAttribute()
和hasAttribute()
方法获取或设置元素的属性。
var element = document.getElementById("myElement"); var src = https://www.yisu.com/ask/element.getAttribute("src"); element.setAttribute("alt", "An example image"); element.removeAttribute("width"); var hasAlt = element.hasAttribute("alt");
- 修改元素样式:使用
style
属性获取或设置元素的CSS样式。
var element = document.getElementById("myElement"); element.style.width = "200px"; element.style.height = "100px"; element.style.backgroundColor = "red";
- 添加事件监听器:使用
addEventListener()
方法为元素添加事件监听器。
var element = document.getElementById("myElement"); element.addEventListener("click", function() { alert("Element clicked!"); });
这些方法只是JavaScript DOM操作的一部分,DOM操作还包括很多其他功能,如遍历DOM树、操作CSS样式表等。要了解更多关于DOM操作的信息,请查阅相关文档和教程。