极客笔记JavaScript – W3C DOM
什么是W3C DOM？
W3C DOM是World Wide Web Consortium的文档对象模型。它定义了操作HTML和XML文档的标准接口，提供了将HTML和XML文档视为对象和文本的方法。
W3C DOM由两个部分组成：核心DOM和HTML DOM。核心DOM处理文档的内容、结构和属性。HTML DOM建立在核心DOM之上，并提供了特定于HTML的方法和属性。
如何在HTML页面中引用JavaScript文件
在HTML页面中引用JavaScript文件，可以使用<script>标签。以下是示例代码：
<!DOCTYPE html>
<html>
<head>
<title>引用JavaScript文件示例</title>
<script src="js/myScript.js"></script>
</head>
<body>
</body>
</html>
在上面的示例中，我们通过<script>标签引用了名为“myScript.js”的JavaScript文件。请注意，<script>标签应放在<head>标签或<body>标签中之一中。
如何操作HTML元素
可以使用W3C DOM来操作HTML元素，并对其进行更改。以下是一些常见的HTML元素操作示例：
获取元素
以下是如何使用W3C DOM获取元素的示例代码：
var ele = document.getElementById("myElement");
在上面的示例中，我们使用getElementById()方法获取名为“myElement”的元素。这个方法返回一个表示所找到的元素的对象。
改变元素内容
以下是如何使用W3C DOM更改元素内容的示例代码：
var ele = document.getElementById("myElement");
ele.innerHTML = "Hello, World!";
在上面的示例中，我们先用getElementById()方法获取了名为“myElement”的元素，然后使用innerHTML属性将该元素的内容更改为“Hello, World!”。
添加事件监听器
以下是如何使用W3C DOM将事件监听器添加到元素上的示例代码：
var ele = document.getElementById("myButton");
ele.addEventListener("click", function() {
alert("Button clicked!");
});
在上面的示例中，我们使用addEventListener()方法将一个“click”事件监听器添加到名为“myButton”的元素上。当用户单击此元素时，弹出一个消息框。
修改CSS样式
可以使用W3C DOM来更改HTML元素的CSS样式。以下是一些常见的CSS样式更改示例：
更改元素的背景颜色
以下是如何使用W3C DOM更改元素背景颜色的示例代码：
var ele = document.getElementById("myElement");
ele.style.background = "red";
在上面的示例中，我们使用style.background属性将名为“myElement”的元素的背景颜色更改为红色。
更改元素的显示
以下是如何使用W3C DOM更改元素的显示方式的示例代码：
var ele = document.getElementById("myElement");
ele.style.display = "none";
在上面的示例中，我们使用style.display属性将名为“myElement”的元素的显示方式更改为“none”。这个元素将不再在页面上显示。
结论
W3C DOM是操作HTML和XML文档的标准接口，在JavaScript中使用W3C DOM可以帮助我们更改HTML元素的内容和样式。我们可以使用getElementById()方法获取元素，并使用innerHTML属性来更改元素的内容。我们还可以通过style属性来更改元素的CSS样式。在实际编码中，我们应该灵活使用这些特性，以实现各种需求。