DOM基本的查找方法
document.getElementById()
功能:返回对拥有指定ID的第一个对象的引用
返回值:DOM对象
说明:id为DOM元素上id属性的值
document.getElementsByTagName()
功能:返回一个对所有tag标签引用的集合
返回值:数组
说明:tag为要获取的标签名称。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box" id="box">
元素
</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);
//获取id为list1下的所有li
var lis2=document.getElementById("list1").getElementsByTagName("li");
console.log(lis2);
</script>
</body>
</html>
如何给元素的设置样式
功能:设置ele元素的CSS样式
语法:ele.style.styleName=styleValue
说明:
1.ele为要设置样式的DOM对象
2.styleName为要设置的样式名称
3.styleValue为设置的样式值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box" id="box">
元素
</div>
<ul id="list1">
<li>前端开发</li>
<li>服务器端开发</li>
<li>UI设计</li>
</ul>
<script>
//获取id为box的元素
var box =document.getElementById("box");
//设置id为box的元素颜色,属性使用连字符的复合形式必须要转换成驼峰形式
box.style.color='#F5704F';
box.style.fontWeight='bold';
//获取页面中所有的li
var lis=document.getElementById("list1").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>
</body>
</html>
innerHTML属性应用
功能:返回els元素开始和结束标签之间的HTML
语法:ele.innerHTML
功能:设置ele元素开始和结束标签之间的HTML内容为html
ele.innerHTML="html"
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="list1">
<li><i>前端开发</i></li>
<li><b>服务器端开发</b></li>
<li>UI设计</li>
</ul>
<script>
//获取页面中所有的li
var lis=document.getElementById("list1").getElementsByTagName("li");
//遍历每个li
for(var i=0,len=lis.length;i<len;i++){
lis[i].innerHTML+='程序';
console.log(lis[i].innerHTML);
}
</script>
</body>
</html>
className属性应用
功能:返回ele元素的class属性
语法:ele.className
功能:设置ele元素的class属性为cls
语法:ele.className=’cls’
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.on{
border-bottom: 1px solid #0f0;
}
.current{
background: :#ccc;
color: #f00;
}
</style>
</head>
<body>
<ul id="list1" class="listClass">
<li><i>前端开发</i></li>
<li class="on"><b>服务器端开发</b></li>
<li>UI设计</li>
</ul>
<script>
//获取页面中所有的li
var lis=document.getElementById("list1").getElementsByTagName("li");
//遍历每个li
for(var i=0,len=lis.length;i<len;i++){
lis[i].innerHTML+='程序';
console.log(lis[i].innerHTML);
lis[1].className="current";
}
console.log(document.getElementById("list1").className)
</script>
</body>
</html>
说明:动态添加class替换元素本身的class
DOM元素获取属性或添加删除属性
获取属性:
语法:ele.getAttribute("attribute")
功能:获取ele元素的attribute属性
说明:1、ele是要操作的dom对象 2、attribute是要获取的html属性(如:id、type)
设置属性:
语法:ele.setAttribute(“attribute”,value)
功能:在ele元素上设置属性
说明:1、ele是要操作的dom对象 2、attribute为要设置的属性名称 3、value为设置的attribute属性的值
删除属性:
语法:ele.removeAttribute(“attribute”)
功能:删除ele上的attribute属性
说明:1、ele是要操作的dom对象 2、attribute是要删除的属性名称
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="text" class="text1" align="center" curData= "title">文本</p>
<input type="text" name="user" value="user" id="user" validate="true"/>
<script>
var p=document.getElementById("text");
//标签本身就具有的属性,class除外
console.log(p.id);
console.log(p.align);
console.log(p.class);//获取不到
console.log(p.curData);//获取不到
//使用getAttribute
console.log(p.getAttribute("class"));//等价于p.className
console.log(p.getAttribute("curData"));
var user=document.getElementById("user");//null
console.log(user.type);
console.log(user.name);
console.log(user.validate);//undefined
console.log(user.getAttribute('validate'));//true
//添加属性
//给p设置一个data-color的属性
p.setAttribute("data-color","red");
//给input设置一个isRead的属性
user.setAttribute("isRead","false");
//删除属性
//shanc
//删除p上的align属性
p.removeAttribute("align");
</script>
</body>
</html>