Javaｓｃｒｉｐｔ操作HTMLDOM的基本方式的详细说明

通过HTML DOM，可以访问Javaｓｃｒｉｐｔ HTML文档中的所有元素。

DOM（文档对象模型）

当加载Web页面时，浏览器将创建页面的文档对象模型。

HTML DOM模型被构造为对象的树：
通过可编程对象模型，Javaｓｃｒｉｐｔ已经获得了创建动态HTML的足够能力。

Javaｓｃｒｉｐｔ可以改变页面中的所有HTML元素。
Javaｓｃｒｉｐｔ可以改变页面中的所有HTML属性。
Javaｓｃｒｉｐｔ可以改变页面中的所有CSS样式。
Javaｓｃｒｉｐｔ可以响应页面中的所有事件。
查找HTML元素

通常，通过Javaｓｃｒｉｐｔ，您需要操作HTML元素。

为了做到这一点，你必须首先找到元素。有三种方法可以做到这一点：

通过ID查找HTML元素
通过标签名称查找HTML元素
按类名查找HTML元素
通过ID查找HTML元素
在DOM中找到HTML元素最简单的方法是使用元素的ID。

此示例查找id元素：

例子

var x = document.getelementbyid（介绍）；
如果找到该元素，则该方法返回对象的形式（x）中的元素。

如果找不到这个元素，x将包含null。

通过标签名称查找HTML元素

此示例查找主的元素，然后查找id元素中的所有元素：

例子

var x = document.getelementbyid（主要）；
var y = x.getelementsbytagname（P）；
按类名查找HTML元素

本示例使用getelementsbyclassname功能找到class=导语元素：

例子

var x = document.getelementsbyclassname（介绍）；

改变HTML

HTML DOM允许Javaｓｃｒｉｐｔ改变HTML元素的内容。

更改HTML输出流

Javaｓｃｒｉｐｔ可以创建动态HTML内容：

今天的日期是：Wed Oct 212015 14:43:25 GMT + 0800（中国标准时间）

在Javaｓｃｒｉｐｔ中，document.write（）可以用来直接写入内容的HTML输出流。

例子

document.write（Date（））；


灯不能使用document.write（）后，文件被加载，这将覆盖文件。

更改HTML内容

修改HTML内容使用innerHTML属性最简单的方法。

如果需要更改HTML元素的内容，请使用此语法：

document.getelementbyid（ID）.innerHTML =新的HTML

此示例更改元素的内容：

例子

你好世界！
document.getelementbyid（P1）.innerHTML =新文本！；
此示例更改元素的内容：

例子
旧头
VaR元= document.getelementbyid（头）；
元。innerHTML =新头；


示例说明：

上面的HTML文档包含id头的元素。
我们使用HTML DOM获取id头的元素。
Javaｓｃｒｉｐｔ改变该元素的内容（HTML）
更改html属性

如果需要更改HTML元素的属性，请使用此语法：

document.getelementbyid（ID）属性=新值。

此示例更改元素的SRC属性：

例子
document.getelementbyid（图像）。src=景观.webp；
示例说明：

上面的HTML文档包含id的元素。
我们使用HTML DOM获取id的元素
Javaｓｃｒｉｐｔ改变了这个元素的属性（）改为风景。