JavaScript笔记5-JS DOM基础

1.DOM查找方法
1）getElementById()
语法: document.getElementById( "id" )
功能:返回对拥有指定ID的第一个对象的引用
返回值: DOM对象
说明: id为DOM元素上id属性的值
2）document.getElementsByTagName()
语法: document.getElementsByTagName( "tag" )
功能:返回一个对所有tag标签引用的集合
返回值:数组
说明: tag为要获取的标签名称
例：获取id为list1的ul下的li：
document.getElementById( "list1" ).getElementsByTagName( "li" )
2.设置DOM对象的元素样式
语法: ele.style.styleName=styleValue
功能:设置ele元素的CSS样式
说明:ele为要设置样式的DOM对象；styleName为要设置的样式名称（不能使用“-”连字符形式font-size，使用驼峰命名形式fontSize）；styleValue为设置的样式值。
例：设置id为box的元素的文字颜色和加粗：

为ul下的每一个li设置样式。取出来的是数组而不是DOM对象，所以不能直接设置元素样式，要遍历

3.innerHTML
语法: ele.innerHTML
功能:返回ele元素开始和结束标签之间的HTML
语法: ele.innerHTML=" html”
功能:设置ele元素开始和结束标签之间的HTML内容为html
4.className
语法: ele.className
功能:返回ele元素所有的class属性
语法: ele.className=" cls "
功能:设置ele元素的class属性为cls，会替换原有的class属性
5.获取属性
语法: 
1）DOM对象.属性
2）ele.getAttribute( "attribute" )
功能:获取ele元素的自定义的属性
说明:ele是要操作的dom对象；attribute是要获取的html属性
举例：
<p id="text" class="text" data-type="tittle">文本</p>
则p.id=text  p.className=text=p.getAttribute("class")
p.getAttribute("data-type")=tittle
6.设置属性
ele.setAttribute()
7.删除属性：
语法: ele.removeAttribute( "attribute" )
功能:删除ele,上的attribute属性
说明:ele是要操作的dom对象；attribute是要删除的属性名称