javascript中的HTML DOM

最新推荐文章于 2024-07-26 10:55:18 发布

lmd666

最新推荐文章于 2024-07-26 10:55:18 发布

阅读量199

点赞数

CC 4.0 BY-SA版权

分类专栏： java 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/lmd666/article/details/115491179

java 专栏收录该内容

25 篇文章

订阅专栏

HTMLDOM是HTML文档的对象模型，允许程序和脚本动态访问和更新页面内容、结构和样式。核心DOM、XMLDOM和HTMLDOM分别对应不同类型的文档标准模型。通过DOM，可以使用如getElementById、getElementsByTagName等方法查找元素，改变innerHTML属性来更新内容，使用style属性调整样式，以及绑定事件监听器响应用户交互。文档对象document是访问页面元素的入口，例如通过id查找元素：`document.getElementById('id')`。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML DOM 文档对象模型

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

Dom是中立于平台和语言的接口，它允许程序和脚本动态地访问，更新文档的内容，结构和样式

Dom分为三个不同的部分

Core Dom 所有文档的标准模型

XML DOm xml 文档的标准模型

Html Dom html文档的标准模型

什么是HTML DOM？

html的标准对象模型和编程接口，定义了

作为对象的html元素

所有的html元素的属性

访问所有的html元素的方法

所有html元素的事件

HTML Dom方法是你可以执行的动作

HTML DOM属性是你可以设置的HTML元素的值

<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

在上面的例子中，getElementById是方法，innerHTML是属性，innerHTML属性可用于获取或改变任何HTML元素的内容

HTML DOM Document对象

文档对象代表着你的网页

如果需要访问HTML页面中的任何元素，那么总是从访问documnet对象开始

查找HTML元素

通过id查找HTML元素最简单的方法是，使用元素id

查找id =a的元素

var myElement = document.getElementById("a")

如果元素被找到，此方法会以对象返回元素

通过标签名查找HTML元素

本例子查找所有的<p>元素

var x =  document.getElementsByTagName("p");

通过类名查找HTMl元素

var x = document.getElementsByClassName（“a”）；

通过类名查找元素不适合ie8 以及更早版本

改变HTML

改变HTML输出流

document.write()可用于直接写入HTML输入流

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

在文档加载之后使用document.write(),这样会覆盖文档

改变HTML内容

修改HTML最简单的方法是innerHTML属性

改变属性的值

document.getElementById.attribute = new value

改变css

改变html元素的样式

document.getElementById(id).style.property = new style

document.getElementById("p2").style.color = "blue";

使用事件

当某些事件在HTML元素上发生时，浏览器会生成事件

<button type= "button" onclick="document.getElementById('id1').style.color = 'red' "> 
点击我！
</button>