02 JavaScript语言进阶-DOM基础

DOM基础

一、DOM查找方法

1.document.getElementById()

语法 ：

document.getElementById(“id”)； 

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

id为DOM元素上id属性的值

2.document.getElementsByTagName()

语法：

document.getElementsByTagName(“tag”) 

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

tag为要获取的标签名称

二、设置元素样式

语法：

ele.style.styleName=styleValue  

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

1、ele为要设置样式的DOM对象
2、styleName为要设置的样式名称(不能使用”-“连字符形式font-size，要使用驼峰命名形式fontSize)
3、styleValue为设置的样式值

三、innerHTML属性

语法：

ele.innerHTML 

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

语法：

ele.innerHTML=”html” 

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

四、在DOM元素上添加删除获取属性

1.获取属性

语法：

ele.getAttribute(“attribute”)； 

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

1、ele是要操作的dom对象
2、attribute是要获取的html属性(如：id、type)

2.设置属性

语法：

ele.setAttribute(“attribute”,value)；

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

1、ele是要操作的dom对象
2、attribute为要设置的属性名称
3、value为设置的attribute属性的值

3.删除属性

语法：

ele.removeAttribute(“attribute”)； 

功能：删除ele上的attribute属性

1、ele是要操作的dom对象
2、attribute是要删除的属性名称

注：该内容借鉴于 CSDN论坛的CSDN_HCX作者文章，附原作者文章地址：
https://blog.csdn.net/CSDN_GIA/article/details/78973947