如何使用JavaScript操作DOM来控制HTML内容属性和样式？

DOM（Document Object Model）是用来操作HTML文档的编程接口，通过JavaScript可以通过DOM来访问和修改HTML内容、属性和样式。在这篇文章中，我们将探讨如何使用JavaScript来操作HTML内容，包括插入、删除、替换元素，修改元素的文本内容和属性。我们还将学习如何使用DOM来更改HTML元素的样式，包括修改元素的背景颜色、字体大小和边框样式等。通过本文，您将了解如何利用DOM和JavaScript来实现动态的网页效果。

第1节. DOM的Html操作

其实，在#JavaScript#中，使用最多的还是对Html DOM的操作，什么是DOM呢？DOM是文档对象模型，浏览器会对Html页面中所有的标记内部形成一个树形结构，这个树形结构就是DOM，JavaScript可以在DOM中进行相关的操作。

JavaScript深入编程-从0基础到深入学习线上.NET培训课程¥118淘宝月销1购买

DOM操作非常多，且功能强大，甚至可以完全构造出一个Html页面。如下是几个JavaScript操作DOM的功能：

一、输出内容：

在JavaScript中，使用document.write()方法可以在没有任何Html代码的情况下向页面输出文本内容。也可以将数据库中的内容输出到Html页面上。

如下JavaScript代码是向页面输出当前期日期值：

document.write(new Date().toDateString());

document.write()方法的使用

在此页面上，还有一个div标记，用于输出一段文本内容。现在我们运行一下此html文件，看一下运行结果是什么：

document.write()输出的内容

从运行结果上看，使用document.write()输出的内容会显示在其它Html内容的最前面。

二、修改Html标记内容：

在Html页面上，首先在DOM中找到要修改值的Html元素，找到该元素后使用变量存储，然后再使用元素的innerHTML和innerText这两个属性获取值或赋值。

使用Html元素的innerText属性只能设置纯文本内容，代码如下：

getElementById()获取html元素

在此代码中，通过getElementById()方法找到id为div1的Html元素，然后使用innerText设置一个文本值。运行一下结果：

innerText()修改元素的内容

当单击“确定”按钮后，已经将div1标记中的“这是原始内容。”给修改掉了，修改成了“修改后的值”。

而对于innerHTML属性，是可以将Html元素中的内容修改为带有Html标记的内容。如下JS代码：

div1.innerHTML= "<span style=color:red>你好</span>";

在此代码中，是将原来的文本内容修改为带有<span>标记的内容。运行结果如下：

使用innerHtml修改Html标记内容

注意，使用innerHtml属性只是赋带有Html标记的内容，并不会把div标记给修改掉。

三、修改Html标记属性值：

对于使用JavaScript代码修改Html标记的属性值，是很有用的一个功能，可以实现更多的效果，如修改img图片的地址、修改id、name、class等属性的值。

这里我们举个例子，修改一下<img>标记的src属性的值，代码如下：

var x = document.getElementById("img1");//修改src属性x.src = "/2.png";

修改img元素的src属性值

在此代码中，<img>标记原来的src属性的值是1.png，现在通过Js代码修改src的值为2.png。运行一下上面的代码，结果如下：

img标记呈现图片

这是Html页面运行后出现的1.png图片的样子，现在单击“确定”按钮执行JS代码，去修改一下src的值：

DOM修改src属性值

当点击过按钮之后，图片的样子就发生了变化，这就是通过修改Html元素的属性值实现的效果。

第2节. DOM的CSS操作

我们知道，Html语言给我们提供的标记，都具有class和style属性，通过这2个属性，可以修改Html标记的样式，从而改变Web页面的风格，产生动态效果。

(1). class属性：用于修改html标记的CSS类名，从而改变样式。

(2). style属性：用于直接给Html标记添加样式的内容，如color:red设置字体颜色等。

要想修改掉HTML元素的样式，还是首先需要查找到该元素，然后使用如下语法修改样式：

document.getElementById(id).style.属性名=新样式

这里，我们举个例子，使用style属性修改一下html标记的样式，Html+JavaScript代码如下：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>一都编程，每个知识就是一个案例。</title><script>function editCSS() {//查找到该元素var div1 = document.getElementById("div1");//改变样式div1.style.color = "blue";}</script></head><body><div id="div1" style="color:red">你好</div><input id="Button1" type="button" value="执行" onclick="editCSS()" /></body></html>

在此代码中，修改<div>标记的的颜色值，由原来的red修改为blue，通过style.color来修改。运行一下结果：

使用style属性修改样式

当点击过“执行”按钮之后，“你好”由红色变为蓝色，且打开网页源代码查看，发现style属性的值已经修改过了。变成了color:blue，表示使用蓝色字体显示。

总结：这里主要讲解了DOM中的Html和CSS样式这2个操作，这是2个很常用的操作，对于JavaScript开发者来说，这是必须要掌握的知识点，且还要熟练的运用。