【知识点】
1、掌握基本的DOM查找方法
document.getElementById()
document.getElementsByTagName()
2、掌握如何设置DOM元素的样式
一、DOM查找方法
【语法】：
document.getElementById("id")
【功能】：
返回对拥有指定ID的第一个对象的引用
【返回值】：DOM对象
【说明】：id为DOOM元素上id属性的值
二、DOM查找方法
【语法】：
document.getElementsByTagName("tag")
【功能】：
返回一个对所有tag标签引用的集合
【返回值】：数组
【说明】：tag为要获取的标签名称
【DOM查找方法·案例】：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="box" id="box">
元素1
</div>
<ul id="list1">
<li>前端开发</li>
<li>服务器端开发</li>
<li>UI设计</li>
</ul>
<ol>
<li>javaScript原生</li>
<li>javaScript框架</li>
</ol>
<script>
// 获取id为box的这个元素
var box=document.getElementById("box");
console.log(box);
// 获取页面中所有的li
var lis=document.getElementsByTagName("li");
console.log(lis.length);
// 获取id为list1下的所有的li
var lis2=document.getElementById("list1").getElementsByTagName("li");
console.log(lis2.length);
</script>
</body>
</html>
【结果】：
三、设置元素样式
【语法】：
ele.style.styleName=styleValue
【功能】：
设置ele元素的CSS样式
【说明】：
1、ele为要设置样式的DOM对象
2、styleName为要设置的样式名称
3、styleValue为设置的样式值
【设置元素样式·案例】
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="box" id="box">
元素1
</div>
<ul id="list">
<li>前端开发</li>
<li>服务器端开发</li>
<li>UI设计</li>
<li>UI设计</li>
<li>UI设计</li>
</ul>
<script>
// 设置id为box的这个元素的文字颜色,属性是减号连接的复合形式时
// 必需要转换为驼峰形式
var box=document.getElementById("box");
box.style.color='#f00';
box.style.fontWeight="bold";
var lis=document.getElementById("list").getElementsByTagName("li");
// 遍历每一个li
for(var i=0,len=lis.length;i<len;i++){
lis[i].style.color='#00f';
if(i==0){
lis[i].style.backgroundColor="purple";
}else if(i==1){
lis[i].style.backgroundColor="blue";
}else if(i==2){
lis[i].style.backgroundColor="yellow";
}else{
lis[i].style.backgroundColor="gray";
}
}
</script>
</body>
</html>
【结果】：
【知识点】：
1、掌握innerHTML属性的应用
2、掌握className属性的应用
3、掌握如何在DOM元素上添加删除获取属性
一、innerHTML
【语法】：
ele.innerHTML
【功能】：
返回ele元素开始和结束标签之间的HTML
【语法】：
ele.innerHTML="html"
【功能】：
设置ele元素开始和结束标签之间的HTML内容为html
二、className
【语法】：
ele.className
【功能】：
返回ele元素的class属性
【语法】：
ele.className="cls"
【功能】：
设置ele元素的class属性为cls
【innerHTML和className案例】
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.on{border-bottom:1px solid #0f0;}
.current{background:#ccc;color:#f00;}
</style>
</head>
<body>
<div class="box" id="box">
元素1
</div>
<ul id="list">
<li><i>前端开发</i></li>
<li class="on"><b>服务器端开发</b></li>
<li>UI设计</li>
</ul>
<script>
var lis=document.getElementById("list").getElementsByTagName("li");
for(var i=0,len=lis.length;i<len;i++){
console.log(lis[i].innerHTML);
lis[i].innerHTML+='程序';
lis[1].className="current";
}
console.log(document.getElementById("box").className);
</script>
</body>
</html>
【结果】：
三、获取属性
【语法】：
ele.getAttribute("attribute")
【功能】：
获取ele元素的attribute属性
【说明】：
1、ele是要操作的dom对象
2、attribute是要获取的html属性
四、设置属性
【语法】：
ele.setAttribute("attribute",value)
【功能】：
在ele元素上设置属性
【说明】：
1、ele是要操作的dom对象
2、attribute为要设置的属性名称
3、value为设置的attribute属性的值
五、删除属性
【语法】：
ele.removeAttribute("attribute")
【功能】：
删除ele上的attribute属性
【说明】：
1、ele是要操作的dom对象
2、attribute是要删除的属性名称
【getAttribute和setAttribute·案例】
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.on{border-bottom:1px solid #0f0;}
.current{background:#ccc;color:#f00;}
</style>
</head>
<body>
<p id="text" class="text" align="center" data-type="title">文本</p>
<input type="text" name="user" value="user" id="user" validate="true">
<script>
var p=document.getElementById("text");
var user=document.getElementById("user"); // null
console.log(p.getAttribute("class")); //p.className
console.log(user.getAttribute("validate"));
// 给p设置一个data-color的属性
p.setAttribute("data-color","red");
// 给input设置一个isRead的属性
user.setAttribute("isRead","false");
// 删除p上的align属性
p.removeAttribute("align");
</script>
</body>
</html>
【结果】：
