java script 选择器_JavaScript选择器

元素节点选择器：

id选择器 、 class选择器、  name选择器 、   tagname选择器、  高级选择器   、关系选择器

ID选择器：返回单个对象；

//假设页面上有一个id名为box的元素

var box = document.getElementById("box");

console.log(box)//选中这个元素

class选择器：返回数组对象，可通过索引解析其中的元素。

var acont = document.getElementsByClassName("cont")

console.log(acont)//所有class名为cont元素组成的数组

console.log(acont[0]) //通过索引选中它的第一个元素

console.log(acont[0].innerHTML) //通过索引直接拿到它的innerhtml值

console.log(acont.innerHTML) //选中整个数组的所有innerHTML值

tagname选择器：返回数组对象，可通过索引解析其中的元素。

var aspan = document.getElementsByTagName("span")//选中所有span标签

console.log(aspan)//打印它返回的数组对象

name选择器：返回数组对象，可通过索引解析其中的元素。

var auser = document.getElementsByName("user")//选中所有name属性为user的元素

console.log(auser)//打印这个数组对象

ES5新增的高级选择器：

1：querySelector：返回的是单个对象。

var ele = document.querySelector("#box")var ele = document.querySelector(".cont")var ele = document.querySelector("span")var ele = document.querySelector(".msg h2")

console.log(ele)//小括号里可以写ID名，class名，标签名，也可以使用父元素下的子元素的写法。

2：querySelectorAll：返回数组对象，可通过索引解析其中的元素。

var ele = document.querySelectorAll("#box")var ele = document.querySelectorAll(".cont")var ele = document.querySelectorAll("span")var ele = document.querySelectorAll(".msg h2")var ele = document.querySelectorAll(".msg>h2")

console.log(ele)//写法类似queryselector，不过这个返回的是数组对象

关系选择器：

1：父元素选子元素：

var omsg = document.querySelector(".msg");//选中父元素

console.log(omsg.children);//打印出父元素下的所有子元素

2：子元素选父元素：

var osbox = document.querySelector(".sbox");//选中有父元素的子元素

console.log(osbox.parentNode);//打印出打的父元素

3：选中第一个子元素：

var omsg = document.querySelector(".msg");//选中父元素

console.log(omsg.firstElementChild)；//打印出当前选择的父元素下的第一个子元素

4：选中最后一个子元素：

var omsg = document.querySelector(".msg");

console.log(omsg.lastElementChild)//显而易见，frist是第一个，那么last是最后一个

5：选中上一个兄弟元素：

var omsg = document.querySelector(".msg");//选中一个元素

console.log(omsg.previousElementSibling)//打印出和它同级的上一个元素(上一个兄弟元素)

6：选中下一个兄弟元素：

var omsg = document.querySelector(".msg");//选中一个元素

console.log(omsg.nextElementSibling)//打印出和它同级的下一个元素(下一个兄弟元素)

其他节点选择器：

父选子：var obox = document.querySelector(".box")

console.log(obox.childNodes)

上一个兄弟：var obox = document.querySelector(".box")

console.log(obox.previousSibling)

下一个兄弟：var obox = document.querySelector(".box")

console.log(obox.nextSibling)

第一个子：var obox = document.querySelector(".box")

console.log(obox.firstChild)

最后一个子：var obox = document.querySelector(".box")

console.log(obox.lastChild)//和元素节点选择器比较，其他节点选择器的关系选择只是在打印元素时少了一个element，特殊的在父选子时单词有所改变，

要注意区分。自习观察就能看到他们相似而又有所区别的地方，这里就不一一分析了