×

JS每日一学:BOM操作querySelector querySeletorAll获取标签对象

作者:Web前端之家2022.11.25来源:Web前端之家浏览:68评论:0
关键词:js

JS每日一学:BOM操作querySelector querySeletorAll获取标签对象。

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 );

您的支持是我们创作的动力!
温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js20221125a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

ad

最新留言

  • fati

    刚好遇到setState的问题,感谢分享!...

  • derv3

    现在已经很多开源CMS了,对于个人来说,自己开发难度极大。...

  • derv3

    Cookies很多用途吧...

  • 访客

    sddddddddddddddVS的vVSVS但是v方法v方法v发v方法v发v发v方不方便德文法文...

  • 没人发言

    鸡肋的功能...

  • 23b

    这个你应该加群找群主才对吧...

  • 访客

    大佬,能提供能一下提取图片中的文字工具的源码吗,感谢...

  • qdxx

    SEO原创还可以的,新手学习下。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2