《JavaScript DOM 编程艺术》第三章 DOM 文档对象模型

第三章 DOM 文档对象模型

本章内容：

• 节点的概念
• 5个常用DOM方法

DOM定义

D：document，把编写的网页转化为一个文档对象。

O：Object

JavaScript语言里的对象可以分为三类。

用户定义对象：程序员创建的对象。创建方式共3种类。

内建对象：内建在JavaScript的对象。如Array、Math、Date等。

宿主对象：由浏览器提供的对象。最基础的是window，代表浏览器本身。

M：model

 

DOM树

DOM把一份文档表示为一棵树。

html为根元素，代表整个文档。head、body为分支，互不影响。

元素节点：

文本节点：文本节点包含着元素节点内部，并不是所有元素节点都有文本节点。

属性节点：title属性、class属性、id属性

 

DOM的五个方法：获取元素、获取和设置属性

1、getElementById

返回一个与给定id属性值的元素节点对应的对象。是document对象特有的函数。

只有一个参数：要获得的元素的id属性的值，id值必须放在单引号或双引号。

2、getElementsByTagName

获取没有id属性的对象。返回一个对象数组。

只有一个参数：参数是标签的名字。getElementsByTagName()允许将一个通配符("*")作为它的参数，文档里每个元素都将在这个函数所返回的数组里。

3、getElementsByClassName

通过class类名访问元素。返回一个数组，包含某个类名的所有元素。

只有一个参数：参数是类名。

4、getAttribute

只有一个参数：要查询的属性的名字。

不属于document对象，只能通过元素节点对象调用。

5、setAttribute

只能用于元素节点。

object.setAttribute(attribute,value);
 

文档中每个元素节点都是一个对象。

getElementById:返回一个对象，对应文档里一个特定的元素节点。

getElementsByTagName和getElementsByClassName：返回一个对象数组，对应文档里一组特定的元素节点。

 

DOM工作模式：先加载文档静态内容，再动态刷新，动态刷新不影响文档的静态内容。

DOM的优势：他可以对页面内容刷新，却不需要在浏览器里刷新页面。
 

 

 

 

转载于:https://www.cnblogs.com/iriswang/p/11084618.html