DOM查找方法
1.ById()
语法:doucument.getElementById("id")
功能:返回对拥有指定ID的第一个对象的引用
返回值:DOM对象
说明:id为DOM元素上id属性的值
2.ByTagName
语法:document.getElementsBtTayName("tay")
功能:返回一个对所有tag标签引用的集合
返回值:数组
说明:tag为要获取的标签的名称
<body>
<div id='s1'>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
</div>
<script type="text/javascript">
var box = document.getElementById('s1');
var lis = document.getElementsByTagName('li');
console.log(box);
console.log(lis);
</script>
</body>
给设置元素样式
语法:ele.style.styleName=styleValue
功能:设置ele元素的Css样式
说明:
1.ele为要设置的样式的DOM对象
2.styleName为要设置的样式名称
3.styleValue为设置样式的值
<script type="text/javascript">
var box = document.getElementById('s1');
var lis = document.getElementsByTagName('li');
// box.style.color='aquamarine';
for(var a=0,b=lis.length;a<b;a++){
lis[a].style.color='chartreuse';
}
</script>
第二部分
1.innerHTML
语法:ele.innerHTML
功能:返回ele元素开始和结束标签之间的HTML
语法:ele.innerHTML="html"
功能:设置ele元素开始和结束标签之间的HTML内容问哦html
2.className
语法:ele.className
功能:返回ele元素的class属性
语法ele.className="cls"
功能:设置ele元素的class属性为cls
编程练习
<!DOCTYPE html>
<html>
<head lang="cn">
<meta charset="utf-8" />
<title>BTS</title>
<style type="text/css">
.red{color:red}
</style>
</head>
<body>
<h3>古文推荐</h3>
<ul>
<li>西游记</li>
<li>红楼梦</li>
<li>三国演义</li>
<li>聊斋志异</li>
<li>论语</li>
<li>大学</li>
<li>孟子</li>
<li>中庸</li>
</ul>
<script type="text/javascript">
var lis = document.getElementsByTagName('li');
console.log(lis);
for(var a=0;a<lis.length;a++){
// console.log('test');
if(a%2 ==0){
lis[a].className='red';
}
lis[a].innerHTML='第'+(a+1)+"名:"+lis[a].innerHTML;
}
</script>
</body>
</html>
获取属性
语法:ele.getAttribute("attribute")
功能:获取ele元素的attribute属性
说明:
1.ele是要操作的dom对象
2.attribbute是要获取的html属性(如:id,type)
设置属性
语法:ele.setAttribute("attribute",value)
功能:在ele元素上设置属性
说明:
1.ele是要操作的dom对象
2.attribute为要设置的属性名称
3.value为设置的属性
删除属性
语法:ele.removeAttribute("attribute")
功能:删除ele上的attribute属性
说明:
1.ele是dom对象
2.attribute为要删除的属性名称