码迷,mamicode.com
首页 > 其他好文 > 详细

操作 DOM (1)

时间:2018-11-11 17:57:12      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:attr   cto   fun   元素   span   name   标签   实现   att   

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

 

操作 DOM (1)

标签:attr   cto   fun   元素   span   name   标签   实现   att   

原文地址:https://www.cnblogs.com/MrZhujl/p/9942652.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!