DOM 学习总结以及实例的使用介绍

DOM是什么？

DOM（Document Object Model）即文档对象模型，是一种用于处理HTML或XML文档的标准编程接口。它将整个HTML或XML文档表示为一个树形结构，您可以使用DOM API来访问、操纵或更新各个部分。

DOM相关属性和方法

1. getElementById()

该方法返回一个具有指定 ID 属性的节点对象。如果找不到具有指定 ID 的元素，则返回 null。

示例代码：

var myElement = document.getElementById("myId");

2. getElementsByTagName()

该方法返回一个HTMLCollection对象，其中包含有指定标签名称的所有元素。

示例代码：

var myElements = document.getElementsByTagName("div");

3. createElement()

该方法创建指定类型的元素节点，并返回该节点对象。

示例代码：

var myElement = document.createElement("p");

4. appendChild()

该方法向指定节点添加一个子节点，并返回添加的子节点对象。

示例代码：

var myNewChild = document.createElement("p");
document.getElementById("myExistingElement").appendChild(myNewChild);

DOM实例应用

1. 动态添加元素

以下代码演示了如何使用createElement()和appendChild()方法从JavaScript中动态添加一个p元素：

var newPara = document.createElement("p");
var paraText = document.createTextNode("This is a new paragraph element.");
newPara.appendChild(paraText);

document.getElementById("myContainer").appendChild(newPara);

2. 使用getAttribute()和setAttribute()方法

以下代码使用getAttribute()和setAttribute()方法更改图像元素的src属性。在此示例中，图像元素的id是“myImg”：

var myImage = document.getElementById("myImg");
var imgSrc = myImage.getAttribute("src");

if (imgSrc == "image1.jpg") {
    myImage.setAttribute("src", "image2.jpg");
} else {
    myImage.setAttribute("src", "image1.jpg");
}

总结

DOM是JavaScript和HTML之间的桥梁，它允许您使用JavaScript修改HTML和CSS，同时可以对文档进行集中处理。了解DOM在JavaScript中的基本用法对于网页开发至关重要，希望本文的介绍可以帮助您更好地理解DOM以及它的相关属性和方法。