《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