获取DOM对象——根据css选择器来获取DOM元素

文档对象模型Document引用的**querySelector()**方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。 如果找不到匹配项，则返回null。

语法：

elment = document.querySelector('css选择器') 
如： 
    <button id= 'do' class= 'in'></button>

`document.querySelector:`
	document.querySelector('button / #do / .in')  //只能选择一个元素， 可以直接操作
	document.querySelector('span:nth-child(2)')		// 获取第二个span元素


`document.querySelectorAll:`
	document.querySelectorAll('ul li')		// 可以选择多个元素，得到的是伪数组，需要遍历得到每一个元素	
    - 得到的是一个伪数组：`有长度、有索引号、基本操作的数组` ， 但是没有 pop()  push() 等数组方法
    - 想要得到里面的每一个对象，则需要遍历（如 for、for...in）的方式获得。
    - 不能直接对元素进行操作
	- 伪数组成员都是dom元素

	let arr = []
	for(let i = 0 ; i < spans.length ; i++){		//All需要遍历才可以给元素进行操作
        spans[i].style.color = 'red'
        arr[i] = spans[i]		//获取元素的伪数组赋值给arr数组，这样就可以在循环外对元素进行操作
    }
	arr[0].style.color = 'red'		// 操作元素

	  `All也可以使用for...in来循环 ， 可以直接给获取all的元素赋值给一个数组:  arr = spans`
    	
    
	`let nav = document.querySelector('.nav').querySelectorAll('li')` //原型链查询规则，找到父元素 .nav 的所有子元素 li 
    
    let btn4 = document.querySelectorAll('button')[3]	// 找到第4个button元素
    
    // .ck:checked: 找到匹配的元素，只会匹配被选中的复选框，仅单选和复选
    let count = document.querySelectorAll('.ck:checked').length

    `注意点：
     - 哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
     - 小括号里面必须是字符串，也就是必须加引号 , 而且要写css选择器`

注意：

如果选择器是一个 ID，并且这个 ID 在文档中错误地使用了多次，那么返回第一个匹配该 ID 的元素。

CSS 伪类不会返回任何元素，见 Selectors API 中的相关规定。

querySelector() 方法获取到的元素是DOM，可以直接操作修改

querySelectorAll() 方法获取到的元素不可以直接修改， 只能通过遍历的方式。依次给里面的元素做修改

querySelector()要是没有找到满足条件的元素会返回null 是false，而querySelectorAll()没有找到满足条件的元素会返回一个空的数组 length = 0 是true

单独的获取方式：
html标签 : document.documentElement
body标签 : ducoment.body
head标签 : document.head
title标签 : document.title

返回值：

表示文档中与指定的一组CSS选择器匹配的第一个元素,一个 Element对象。如果没有匹配到，则返回null。

如果您需要与指定选择器匹配的所有元素的列表，则应该使用querySelectorAll() 。

其他的获取DOM元素的方法（了解）

document.getElementById('do')            // 获取id一个元素

document.getElementsByName('')             //方法可返回带有指定名称的对象的集合。

document.getElementsByTagName('do')        // 根据标签获取一类元素  返回带有指定标签名的对象的集合

document.getElementsByClassName('do')    // 根据类名获取元素  获取页面所有类名为 do 的

以上，希望可以对你有所帮助！