DOM知识点

最新推荐文章于 2022-10-30 16:57:50 发布

小寒老师

最新推荐文章于 2022-10-30 16:57:50 发布

阅读量212

点赞数

分类专栏： Web基础知识文章标签： html javascript

本文链接：https://blog.csdn.net/HS_Levis/article/details/119827462

版权

7 篇文章 0 订阅

订阅专栏

1.什么是DOM？

DOM：Document Object Model

它是一个树状结构模型，方便访问和管理。在Web世界中，所有的Web网页都被称为Document。

例如：
<html>
 <head>
   <title> My webpage </title>
 </head>
 <body>
   <div id="content">
     <p> Hello!</p>
   </div>
 </body>
</html>

输出：
Hello!

这就是一个DOM的例子。DOM的Tree结构中，有几个重要概念。

1）根节点：<html>，总是以它<html>开头和结尾</html>

2）子节点：<head>，<body>都是子节点。子节点下面还有它们的子节点如<title>

3）叶子：内容，属性，事件都是叶子。如属性id="content"就被称为叶子

1）通过DOM的Tree结构，将Web与脚本/编程语言连接起来

2）Tree包含节点node（1或多），node包含DOM object

3）通过编程（DOM方法）可以访问Tree，对其进行样式、内容等修改，也可以添加Event

4）在JavaScript中，DOM实际上是一个类，它可以很容易地定义网页中的每个元素，以便以后可以修改。每当在浏览器中加载一个页面时，它的document对象就会被命名为" document "。你可以在这个对象上应用build-in方法来访问和修改HTML元素。

比如：

a) Attr Inteface: 可使用Element.getAttribute()方法，直接获取属性中的内容。

b) Text interface: Eelement.text()方法，获取Text中的内容

关注

专栏目录