js中的DOM

DOM（Document Object Model）是指文档对象模型，它是一种用于表示和处理HTML或XML文档的编程接口。在JavaScript中，可以通过DOM来访问和操作HTML或XML文档的各个元素和属性。

DOM的基本结构是树形结构，由多个节点组成，每个节点代表着文档中的一个元素、属性或文本。其中，最顶层的节点被称为文档节点，它代表整个文档。文档节点下面有一个或多个元素节点，每个元素节点又可以包含其他元素节点或者文本节点。

JavaScript中的DOM语法和方法非常丰富，下面是介绍DOM中所有的语法以及使用方法：
1.获取元素
（1）通过id获取元素

var element = document.getElementById("idName");

（2）通过标签名获取元素

var elements = document.getElementsByTagName("tagName");

（3）通过类名获取元素

var elements = document.getElementsByClassName("className");

（4）通过CSS选择器获取元素

var element = document.querySelector("selector");
var elements = document.querySelectorAll("selector");

2.操作元素
（1）设置或获取元素的属性值

element.getAttribute("attributeName");
element.setAttribute("attributeName", "attributeValue");

（2）设置或获取元素的文本内容

element.textContent;
element.textContent = "newTextContent";

（3）设置或获取元素的HTML内容

element.innerHTML;
element.innerHTML = "newInnerHTML";

（4）创建新的元素节点

var newElement = document.createElement("tagName");

（5）插入或删除元素

parentElement.appendChild(newElement);
parentElement.insertBefore(newElement, referenceElement);
parentElement.removeChild(childElement);
parentElement.replaceChild(newElement, oldElement);

3.事件处理
（1）为元素添加事件监听器

element.addEventListener("eventName", eventHandler);

（2）为元素移除事件监听器

element.removeEventListener("eventName", eventHandler);

（3）事件对象

event.type; // 事件类型
event.target; // 触发事件的元素
event.preventDefault(); // 阻止默认行为
event.stopPropagation(); // 阻止事件冒泡

总结来说，DOM是JavaScript中用于访问和操作HTML或XML文档的编程接口。通过DOM提供的方法和属性，我们可以获取、创建、插入、删除和修改文档中的元素，以及处理元素的事件。在前端开发中，DOM是非常重要的一个概念，因为它可以帮助我们实现动态交互、响应式设计等功能。

• 打卡1.01