BOM操作querySelector querySeletorAll获取标签对象_javascript技巧_

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选择器  结构伪类...             

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

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

        
我是第一个li标签
        
我是第二个li标签
        
我是第三个li标签
        
我是第四个li标签
        
我是第五个li标签
        
我是第六个li标签
        
我是第七个li标签