js获取元素

最新推荐文章于 2021-09-26 11:04:48 发布

91周先生

最新推荐文章于 2021-09-26 11:04:48 发布

阅读量197

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_48549175/article/details/110914836

版权

js 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

文档:一个页面就是一个文档，DOM中使用document表示
元素∶页面中的所有标签都是先素，DOM中使用element表示
节点∶网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

根据ID获取

使用getElementByld()方法可以获取带有ID的元素对象。

<body>
    <input type="text" id="inp">
    <script>
      var inp=document.getElementById('inp')
      console.log(inp);
    </script>
</body>

在这里插入图片描述

根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。

document.getElementsByTagName ( ‘标签名’);

注意∶
1．因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
2．得到元素对象是动态的

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
     var li=document.getElementsByTagName('li');
     console.log(li);
    </script>
</body>

在这里插入图片描述
1. 返回的是获取过来元素对象的集合以伪数组的形式存储的
2．我们想要依次打印里面的元素对象我们可以采取遍历的方式

 for (var i =0; i < li.length; i++){
console.log(li[i]);
}

3．如果页面中只有一个li返回的还是伪数组的形式
4. 如果页面中没有这个元素返回的是空的伪数组的形式

通过HTML5新增的方法获取

document.getElementsByClassName ( ‘类名’);//根据类名返回元素对象集合

     var li=document.getElementsByClassName('li');

document.qrueryselector(‘选择器’);//根据指定选择器返回第一个元素对象

//里面的选择器需要加符号
var li=document.querySelector('li');
var li=document.querySelector('#li');
var li=document.querySelector('.li');

document. queryselectorAll( ‘选择器’);//根据指定选择器返回

var li=document.querySelectorAll('.li');

获取特殊元素

获取body

document.body

获取html元素

document.documentElement

区别

  // DOM   获取到的是动态集合
        var ul = document.getElementsByTagName('ul')[0]
        var lis = document.getElementsByTagName('li')
        for (var i = 0; i < lis.length; i++) {
            var li = document.createElement('li')
            ul.appendChild(li)
        }

因为以上获取的时动态的集合所以他会一直刷新获取，以上代码会死循环

   //DOM select选择器的规范  静态集合
        var ul = document.querySelector('ul')
        var lis = document.querySelectorAll('li')
        for (var i = 0; i < lis.length; i++) {
            var li = document.createElement('li')
            ul.appendChild(li)
        }
        console.log(lis)//3

这个是静态集合所以不会变化，输出的值和最开始时是一样的

91周先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js获取元素

文档:一个页面就是一个文档，DOM中使用document表示元素∶页面中的所有标签都是先素，DOM中使用element表示节点∶网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示根据ID获取使用getElementByld()方法可以获取带有ID的元素对象。<body> <input type="text" id="inp"> <script> var inp=document.getElementBy.
复制链接

扫一扫