JavaScript（七）DOM

最新推荐文章于 2021-09-14 19:41:06 发布

We_jia

最新推荐文章于 2021-09-14 19:41:06 发布

阅读量149

点赞数

分类专栏： JavaScript 文章标签： DOM简介查找HTML元素改变HTML元素

本文链接：https://blog.csdn.net/We_jia/article/details/85307959

版权

JavaScript 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

一、DOM简介

HTML DOM （文档对象模型）

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

二、查找 HTML 元素

通过 JavaScript，来操作 HTML 元素。通过DOM，可访问 JavaScript HTML 文档的所有元素。

如果要操作HTML元素，我们首先找到该元素。有三种常用方法来获取元素：

通过 类名 找到 HTML 元素

通过 id 找到 HTML 元素

通过 标签名 找到 HTML 元素

在获取元素的时候得注意获取的元素是否初始化

（1）通过类名查找 HTML 元素

查找 class="box" 元素:

 var b = document.getElementsByClassName("box");

getElementsByClassName 获取出来的对象是集合类型也可以说是数组类型有长度属性 length，class可以绑定多个元素

（2）通过 id 查找 HTML 元素

查找 id="block" 元素：

var x=document.getElementById("block");

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将包含 null。

（3）通过标签名查找 HTML 元素

查找所有span 标签:

var s=getElementsByTagName("span");

查找 id="name" 的元素，然后查找 "name" 中的所有 <a> 元素:

var x=document.getElementById("name");
var y=x.getElementsByTagName("a");

三、改变HTML元素

DOM 允许 JavaScript 改变 HTML 元素的内容。

（1）改变输出流

JavaScript 能够创建动态的 HTML 内容：

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

输出内容：Thu Dec 27 2018 22:07:09 GMT+0800 (中国标准时间)

提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

（2）改变内容

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

语法

document.getElementById(id).innerHTML=new HTML

注意：不能通过类名class查找 HTML 元素

案例

<!DOCTYPE html>
<html>
<body>

<span id="text">Hello World!</span>

<script>
    document.getElementById("text").innerHTML="Hello everyone!";
</script>

</body>
</html>

另一种格式：

<!DOCTYPE html>
<html>
<body>

<span id="text">Hello World!</span>

<script>
   x=document.getElementById("text");
   x.innerHTML="Hello everyone!";
</script>

</body>
</html>

（3）改变属性

语法

document.getElementById(id).attribute=new value

案例

改变了<img> 元素的 src 属性：

<!DOCTYPE html>
<html>
<body>

<img id="image" src="1.png">

<script>
    document.getElementById("image").src="2.jpg";
</script>

</body>
</html>

四、改变HTML样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

语法

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

案例

<!DOCTYPE html>
<html>
<body>
<span id="text">Hello World!</span>

<script>
    document.getElementById("text").style.color="red";
</script>

</body>
</html>