js获取元素

xiongmao
2022-01-29 / 0 评论 / 77 阅读 / 正在检测是否收录...

导读:

getElementById()获取元素

  1. get :获得 element :元素 by :通过 驼峰命名法
  2. 参数 id 是大小敏感的字符串
  3. 返回的是一个元素对象
    var timer = document.getElementById('time');

console.log(typeof timer)

  1. 打印我们返回的元素对象 更好的查看里面的属性和方法

getElementByTagName()根据标签名获取

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

  1. 返回的是 获取过来元素的集合,以伪数组形式存储
  2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
  3. 如果页面中只有一个li,发返回的还是伪数组
  4. 如果页面中没有这个元素返回的空的伪数组的形式
  5. 返回的是伪数组,所有就有序列号,从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新增的方法获取

  1. document.getElementsByClassName('类名');//根据类名返回元素对象集合
  2. document.querySelector('选择器');//根据指定选择器返回第一个元素对象
  3. 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);
0

打赏

海报

正在生成.....

评论

博主关闭了所有页面的评论