HTML DOM 实例
HTML DOM 实例
HTML DOM（文档对象模型）是一种将HTML文档看作树形结构的方法，即使用对象来表示文档的各个元素，属性和样式，使得开发者可以更加方便的操作HTML文档。本文将介绍一些常用的HTML DOM 实例。
getElementById()
getElementById() 方法可以通过元素的 id 属性来访问元素，返回一个代表该元素的对象。例如：
<!DOCTYPE html>
<html>
<head>
<title>getElementById()方法示例</title>
</head>
<body>
<h1 id="title">这是一个H1标题</h1>
<script>
var title = document.getElementById("title");
title.innerHTML = "New Title";
</script>
</body>
</html>
上面的代码使用 getElementById() 方法获得 id 为 “title” 的元素，并将其 innerHTML 改变为 “New Title”。
getElementsByTagName()
getElementsByTagName() 方法可以通过标签名来访问元素，返回一个代表该元素的对象数组。例如：
<!DOCTYPE html>
<html>
<head>
<title>getElementsByTagName()方法示例</title>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<script>
var p = document.getElementsByTagName("p");
for (var i = 0; i < p.length; i++) {
p[i].style.color = "red";
}
</script>
</body>
</html>
上面的代码使用 getElementsByTagName() 方法获得所有的 p 元素，并将它们的 color 属性改变为红色。
getElementsByClassName()
getElementsByClassName() 方法可以通过类名来访问元素，返回一个代表该元素的对象数组。例如：
<!DOCTYPE html>
<html>
<head>
<title>getElementsByClassName()方法示例</title>
</head>
<body>
<div class="box">这是一个用于盛放内容的盒子</div>
<div class="box">这是另一个盒子</div>
<script>
var boxes = document.getElementsByClassName("box");
for (var i = 0; i < boxes.length; i++) {
boxes[i].style.border = "1px solid red";
}
</script>
</body>
</html>
上面的代码使用 getElementsByClassName() 方法获得所有的 class 属性为 “box” 的元素，并将它们的 border 改变为红色。
createElement()
createElement() 方法可以用于创建一个新的元素节点。例如：
<!DOCTYPE html>
<html>
<head>
<title>createElement()方法示例</title>
</head>
<body>
<script>
var p = document.createElement("p");
p.innerHTML = "这是通过JavaScript创建的一个新的段落元素节点。"
document.body.appendChild(p);
</script>
</body>
</html>
上面的代码创建了一个新的 p 元素节点，并将其内容添加到了文档的 body 元素中。
createTextNode()
createTextNode() 方法可以用于创建一个新的文本节点。例如：
<!DOCTYPE html>
<html>
<head>
<title>createTextNode()方法示例</title>
</head>
<body>
<script>
var text = document.createTextNode("这是通过JavaScript创建的一个新的文本节点。");
document.body.appendChild(text);
</script>
</body>
</html>
上面的代码创建了一个新的文本节点，并将其添加到了文档的 body 元素中。
总结
本文介绍了几种常用的 HTML DOM 实例，包括 getElementById()、getElementsByTagName()、getElementsByClassName()、createElement()、createTextNode() 等方法，这些方法可以帮助开发者更加方便地操作 HTML 文档。需要注意的是，操作 HTML 文档时应该遵循标准，并谨慎地使用 DOM 方法，以避免不必要的麻烦。