javascript中的HTML DOM

最新推荐文章于 2024-04-17 07:27:59 发布

lmd666

最新推荐文章于 2024-04-17 07:27:59 发布

阅读量152

点赞数

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

本文链接：https://blog.csdn.net/lmd666/article/details/115491179

版权

java 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

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>

lmd666

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript中的HTML DOM

HTML DOM 文档对象模型当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）Dom是中立于平台和语言的接口，它允许程序和脚本动态地访问，更新文档的内容，结构和样式Dom分为三个不同的部分Core Dom 所有文档的标准模型XML DOm xml 文档的标准模型Html Dom html文档的标准模型什么是HTML DOM？html的标准对象模型和编程接口，定义了作为对象的html元素所有的html元素的属性访问所有的.
复制链接

扫一扫