一篇文章带你吃透JavaScript中的DOM知识及用法
什么是DOM
DOM（Document Object Model文档对象模型）是指HTML或XML页面的对象表示方式，通过DOM树来表示一个页面中的所有元素及其属性，以及元素之间的关系。JavaScript通过DOM提供的API来访问和操作页面中的元素及其属性，实现动态更新页面的效果。
DOM的操作方法
DOM提供了一些常用的操作方法，来操作HTML页面中的元素及其属性。
获取元素
通过ID获取元素
可以通过元素的ID获取该元素。
var element = document.getElementById("myId");
其中，myId为元素的ID。
通过标签名获取元素
可以通过元素的标签名获取该元素。
var elements = document.getElementsByTagName("p");
其中，p为元素的标签名。
通过类名获取元素
可以通过元素的类名获取该元素。
var elements = document.getElementsByClassName("myClass");
其中，myClass为元素的类名。
通过选择器获取元素
可以通过CSS选择器获取一个或多个元素。
var element = document.querySelector("#myId");
var elements = document.querySelectorAll(".myClass");
其中，#myId为元素的ID选择器，.myClass为元素的类选择器。
操作元素
获取或设置元素的属性
可以获取或设置一个元素的属性。
var element = document.getElementById("myId");
var value = element.getAttribute("data-value"); // 获取元素的data-value属性值
element.setAttribute("data-value", "new value"); // 设置元素的data-value属性值为new value
获取或设置元素的内容
可以获取或设置一个元素的内容。
var element = document.getElementById("myId");
var text = element.textContent; // 获取元素的文本内容
element.textContent = "new text"; // 设置元素的文本内容为new text
创建元素
可以动态创建一个新元素。
var element = document.createElement("div");
element.setAttribute("id", "newId");
element.setAttribute("class", "newClass");
element.textContent = "new element";
document.body.appendChild(element);
其中，div为新元素的标签名，newId和newClass为新元素的ID和类名，new element为新元素的文本内容。appendChild(element)方法可以将新元素添加到页面中。
事件监听
可以为一个元素添加事件监听器。
var element = document.getElementById("myId");
element.addEventListener("click", function() {
// 点击事件的语句
});
其中，click为事件类型名称，后面跟随一个函数，该函数会在事件被触发时被调用。
示例
示例1
这是一个获取元素并修改其属性的示例。
<div id="myDiv" data-value="old value">my div</div>
var element = document.getElementById("myDiv");
var value = element.getAttribute("data-value");
element.setAttribute("data-value", "new value");
在该示例中，首先通过getElementById方法获取了ID为myDiv的元素，然后通过getAttribute方法获取了该元素的data-value属性值，最后通过setAttribute方法修改了该元素的data-value属性值为new value。
示例2
这是一个动态创建新元素的示例。
var element = document.createElement("p");
element.textContent = "new paragraph";
document.body.appendChild(element);
在该示例中，首先创建了一个新的<p>元素，然后为其设置了文本内容，最后使用appendChild方法将其添加到页面的<body>中。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：一篇文章带你吃透JavaScript中的DOM知识及用法 - Python技术站
微信扫一扫 
支付宝扫一扫 