获取元素
<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>
设置样式
<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="#ccc";
}else if(i==1){
lis[i].style.backgroundColor="#666";
}else if(i==2){
lis[i].style.backgroundColor="#999";
}else{
lis[i].style.backgroundColor="#333";
}
}
</script>
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>
获取,设置,删除属性
<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");
console.log(p.id);
// console.log(p.data-type); 不能获取,因为data-type不是p的默认属性,需要用getAttribute获取
console.log(p.getAttribute("data-type"));
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>