js操作dom
阿新 • • 發佈：2018-12-21
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM元素操作</title> <style> div{ width:100px; height:100px; background-color:yellow; } </style> </head> <body> <!--onxxx='':on的意思就是監聽，onclick監聽點選事件，onmove監聽移動事件，只要發生這個事件，就會執行相應的操作。--> <div onclick="myclick()"></div> <a href="https://www.baidu.com" id="bd" class="baidu">百度</a> <script> function myclick(){ alert('你點選div了'); var a=document.getElementById('bd'); a.style.fontSize='10px'; } //js如何操作dom元素：dom元素指的就是標籤，只不過每一個標籤在js中就變成了一個dom物件，所以js操作標籤就是在操作這個標籤對應的dom物件。 //通過id獲取一個dom元素 //document:這個物件只存在於js程式碼中，它是預設生成的，代表了整個頁面標籤結構的物件。（文件樹物件） var a=document.getElementById('bd'); //獲取a標籤所有的屬性 attrs=a.attributes; console.log(attrs); for (var i=0;i<attrs.length;i++){ //以i為索引，從屬性集合attrs中遍歷出每一個屬性 var att=attrs[i]; console.log(att.name,'=',att.value) } //獲取一個dom元素的一個屬性,如果屬性值不存在的話，返回null。 var href=a.getAttribute('href'); console.log(href); //給一個dom設定/新增屬性 a.setAttribute('name','百度'); //給一個dom刪除屬性 a.removeAttribute('name'); //判斷一個dom元素是否擁有一個屬性 //alert(a.hasAttribute('name')); //js操作class屬性 //className:會直接覆蓋原有的class屬性值 a.className='baidu.com'; //新增一個新的class值，不會覆蓋原有的class的值 a.classList.add('bd'); a.classList.add('bbbbd'); //從classList移除一個class的值 a.classList.remove('bbbbd'); //判斷classList中是否擁有某一個class屬性值 alert(a.classList.contains('bd')); //得到的結果是列表 //document.getElementsByClassName(); //document.getElementsByName(); //document.getElementsByTagName(); //修改dom元素的屬性 a.style.color='black'; //font-size a.style.fontSize='50px'; </script> </body> </html>