本教程主要介绍了Javascript和DHTML的实例编程，并深入讲解了DOM（文档对象模型）的基础和基本API。
简介
DOM是一种表示和操作HTML和XML文档的标准接口。通过DOM，程序可以访问和操作文档的内容、结构和样式。
DOM基础包括节点、元素、属性和文本等概念。基本API包括获取元素、添加节点、修改文本和样式等方法。
本教程主要包含以下内容：
-
DOM基础概念：介绍DOM的基本概念，包括节点、元素、属性和文本等。
-
DOM基本API：介绍DOM的基本API，包括获取元素、添加节点、修改文本和样式等。
-
示例说明：通过两个实例，演示基本API的使用方法。
DOM基础概念
在DOM中，文档被表示为一个节点树，其中每个节点都是一个对象。
节点通常可以分为三种类型：元素节点、属性节点和文本节点。元素节点表示HTML或XML中的元素，属性节点表示元素的属性，文本节点表示元素中的文本内容。
DOM中最重要的对象是document对象，它是整个文档的根节点。通过document对象，我们可以访问文档中的所有节点。
DOM基本API
DOM提供了大量的API方法来访问和操作文档中的节点。
- 获取元素
DOM提供了多种方法来获取文档中的元素。常用的方法包括getElementById、getElementsByTagName和getElementsByClassName等。这些方法会返回符合条件的元素对象或元素对象数组。
// 通过id获取元素对象
var elementById = document.getElementById('myId');
// 通过标签名获取元素对象数组
var elementsByTagName = document.getElementsByTagName('div');
// 通过类名获取元素对象数组
var elementsByClassName = document.getElementsByClassName('myClass');
- 添加节点
DOM提供了多种方法来添加新的节点。常用的方法包括createElement、createTextNode和appendChild等。这些方法可以创建新的元素或文本节点，并将它们添加到文档中的指定位置。
// 创建新的元素节点
var newElement = document.createElement('div');
// 创建新的文本节点
var newTextNode = document.createTextNode('Hello World');
// 将新的元素节点添加到body中
document.body.appendChild(newElement);
// 将新的文本节点添加到新的元素节点中
newElement.appendChild(newTextNode);
- 修改文本和样式
DOM提供了多种方法来修改文本和样式。常用的方法包括innerHTML、setAttribute和style等。这些方法可以修改元素节点的文本内容和样式属性。
// 修改元素节点的文本内容
var element = document.getElementById('myElement');
element.innerHTML = 'New Text';
// 设置元素节点的样式属性
element.setAttribute('style', 'color: red; font-size: 16px;');
element.style.color = 'red';
element.style.fontSize = '16px';
示例说明
下面通过两个实例，演示DOM基本API的使用方法。
示例一
在页面加载时，动态创建一个新的div元素，修改它的文本内容和样式，然后将其添加到body中。
<!DOCTYPE html>
<html>
<head>
<title>DOM API 示例一</title>
<script type="text/javascript">
window.onload = function() {
var newDiv = document.createElement('div');
newDiv.innerHTML = 'Hello World';
newDiv.setAttribute('style', 'color: red; font-size: 16px;');
document.body.appendChild(newDiv);
}
</script>
</head>
<body>
</body>
</html>
示例二
在页面加载时，通过id获取一个input元素，然后修改它的值。
<!DOCTYPE html>
<html>
<head>
<title>DOM API 示例二</title>
<script type="text/javascript">
window.onload = function() {
var inputElement = document.getElementById('myInput');
inputElement.value = 'New Value';
}
</script>
</head>
<body>
<input type="text" id="myInput" value="Original Value">
</body>
</html>
通过以上两个示例，我们可以看到DOM的基本API在实际项目中的应用，并通过实例了解它们的用法和特点。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Javascript & DHTML 实例编程（教程）DOM基础和基本API - Python技术站
微信扫一扫 
支付宝扫一扫 
