JavaScript–DOM基础
一、DOM查找方法
1.document.getElementById()
语法：document.getElementById(“id”)
功能：返回对拥有指定 ID 的第一个对象的引用
返回值：DOM对象
说明：id为DOM元素上id属性的值
<body>
<div class="box" id="box">
元素
</div>
<script>
//获取id为box的这个元素
var box=document.getElementById("box");
console.log(box);
/*<div class="box" id="box">
元素
</div>*/
console.log(boxs);//null
</script>
</body>
2.document.getElementsByTagName()
语法：document.getElementsByTagName(“tag”)
功能：返回一个对所有tag标签引用的集合
返回值：数组
说明：tag为要获取的标签名称
<ul id="list1">
<li>前端开发</li>
<li>服务器端开发</li>
<li>UI设计</li>
</ul>
<ol>
<li>JavaScript原生</li>
<li>JavaScript框架</li>
</ol>
<script>
//获取页面中所有的li
var lis=document.getElementsByTagName("li");
console.log(lis.length);//5
//获取id为list1下的所有li
var lis2=document.getElementById("list1").getElementsByTagName("li");
console.log(lis2);//[li, li, li]
</script>
二、设置元素样式
语法：ele.style.styleName=styleValue
功能：设置ele元素的CSS样式
说明：
1、ele为要设置样式的DOM对象
2、styleName为要设置的样式名称(不能使用”-“连字符形式font-size，要使用驼峰命名形式fontSize)
3、styleValue为设置的样式值
<div class="box" id="box">
元素
</div>
<ul id="list">
<li>前端开发</li>
<li>服务器端开发</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");//返回的是一个数组，不是一个dom对象
//遍历每一个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='#ff0';
}else if(i==2){
lis[i].style.backgroundColor='#0f0';
}
}
</script>
三、innerHTML属性
语法：ele.innerHTML
功能：返回ele元素开始和结束标签之间的HTML
语法：ele.innerHTML=”html”
功能：设置ele元素开始和结束标签之间的HTML内容为html
<ul id="list">
<li><i>前端开发<i></li>
<li><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);
/*前端开发
服务器端开发
UI设计*/
/*<i>前端开发<i>
<b>服务器端开发<b>
UI设计*/
//lis[i].innerHTML=lis[i].innerHTML+'程序';
lis[i].innerHTML+='程序';
}
</script>
四、className属性
语法：ele.className
功能：返回ele元素的class属性
语法：ele.className=”cls”
功能：设置ele元素的class属性为cls
<head>
<meta charset="UTF-8">
<title></title>
<style>
.current{background:#ccc;color: #f00;}
.on{border-bottom: 1px solid #0f0;}
</style>
</head>
<body>
<div class="box" id="box">
元素
</div>
<ul id="list">
<li><i>前端开发<i></li>
<li><b>服务器端开发<b></li>
<li class="on">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";
lis[2].className="current"; //原来的被替换了
}
console.log(document.getElementById("box").className);//box
</script>
</body>
五、在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是要删除的属性名称
<body>
<p id="text" align="center" class="text" 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);//text
console.log(p.align);//center
console.log(p.class);//undefined
console.log(p.className);//text
console.log(p.getAttribute("data-type"));//title
console.log(user.type);//text 自带的属性可以直接获取 不需要用getAttribute
console.log(user.getAttribute("validate"));//true
//设置属性
//给p设置一个data-color的属性
p.setAttribute("data-color","red");
//给input设置一个isRed的属性
user.setAttribute("isRed","false");
//删除属性
//删除p上的align属性
p.removeAttribute("align");
</script>
</body>