JavaScript DOM基础

JavaScript的组成

完整的JavaScript是由ECMAScript(语法)、BrowserObjects(DOM、BOM)（特性）组成的。

1、基本的DOM查找方法

document.getElementById()

语法:document.getElementById("id")

功能:返回对拥有指定ID的第一个对象的引用

返回值：DOM对象

说明：id为DOM元素上id属性的值

document.getElementsByTagName()

语法：document.getElementsByTagName("tag")

功能：返回一个对所有tag标签引用的集合

返回值：数组

说明：tag为要获取的标签名称

2、设置DOM元素的样式

语法:ele.style.styleName=styleValue

功能：设置ele元素的CSS样式

说明：

1、ele为要设置样式的DOM对象

2、styleName为要设置的样式名称

3、styleValue为设置的样式值

3、DOM(innerHTML和className)

说明：

1、掌握innerHTML属性的应用

2、掌握className属性的应用

3、掌握如何在DOM元素上添加删除获取属性

innerHTML

语法：ele.innerHTML

功能：返回ele元素开始和结束标签之间的HTML

语法：ele.innerHTML="html"

功能：设置ele元素开始和结束标签之间的HTML内容为html

说明：innerHTML:获取和设置标签之间的文本和html内容

className

语法：ele.className

功能：返回ele元素的class属性

语法：ele.className="cls"

功能：设置ele元素的class属性为cls

4、DOM属性设置与获取

获取属性

语法：ele.getAttribute("attribute")

功能：获取ele元素的attribute属性

说明：

1、ele是要操作的dom对象

2、attribute是要获取的html属性（如id、type）

设置属性

语法：ele.setAttribute(“attribute”,value)

功能：在ele元素上设置属性

说明：

1、ele是要操作的dom对象

2、attribute为要设置的属性名称

3、value为设置的attribute属性的值

删除属性

语法：ele.removeAttribute("attribute")

功能：删除ele上的attribute属性

说明：

1、ele是要操作的dom对象

2、attribute是要删除的属性名称