<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box" id="box"> 元素1 </div> <div class="box" id="box"> 元素2 </div> <ul id="list1"> <li>前端开发</li> <li>服务器端开发</li> <li>UI设计</li> </ul> <ol> <li>javascript原生</li> <li>javascript框架</li> </ol> <script type="text/javascript"> //获取id为box的这个元素 var box=document.getElementById("box"); console.log(box); //获取页面中所有的li var lis=document.getElementsByTagName("li"); console.log(lis.length); //获取id为list1下的所有li var list2=document.getElementById("list1").getElementsByTagName("li"); console.log(list2.length); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box" id="box"> 元素1 </div> <ul id="list"> <li>前端开发</li> <li>服务器端开发</li> <li>UI设计</li> </ul> <script type="text/javascript"> //获取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> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .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 type="text/javascript"> var lis=document.getElementById("list").getElementsByTagName("li"); //遍历每一个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>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .on{border-bottom: 1px solid #0f0;} .current{background: #ccc;color: #f00;} </style> </head> <body> <p id="text" class="text" align="center" data-type="title">文本</p> <input type="text" name="user" value="user" id="user" valiate="true"> <script type="text/javascript"> var p=document.getElementById("text"); var user=document.getElementById("user"); //null console.log(p.getAttribute("class")); //p.className console.log(user.getAttribute("valiate")); //给p设置一个data-color的属性 p.setAttribute("data-color","red"); //给input设置一个isRead的属性 user.setAttribute("isRead","false"); //删除p上的align属性 p.removeAttribute("align"); </script> </body> </html>