JavaScript交互式网页设计 • 【第4章 JavaScript文档对象模型】

JavaScript交互式网页设计 • 【第4章 JavaScript文档对象模型】

4.1 文档对象模型简介及属性

4.1.1 文档对象模型概述

DOM（Document Object Model）是文档对象模型的简称
DOM 把HTML 文档看成由元素、属性和文本组成的一棵倒立的树

可以把HTML 文档中的每个成分看成一个节点，所以 DOM 的核心操作是查看节点、创建节点、增加节点、删除节点以及替换节点
整个HTML 文档在DOM 中是一个document 对象

属性	含义
bgColor	页面的背景颜色
fgColor	文本的前景颜色
title	页面标题

4.2 document 对象查找 HTML 元素

4.2.1 通过 id 查找 HTML 元素

使用 document.getElementById(id) 方法可以通过 id 获取 HTML 页面的元素

innerHTML属性是一个字符串，用来设置或获取位于对象起始和结束标签之间的HTML内容

4.2.2 通过 name 查找 HTML 元素

• 使用 document.getElementsByName(name) 方法可以通过name获取页面元素
• 参数 name 为必选项，为字符串类型
• 返回值为数组对象，如果无符合条件的对象，则返回空数组

4.2.3 通过标签名查找 HTML 元素

document.getElementsByTagName(tagname)
参数 tagname 为必选项，为字符串类型
返回值是指定标签名的对象的集合，如果无符合条件的对象，则返回空数组

4.2.4 通过类名查找 HTML 元素

document.getElementsByClassName(classname)
参数 classname为必选项，是字符串类型，指需要获取的元素类名
参数 classname为必选项，是字符串类型，指需要获取的元素类名

可以使用NodeList对象的length属性来确定指定类名的元素个数，并循环各个元素来获取需要的元素

4.3 document 对象改变 HTML

4.3.1 使用document对象改变HTML输出流

JavaScript 中的 document 对象能够动态地创建 HTML 内容。document.write() 方法可用于直接向 HTML 的输出流写内容
不要在文档加载完成之后使用document.write()方法，这样做会覆盖该文档中所有的内容

4.3.2 使用document对象改变HTML内容

修改 HTML 内容最简单的方法是使用 innerHTML 属性
语法：

document.getElementById(id).innerHTML= 新的 HTML 内容

4.3.3 使用document对象改变HTML样式

改变 HTML 元素的样式
语法：

document.getElementById(id).innerHTML= 新的 HTML 内容

4.4 DOM 节点操作

4.4.1 节点信息

可以根据层级关系来查找节点，在 DOM 中每个节点都具有访问其他节点的属性

属性	描述
parentNode	当前节点的父节点引用
childNodes	当前节点的所有子节点
firstChild	当前节点的第一个子节点
lastChild	当前节点的最后一个子节点
previousSibling	当前节点的前一个兄弟节点
nextSibling	当前节点的后一个兄弟节点

childNodes 属性，它返回当前节点的所有子节点，其中子节点包括元素节点、属性节点和文本节点

通过节点对象的 nodeType 属性可以判断属于哪种类型的节点

当 nodeType 是 1 时就是元素节点；nodeType 为 2 时是属性节点；nodeType 为 3 时则是文本节点

4.4.2 动态添加和删除节点

添加节点

使用 createElement 创建节点
使用 appendChild(node) 方法将指定的节点追加到现有节点的末尾

删除节点

remove()
 removeChild

使用 DOM 删除元素时，需要清楚地知道要删除元素的父元素