JavaScript DOM详细操作-猿码集

JavaScript DOM详细操作

在Web开发中，DOM即文档对象模型（Document Object Model），是HTML或XML文档的编程接口。它提供了一种在文档中查找节点、查找并修改节点内容的方式。在该文档中，我们将详细介绍JavaScript对DOM的操作。

什么是DOM？

DOM是W3C的标准，它定义了访问和操作HTML和XML文档的方式。使用DOM，开发人员可以创建和修改页面上的任意元素和文本。

DOM将HTML或XML文档表示为由节点和对象（包括元素、属性和文本）组成的树形结构。通过DOM，开发人员可以让JavaScript与页面上的每个元素进行交互。

如何访问DOM元素？

JavaScript可以使用document对象访问DOM元素。document对象代表整个文档，它是HTMLDocument类型的实例，具有许多有用的属性和方法。

可以通过以下方式访问DOM元素：


let element = document.getElementById("myId");
let elements = document.getElementsByClassName("myClass");
let elements = document.getElementsByTagName("myTag");
let elements = document.querySelectorAll(".myClass");
let element = document.querySelector("#myId");

其中getElementById()、getElementsByClassName()、getElementsByTagName()是document对象自带的方法。我们可以通过id、class和标签名来访问DOM元素。

querySelectorAll()和querySelector()是HTMLDocument对象的方法，可以按照CSS选择器的语法访问符合指定条件的元素。querySelector()只返回匹配到的第一个元素，querySelectorAll()返回匹配到的所有元素。

如何修改DOM元素？

要修改DOM元素，可以直接访问元素的属性或调用元素的方法。

例如，要改变元素的内部HTML，可以访问元素的innerHTML属性：


let p = document.getElementById("myp");
p.innerHTML = "Hello world!";

上面的代码将元素的内容更改为“Hello World!”字符串。

如果要修改元素的CSS样式，则可以访问元素的style属性：


let p = document.getElementById("myp");
p.style.color = "red";

上面的代码将元素的文本颜色设置为红色。

如果要在已有元素之后插入新元素或删除元素，可以使用parentNode和appendChild方法。

例如：


let newP = document.createElement("p");
newP.innerHTML = "This is a new paragraph!";
document.body.appendChild(newP);

上面的代码将创建一个新的元素并将其添加到body元素中。

还可以使用removeChild()方法从DOM中删除元素：


let element = document.getElementById("myId");
element.parentNode.removeChild(element);

上面的代码将从DOM树中删除具有指定id的元素。

事件处理程序

JavaScript允许您将事件处理程序附加到HTML元素。事件处理程序是JavaScript函数，它定义了在事件发生时执行的代码。

例如：


let button = document.getElementById("myButton");
button.onclick = function() {
  alert("Hello World!");
};

上面的代码将在单击具有指定id的按钮时显示一个警告框。

另一种方式是使用addEventListener()方法：


let button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("Hello World!");
});

这里，用于指定事件的第一个参数是事件类型（例如click、mouseover等）。第二个参数是事件处理程序函数。

有用的DOM属性和方法

以下是一些有用的DOM属性和方法：

- document.documentElement：返回HTML文档的根元素（即HTML或XHTML元素）。

- element.innerHTML：获取或设置指定元素的HTML内容。

- element.innerText：获取或设置指定元素的文本内容。

- element.setAttribute(attributeName, attributeValue)：设置元素的属性。

- element.getAttribute(attributeName)：获取元素的属性。

总结

在JavaScript中，使用DOM操作可以更好地控制网页元素的外观和行为。了解DOM是Web开发人员的重要一步，因为它为开发人员提供了强大的控制HTML和XML文档的工具。通过使用JavaScript和DOM，可以创建动态和交互式的网页应用程序。

JavaScript DOM详细操作