操作DOM

1.獲取（標籤）元素     （在css中叫標籤，在js中叫元素）

1     /*
2     const  let  var  都可以，用const宣告的是不可修改的，一般不會修改元素。所以可以用const
3     可以在document下獲取，也可以在元素下獲取
4     */
5     const name1 = document.getElementsByClassName('ele');//通過 class 獲取一個或多個元素
6     const name2 = document.getElementsByTagName('ele');//
 
通過 標籤 獲取一個或多個元素
7     const name3 = document.getElementById('ele');//通 id 獲取元素 id 是唯一的。
8     const box = document.querySelector('ele|.ele|#ele');//通過 （標籤|class|id） 來獲取一個元素
9     const eles = box.querySelectorAll('ele|.ele|#ele');//在box標籤下獲取一組元素

2.  getAttribute   獲取行間自定義屬性

 1     //<div id="box" index="1" xiaopipi="皮皮蝦"></div>
 2     const box = document.getElementById('box');
 3 /*
 4 getAttribute（獲取獲取行間自定義屬性）的實現原理 ：迴圈一下obj的自定義屬性，
 5 找到自定義屬性的時候，獲取屬性的value值。如果沒有找到這個屬性，就返回null。
 6 */
 7     function getAttribute(obj,attr){
 8         let attrs = obj.attributes;
 
 9         for(let i=0;i<attrs.length;i++){
10             if(attrs[i].nodeName === attr){
11                 return attrs[i].nodeValue;
12             }
13         }
14         return null;
15     }
16 
17     console.log(getAttribute(box,'xiaopipi'));//皮皮蝦