获取标签
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<div class="box" id="box">元素1</div>
<ui id="list1">
<li>后端</li>
<li>前端</li>
<li>测试</li>
</ui>
<ol>
<li>java</li>
<li>python</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. getAttribute(" attribute")
功能:获取ele元素的 attribute属性
说明:
1、ele是要操作的dom对象
2、 attribute是要获取的html属性(如:id、tpye)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<p id="text" class="text" align="center" dtype="title">文本</p>
<input type="text" name="user" value="user1" id="user" />
<script>
var p = document.getElementById('text');
console.log(p.id);
console.log(p.className);
console.log(p.dtype);
</script>
</body>
</html>
结果：
text
text
undefined
如果属性是内置的，像id，type（class要写成className）这些属性，可以直接通过标签.属性就可以获取到，如果不是内置的，这样写返回的值是undefined，想要获取自定义的属性，就要用到getAttribute了
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<p id="text" class="text1" align="center" dtype="title">文本</p>
<input type="text" name="user" value="user1" id="user" />
<script>
var p = document.getElementById('text');
console.log(p.getAttribute('id'));
console.log(p.getAttribute('class'));
console.log(p.getAttribute('dtype'));
</script>
</body>
</html>
结果：
text
text1
title
设置属性
语法：
ele.setAttribute("attribute","value")
功能：在ele上设置属性
说明：
1.ele是要操作的dom对象
2.attribute为要设置的属性名称
3.value为设置的attribute属性的值
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<p id="text" class="text1" align="center" dtype="title">文本</p>
<input type="text" name="user" value="user1" id="user" />
<script>
var p = document.getElementById('text');
// 给p标签设置一个data-color的属性
p.setAttribute('data-color','red');
</script>
</body>
</html>
删除属性
语法：
ele.removeAttribute("attribute")
功能：删除ele上的attribute属性
说明：
1.ele是要操作的dom对象
2.attribute为要删除的属性名称
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<p id="text" class="text1" align="center" dtype="title">文本</p>
<script>
var p = document.getElementById('text');
// 删除p标签的align属性
p.removeAttribute('align');
</script>
</body>
</html>
设置元素样式
在之前的学习中，我们通过css给标签设置样式，比如颜色，背景色等等。我们也可以使用JS来给标签设置样式
语法：
ele.style.styleName=styleValue
功能：
设置ele元素的CSS样式
说明：
1.ele为要设置样式的DOM对象
2.styleName为要设置的样式名称
3.styleValue为要设置的样式值
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<div class="box" id="box">元素1</div>
<ui id="list1">
<li>后端</li>
<li>前端</li>
<li>测试</li>
</ui>
<ol>
<li>java</li>
<li>python</li>
</ol>
<script>
//设置id为box的这个元素的文字颜色，属性如果是-连接的复合形式时
//必须要转换成驼峰形式
var box = document.getElementById('box');
box.style.color='red';
box.style.fontWeight='bold';
var lis = document.getElementById('list1').getElementsByTagName('li');
//遍历每一个li
for (var i = 0,len = lis.length;i<len;i++){
lis[i].style.color='blue';
if (i==0){
lis[i].style.background='#ccc';
}else if(i==1){
lis[i].style.background='#666';
}else if(i==2){
lis[i].style.background='#999';
}else {
lis[i].style.background='#333';
}
}
</script>
</body>
</html>
innerHTML
语法：
ele.innerHTML
功能：
返回ele元素开始和结束标签之间的内容（文本或html标签都可以）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<div class="box" id="box">元素1</div>
<ui id="list1">
<li><i>后端</i></li>
<li>前端</li>
<li>测试</li>
</ui>
<ol>
<li>java</li>
<li>python</li>
</ol>
<script>
var lis = document.getElementById('list1').getElementsByTagName('li');
//遍历每一个li
for (var i = 0,len = lis.length;i<len;i++){
console.log(lis[i].innerHTML);
}
</script>
</body>
</html>
结果：
<i>后端</i>
前端
测试
语法：
ele.innerHTML=‘html’
功能：
设置ele元素开始和结束标签之间的内容
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<div class="box" id="box">元素1</div>
<ui id="list1">
<li><i>后端</i></li>
<li>前端</li>
<li>测试</li>
</ui>
<ol>
<li>java</li>
<li>python</li>
</ol>
<script>
var lis = document.getElementById('list1').getElementsByTagName('li');
//遍历每一个li
for (var i = 0,len = lis.length;i<len;i++){
lis[i].innerHTML=lis[i].innerHTML+'开发';
}
</script>
</body>
</html>