javascript选择器

https://www.cnblogs.com/iyitong/p/4229355.html

在HTML5出现之前使用JavaScript查找DOM元素，有以下三种原生的方法：
getElementById：根据指定元素的id属性返回元素
getElementsByName：返回所有指定name属性的元素
getElementsByTagName：返回所有指定标签的元素

HTML5新增的选择器，方法有两种：
querySelector：根据选择器规则返回第一个符合要求的元素
querySelectorAll：根据选择器规则返回所有符合要求的元素

--分组选择器--
两种类型之间使用逗号隔开
document.querySelectorAll('a,p'); //获取页面上所有a元素和p元素，并通过一个列表返回
document.querySelectorAll('.btn,.txt'); //获取页面上所有包含btn和txt样式类名的元素

--属性选择器--
document.querySelectorAll('a[target="_blank"]'); //获取页面上所有target属性为_blank的a元素
document.querySelectorAll('img[data-id]'); //获取页面上所有带有自定义属性data-id的img元素

-- 后代选择器--所有后代
document.querySelectorAll('div a'); //获取页面上所有被div包含的a元素
document.querySelectorAll('div .btn'); //获取页面上所有被div包含的带有btn样式类名的元素

--子元素选择器--只有下一代
后代选择器会将元素底下的所有相关元素都搜索出来，如果想进一步缩小范围，可以使用子元素选择器，只会选择
某个元素的一级子元素，子元素用“>”（大于号）表示，代码如下
alert(document.querySelector('#apDiv1>#input1').value );

--相邻兄弟选择器--兄弟（+之后不包含自己）
选择紧接在另一个元素后的元素，而且两者有相同的父元素，相邻兄弟选择器使用“+”（加号），代码如下：
document.querySelectorAll('div+p'); //只返回一个id为p1的p元素

--相邻同胞--（~之后包含自己）
 

--伪类选择器--
:first-child”表示选择元素的第一个子元素，“:last-child”表示选择元素的最后一个子元素，“:nth-child
(n)”表示选择元素的第n个子元素。
 document.querySelectorAll('p:first-child'); //只返回一个id为p1的p元素