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