JavaScript -- DOM
获取标签
<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>
