【JS学习笔记】05 JS HTML DOM

最新推荐文章于 2022-08-25 18:57:12 发布

绿叶儿

最新推荐文章于 2022-08-25 18:57:12 发布

阅读量452

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/chengzhangbiji/article/details/41490065

版权

21 篇文章 0 订阅

订阅专栏

一、DOM简介

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

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

HTML DOM 模型被构造为对象的树。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

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

本例查找 id="intro" 元素：

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

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

如果未找到该元素，则 x 将包含 null。

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

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=new HTML

本例改变了 <p> 元素的内容：

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

如需改变 HTML 元素的样式，请使用这个语法：

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

关注