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的资料请关注本站其它相关文章！
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
