JS HTML DOM 学习笔记

什么是 HTML DOM？

HTML DOM（文档对象模型）定义了用于访问和操作 HTML 文档的标准方法。DOM 将 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。

如何访问 DOM 元素？

通过 document.getElementById(id) 函数可以获取指定 ID 的元素。例如：

javascriptCopy Code
var element = document.getElementById("myElement");

通过 querySelector 或 querySelectorAll 函数可以通过 CSS 选择器来获取元素。例如：

javascriptCopy Code
var element = document.querySelector("#myElement");
var elements = document.querySelectorAll(".myClass");

如何操作 DOM 元素？

改变 HTML 内容：可以通过 innerHTML 属性或 innerText 属性改变元素的 HTML 内容或文本内容。例如：

javascriptCopy Code
document.getElementById("myElement").innerHTML = "新的 HTML 内容";
document.getElementById("myElement").innerText = "新的文本内容";

改变 HTML 样式：可以通过 style 对象来改变元素的 CSS 样式。例如：

javascriptCopy Code
document.getElementById("myElement").style.color = "red";
document.getElementById("myElement").style.fontSize = "20px";

改变 HTML 属性：可以直接通过元素对象来改变元素的属性。例如：

javascriptCopy Code
document.getElementById("myElement").href = "https://www.example.com";
document.getElementById("myElement").src = "https://www.example.com/image.jpg";

添加或删除元素：可以通过 createElement 和 appendChild 函数来添加元素，通过 removeChild 函数来删除元素。例如：

javascriptCopy Code
var newElement = document.createElement("div");
document.body.appendChild(newElement);
var oldElement = document.getElementById("myElement");
document.body.removeChild(oldElement);

实例

以下是一个例子，其中通过点击按钮来改变文本内容和样式：

htmlCopy Code
<!DOCTYPE html>
<html>
<head>
	<title>JS HTML DOM 学习笔记</title>
</head>
<body>

<button onclick="changeText()">改变文本内容</button>
<button onclick="changeStyle()">改变样式</button>

<p id="myText">原始文本内容</p>

<script>
function changeText() {
	document.getElementById("myText").innerHTML = "新的文本内容";
}

function changeStyle() {
	document.getElementById("myText").style.color = "red";
	document.getElementById("myText").style.fontSize = "20px";
}
</script>

</body>
</html>

以上就是 JS HTML DOM 的一些基本操作，更多详细内容请参考官方文档。