操作 DOM （1）

操作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'));//皮皮虾