js获取元素

Posted 2022-01-29 by xiongmao; tagged with 元素获取 , js元素获取

导读：

getElementById()获取元素

get :获得 element :元素 by :通过驼峰命名法
参数 id 是大小敏感的字符串
返回的是一个元素对象
var timer = document.getElementById('time');
console.log(typeof timer)
打印我们返回的元素对象更好的查看里面的属性和方法

getElementByTagName()根据标签名获取

使用 getElementByTagName('标签名')
注意：
　因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历，得到元素对象是动态的

返回的是获取过来元素的集合，以伪数组形式存储
我们想要依次打印里面的元素对象我们可以采取遍历的方式
如果页面中只有一个li，发返回的还是伪数组
如果页面中没有这个元素返回的空的伪数组的形式
返回的是伪数组，所有就有序列号，从0开始
```
      var lis = document.getElementsByTagName('li');
      console.log(lis);
      console.log(lis[0]);
      for(var i = 0; i < lis.length; i++){
         console.log(lis[i]);
      }
```
还可以获取某个元素（父元素）内部所有指定标签名的子元素
element.getElementsByTagName('标签名');
注意：父元素必须是单个对戏（必须指明是哪一个元素对象）.获取的时候不包括父元素自己
一般不推荐这样写，用的话也是id，后边会有更简单的方法
/*var ol = document.getElementByTagName('ol');
console.log(ol[0].getElementByTagName('li'));*/
var ol = document.getElementById('ol')
console.log(ol.getElementsByTagName('li'))
这种学完后边的基本也不用
H5新增获取元素的方法
通过HTML5新增的方法获取
document.getElementsByClassName('类名');//根据类名返回元素对象集合
document.querySelector('选择器');//根据指定选择器返回第一个元素对象
document.querySelectorAll('选择器');//根据指定选择器返回

        //1.getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        //2.querySelector 返回指定选择器得第一个元素对象 切记 里面的选择器需要加上对应符号
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);

        //3.qierySelectorAll('选择器');//根据指定选择器返回

        var allBox = document.querySelectorAll('.box');
        console.log(allBox);

获取特殊元素(html和body)

获取body元素
document.body //返回body元素对象

获取html元素
document.documentElement //返回html元素对象

         //1.获取body元素
         var bodyEle = document.body;
         console.log(bodyEle);
         console.dir(bodyEle);
         //2.获取html元素
         var htmlEle = document.documentElement;
         console.log(htmlEle);

js获取元素

getElementById()获取元素

getElementByTagName()根据标签名获取

H5新增获取元素的方法

获取特殊元素(html和body)