详解JavaScript操作HTML DOM的基本方式

让我来详细讲解一下“详解JavaScript操作HTML DOM的基本方式”的完整攻略。

HTML DOM是什么

在开始说明JavaScript操作HTML DOM的基本方式之前，我们先来了解一下HTML DOM是什么。HTML DOM（文档对象模型）是指把HTML文档当作一个树形结构，在JS中可以用DOM API访问和操作这个树形结构，这样就可以改变HTML文档的内容、结构和样式。

获取元素

在操作HTML DOM时，首先需要获取到需要操作的元素。获取元素的方式包括：

• 通过元素的 id 获取元素：

javascript
var element = document.getElementById("myId");

• 通过元素的 class 获取元素：

javascript
var elements = document.getElementsByClassName("myClass");

• 通过元素的标签名获取元素：

javascript
var elements = document.getElementsByTagName("p");

• 通过CSS选择器获取元素：

javascript
var element = document.querySelector("#myId.myClass");
var elements = document.querySelectorAll("p.myClass");

操作元素

获取到需要操作的元素后，我们就可以进行元素操作了。元素操作包括：

• 读取和设置元素的属性：

• 读取元素的属性：

  javascript
var value = element.getAttribute("myAttr");

• 设置元素的属性：

  javascript
element.setAttribute("myAttr", "myValue");

• 读取和设置元素的内容：

• 读取元素的内容：

  javascript
var content = element.innerHTML;

• 设置元素的内容：

  javascript
element.innerHTML = "new content";

• 操作元素的样式：

• 读取元素的样式：

  javascript
var style = element.style.myStyleProp;

• 设置元素的样式：

  javascript
element.style.myStyleProp = "myStyleValue";

• 操作元素的文本内容：

• 读取元素的文本内容：

  javascript
var text = element.textContent;

• 设置元素的文本内容：

  javascript
element.textContent = "new text content";

示例说明

下面我们通过两个示例说明JavaScript操作HTML DOM的基本方式：

示例一：改变元素的内容

假设我们有一个 <div> 元素，其内容为“原始内容”，现在我们想要将其内容改为“新内容”。可以通过以下代码实现：

<div id="myDiv">原始内容</div>

var div = document.getElementById("myDiv");
div.innerHTML = "新内容";

示例二：改变元素的样式

假设我们有一个 <button> 元素，其样式为蓝色背景，现在我们想要将其样式改为红色背景。可以通过以下代码实现：

<button id="myButton" style="background-color:blue">点击我</button>

var button = document.getElementById("myButton");
button.style.backgroundColor = "red";

以上就是关于JavaScript操作HTML DOM的基本方式的详细介绍和说明，希望能够对你有所帮助。