Javascript DOM 基本操作小结
在编写基于Web的Javascript应用程序时，经常需要对Document Object Model（DOM）进行操作。本文将介绍DOM基本操作的相关知识，并提供一些示例。
什么是DOM？
DOM是指文档对象模型（Document Object Model），用于在HTML或XML文档中表示和操作元素。DOM将整个文档表示为一个树形结构，可以通过Javascript操作DOM来改变文档的外观、内容和行为。
DOM基本操作
以下是DOM基本操作的一些示例。
获取元素
要获取文档中的元素，请使用document.getElementById或document.querySelector函数。这两个函数都接收一个字符串参数，用于指定要查找的元素。
// 通过ID查找元素
let element = document.getElementById("myElement");
// 通过CSS选择器查找元素
let element = document.querySelector(".myClass");
操作元素
一旦找到了要更改的元素，您可以使用以下方法来更改其内容和样式：
更改元素内容
// 获取元素并更新其内容
let element = document.getElementById("myElement");
element.innerHTML = "New content";
更改元素样式
// 获取元素并更新其样式
let element = document.getElementById("myElement");
element.style.color = "red";
示例
以下示例演示如何使用DOM更改文档元素的内容和样式：
示例1：更改标题
<html>
<head>
<title>DOM示例</title>
</head>
<body>
<h1 id="myTitle">原始标题</h1>
<button onclick="changeTitle()">更改标题</button>
<script>
function changeTitle() {
let titleElement = document.getElementById("myTitle");
titleElement.innerHTML = "新标题";
titleElement.style.color = "red";
}
</script>
</body>
</html>
该示例包括一个标题和一个按钮。当用户单击按钮时，它会调用changeTitle函数来改变标题的内容和样式。
示例2：更改列表项
<html>
<head>
<title>DOM示例</title>
</head>
<body>
<ul>
<li id="item1"><a href="#">项1</a></li>
<li id="item2"><a href="#">项2</a></li>
<li id="item3"><a href="#">项3</a></li>
</ul>
<button onclick="changeList()">更改列表项</button>
<script>
function changeList() {
let item2 = document.getElementById("item2");
item2.innerHTML = "新列表项";
item2.style.backgroundColor = "yellow";
}
</script>
</body>
</html>
该示例包括一个带有三个列表项的无序列表和一个按钮。当用户单击按钮时，它会调用changeList函数来更改第二个列表项的内容和样式。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript dom 基本操作小结 - Python技术站
微信扫一扫 
支付宝扫一扫 