BOM操作querySelector querySeletorAll获取标签对象

2023-05-06 原文

DOM操作的基本步骤

1, 设定 html css

2, 获取 html标签对象

3, 操作 html标签对象

内容属性 id class css样式 ....

! DOM操作只能对一个标签对象进行操作

querySelector()

var 变量 = document.querySelector('条件');

只获取第一个符合条件的标签对象

获取结果是一个独立的标签对象

可以直接进行DOM操作

没有符合条件的标签获取结果是 null

! 没有获取到正确的标签对象不能执行DOM操作

querySeletorAll()

var 变量 = document.querySelectorAll('条件');

获取所有符合条件的标签对象

获取结果是一个伪数组

有 length属性有索引下标

但是函数方法和正式的数组不同

! DOM操作不能直接对伪数组进行操作

通过 []语法从伪数组中获取一个独立的标签对象进行操作

通过循环语法对伪数组中每一个独立的标签对象进行操作

没有符合条件的标签获取结果是空数组

也就是 length 是 0 的数组

! 没有获取到正确的标签对象不能执行DOM操作

括号中的参数：

以字符串形式定义获取标签对象的条件

条件的内容可以是所有 html css 支持的语法形式

例如：

标签名称 id属性 class属性标签支持的属性自定义属性 css选择器结构伪类...

还有了解不具体的同学可以仔细看一下

具体操作案列别看简单跟着敲几遍你会更熟练!

<ul>
        <li>我是第一个li标签</li>
        <li>我是第二个li标签</li>
        <li>我是第三个li标签</li>
        <li>我是第四个li标签</li>
        <li>我是第五个li标签</li>
        <li>我是第六个li标签</li>
        <li>我是第七个li标签</li>
 </ul>
<script>
    // // 获取 整个文档中 第一个标签名称是 div 的标签 
    // var oDiv1 = document.querySelector('div');
    // console.log( oDiv1 );
    // // 获取 整个文档中 所有标签名称是 div 的标签 
    // var oDivs = document.querySelectorAll('span');
    // console.log( oDivs );

// 通过标签名称获取标签对象

    var oDiv1 = document.querySelector('div');  标签是div 的项
    console.log( oDiv1 );

// 通过 id属性值获取标签对象

    var oDiv2 = document.querySelector('#div1');  ID 为div1 的项
    console.log( oDiv2 );

// 通过 class属性值获取标签对象

    var oDiv3 = document.querySelector('.div2');  类名  .div2 的项
    console.log( oDiv3 );

// 通过属性属性值获取标签对象

    var oDiv4 = document.querySelector('[name="div3"]');  name div3 的项
    console.log( oDiv4 );
    var oDiv5 = document.querySelectorAll('[name*="v"]'); 带有 V 的项
    console.log( oDiv5 );

// 通过结构伪类选择器获取

    var oUlLis1 = document.querySelectorAll( 'ul>li' ); ul 下的 li
    console.log( oUlLis1 );
    var oUlLis2 = document.querySelectorAll( 'ul>li:first-child' );第一个li
    console.log( oUlLis2 );
    var oUlLis3 = document.querySelectorAll( 'ul>li:last-child' ); 最后一个li
    console.log( oUlLis3 );
    var oUlLis4 = document.querySelectorAll( 'ul>li:nth-child(odd)' ); 奇数项
    console.log( oUlLis4 );
    var oUlLis5 = document.querySelectorAll( 'ul>li:nth-child(even)' );偶数项
    console.log( oUlLis5 );

以上就是BOM操作querySelector querySeletorAll获取标签对象的详细内容，更多关于BOM操作querySelector querySeletorAll的资料请关注Devmax其它相关文章！