@[TOC](这里写目录标题)
# 一、DOM对象简介
## 1、DOM：文档对象模型（Document Object Model，简称DOM）
一、DOM对象简介
1、DOM：文档对象模型（Document Object Model，简称DOM）
2、DOM HTML节点树：指的是DOM中为操作HTML文档提供的属性和方法，一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分 。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<a href="#">链接</a>
<p>段落...</p>
</body>
</html>HTML文档根据节点作用，分为标签节点、文本节点、属性节点和注释节点。
各节点之间的关系，又可分为以下几个方面：
根节点：<html>标签是整个文档的根节点，有且仅由一个。
子节点：指的是某一个节点的下级节点。
父节点：指的是某一个节点的上级节点。
兄弟节点：两个节点同属于一个父节点。
3、DOM对象的继承关系
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="Tom"></div>
<script>
var Tom = document.getElementById('Tom');
console.log(Tom); // 输出结果：<div id="Tom"></div>
console.log(Tom.__proto__); // 输出结果：HTMLDivElement { …… }
</script>
</body>
</html>从上面的代码中我们可以总结出以下三点：
（1）document和Element是两种不同类型的节点（Node）对象。
（2）它们不仅能够使用Node对象的一系列属性和方法完成节点操作。
（3）也可以使用特有的属性和方法完成不同类型节点的操作。
除了document和Element对象，还有其他几种类型的节点对象也继承Node对象，如文本（Text）、注释（Comment）等。
| Node.属性名 |
值 |
相应的对象 |
说明 |
| ELEMEN_NODE |
1 |
Element |
元素节点 |
| ATTRIBUTE_NODE |
2 |
Attr |
属性节点 |
| TEXT_NODE |
3 |
Text |
文本节点 |
| COMMENT_NODE |
8 |
Comment |
注释节点 |
| DOCUMENT_NODE |
9 |
Document |
文档节点 |
#二、HTML元素操作
##1、获取操作的元素（document对象的方法和属性、Element对象的方法和属性）
（1）document对象的方法和属性
document对象提供了一些用于查找元素的方法，利用这些方法可以根据元素的id、name和class属性以及标签名称的方式获取操作的元素。
| 方法 |
说明 |
| document.getElementById() |
返回对拥有指定id的第一个对象的引用 |
| docum |
最低0.47元/天 解锁文章
1134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
