⭐DOM如何获取页面元素

最新推荐文章于 2024-07-26 12:18:49 发布

Sea_water778

最新推荐文章于 2024-07-26 12:18:49 发布

阅读量178

点赞数

文章标签： html5 javascript html

本文链接：https://blog.youkuaiyun.com/Sea_water778/article/details/120811049

版权

1.获取页面中的元素可以使用以下几种方式

根据 ID 获取
根据标签名获取
通过 HTML5 新增的方法获取
特殊元素获取

1.1根据ID 获取

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

<body>
    <div id="time">2021-9-9</div>
    <script>
         1. 因为我们的文档页面从上往下加载，所以得现有标签 所以script写到标签下面
         2. get 获得 element 元素 by 通过 驼峰命名法
         3. 参数 id 是大小写敏感的字符串
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);   返回的是元素对象
         4. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer); 
    </script>
</body>

2 .根据标签名获取某些（多个元素）

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

document.getElementsByTayName ( ’ 标签名 ’ ) ；

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

<ul>
        <li>知否知否，应是等你好久1</li>
        <li>知否知否，应是等你好久2</li>
        <li>知否知否，应是等你好久3</li>
        <li>知否知否，应是等你好久4</li>
        <li>知否知否，应是等你好久5</li>
    </ul>
        返回的是 获取锅来元素对象的集合 以为数组的形式储存
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        console.log(typeof lis);
         2.我们想依次打印里面的元素对象 我们可以采取遍历的方式
        for(var i = 0; i < lis.length; i++){
            console.log(lis[i])
        }
         3. 如果页面中只有一个li 返回的还是伪数组的形式
         4. 如果页面中没有这个元素 返回的是 空 的伪数组

2.1 还可以获取某个元素（父元素）内部所有指定标签的子元素

element . getElementsByTagName（ ’ 标签名 ’ ）；
或给父元素设置一个 id 通过 id选到父元素后用 id.getElementsByTagName ( ) ;
var 变量名 = document.getElementById( ’ id ’ );
var ol = document.getElementById(‘lo’);
console.log(ol.getElementsByTagName(‘li’));

注意；父元素必须是单个对象(必须指明是哪一个元素).获取的时候不包括父元素自己。

3.通过HTML5 新增的方法获取

1. document.getElementsByClassName ( ’ 类名 ') ；// 根据类名返回元素对象集合
2.document.getquerySelector ( ’ 选择器 ’ ) ; // 根据指定选择器返回第一个元素对象
3.document.querySelectorAll( ’ 选择器 ’ ); // 根据指定选择器返回

  1. getElementsByClassName 根据类名获取某些元素集合
        var bx = document.getElementsByClassName('box');
        console.log(bx);
  2.querySelecctor 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号  .box（类选择器） #nav(id选择器)
        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.querySelectorAll() 返回指定选择器的所有元素对象的集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);