JS基础编程课件10_JavaScript的DOM操作（一）.pdf

JavaScript的DOM操作

（一）

王红元coderwhy

目录

1什么是DOM？

content

2认识DOMTree

3DOM的整体结构

4节点、元素导航

5获取元素的方法

6Node节点的属性

coderwhy认识DOM和BOM

◼前面我们花了很多时间学习JavaScript的基本语法，但是这些基本语法，但是这些语法好像和做网页没有什么关系，和前面学习

的HTML、CSS也没有什么关系呢？

这是因为我们前面学习的部分属于ECMAScript，也就是JavaScript本身的语法部分；

除了语法部分之外，我们还需要学习浏览器提供给我们开发者的DOM、BOM相关的API才能对页面、浏览器进行操作；

◼前面我们学习了一个window的全局对象，window上事实上就包含了这些内容：

我们已经学习了JavaScript语法部分的Object、Array、Date等；

另外还有DOM、BOM部分；

◼DOM：文档对象模型（DocumentObjectModel）

简称DOM，将页面所有的内容表示为可以修改的对象；

◼BOM：浏览器对象模型（BrowserObjectModel）

简称BOM，由浏览器提供的用于处理文档（document）之外的所有内容的其他对象；

比如navigator、location、history等对象；

coderwhy深入理解DOM

◼浏览器会对我们编写的HTML、CSS进行渲染，同时它又要考虑我们可能会通过JavaScript来对其进行操作：

于是浏览器将我们编写在HTML中的每一个元素（Element）都抽象成了一个个对象；

所有这些对象都可以通过JavaScript来对其进行访问，那么我们就可以通过JavaScript来操作页面；

所以，我们将这个抽象过程称之为文档对象模型（DocumentObjectModel）；

◼整个文档被抽象到document对象中：

比如document.documentElement对应的是html元素；

比如document.body对应的是body元素；

比如document.head对应的是head元素；

◼下面的一行代码可以让整个页面变成红色：

◼所以我们学习DOM，就是在学习如何通过JavaScript对文档进行操作的；

coderwhyDOMTree的理解

◼一个页面不只是有html、head、body元素，也包括很多的子元素：

在html结构中，最终会形成一个树结构；

在抽象成DOM对象的时候，它们也会形成一个树结构，我们称之为DOMTree；

coderwhyDOM的学习顺序

◼DOM相关的API非常多，我们会通过如下顺序来学习：

◼1.DOM元素之间的关系

◼2.获取DOM元素

◼3.DOM节点的type、tag、content

◼4.DOM节点的attributes、properies

◼5.DOM节点的创建、插入、克隆、删除

◼6.DOM节点的样式、类

◼7.DOM元素/window的大小、滚动、坐标

◼整体会按照这个顺序来学习，也会额外补充其他的知识。

coderwhyDOM的继承关系图

◼DOM相当于是JavaScript和HTML、CSS之间的桥梁

通过浏览器提供给我们的DOMAPI，我们可以对元素以及其中的内容做任何事情；

◼类型之间有如下的继承关系：

co