JavaScript（六）

咕噜噜爱喝水

于 2022-09-24 13:55:09 发布

阅读量172

点赞数

文章标签：简单工厂模式 javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_73646899/article/details/127024125

版权

本文介绍了DOM对象的概念，包括DOM对象简介、HTML元素的节点树结构以及DOM对象的继承关系。详细阐述了如何利用DOM进行HTML元素操作，如获取、设置元素内容，并列举了document对象的方法和属性，如getElementById、innerHTML等。

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

文档对象DOM

一、DOM对象简介

什么是DOM对象

DOM(Document Object Model 文档对象模型)可以完成HTML和XML文档的操作，在JavaScript中利用DOM操作HTML和CSS样式是最常用的样式之一。DOM对JavaScript是一种可操作HTML文档得重要手段。利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。

DOM HTML 节点树

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
1、整个文档是一个文档节点
2、每个 HTML 元素是元素节点
3、HTML 元素内的文本是文本节点
4、每个 HTML 属性是属性节点
5、注释是注释节点
下面以<head>、<body>、<html>节点为例进行介绍
（1）根节点：<html>标签是整个文档的根节点，有且仅有一个。
（2）子节点：指的是某个节点的下级节点，例如·<head>和<body>节点是<html>节点的子节点。
（3）父节点：指的是某个节点的上级节点，例如<html>是<head>和body的父节点
（4）兄弟节点：两个节点同属于一个父节点，例如<head>和<body>互为兄弟节点

一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>测试</title>
   </head>
   <body>
       <a herf='#'>链接</a>
       <p>段落.......</p>
   </body>
</html>

DOM对象的继承关系

在JavaScript中要对网页中的元素进行操作，可以利用document对象的getElementById()方法实现，下列代码test表示要操作的对象，test对象是HTMLDivElement构造函数的实例。通过控制台查看对象的原型，可以得到DOM对象之间的继承关系。

<div id="test"></div>
       <script type="text/javascript">
           var = test ; test=document.getElementById('test');
           console.log(test);
           console.log(test.__proto__);
       </script>

document对象和Element对象均继承Node对象(节点对象)，是两种不同类型的节点对象，不仅能够使用Node对象的一系列属性和方法完成节点操作，也可以使用特有的属性和方法完成不同类型节点的操作。