DOM选择器之元素选择器

DOM中元素选择器

　　在DOM中我们可以将元素选择器分为两类；1、元素节点选择器；2、其它节点选择器。通过选择器选择HTML中的元素以对其进行操作，以此实现用JS对页面的操作。

　　一、元素节点选择器

　　1.ID选择器：document.getElementById()

　　通过标签的ID名选择,返回的是单个的值，在HTML中ID具有唯一性；

　　2.class选择器：document.getElementsByClassName()

var aEle=document.getElementsByClassName("myClass")　　//选择文档中所有class名为myClass的元素，返回一个数组。

　　通过标签的class名进行选择，返回的是一个数组，当我们需要对单个进行操作时，可利用数组的操作来选择单个的元素；这里需要注意的是，不同于ID选择器，因为是一个数组所以是Elements,注意有一个s，又由于在ES6中有class关键字，为了避免重复这里用的是ClassName。

　　3.标签选择器：document.getElementsByTagName()

　　通过标签名进行选择,如下选择文档中所有span标签。

var aspan=document.getElementsByTagName("span")　　//选择DOM文档中所有的<span></span>标签，返回一个数组。

 　　4.name选器：document.getElementsByName()

　　语法如下：

var auser=document.getElementsByName("user");

　　name选择器一般用于表单，含有name属性的标签；同样，返回的是一个数组。

　　5.高级选择器：ES5新增的选择器

　　querySelector()和querySelectorAll()

　　① querySelector()　　返回的是单个对象

　　语法如下：

var ele = document.querySelector("#box");
var ele1 = document.querySelector(".class");
var ele2 = document.querySelector("span");
var ele3 = document.querySelector(".msg h2");
var ele4 = document.querySelector(".msg>h2");

　　从上面的代码我们可以看到，这个选择器的功能强大到出乎你的想象，甚至支持css中的所有选择器。

　　②querySelectorAll（）　　返回一个数组对象

　　语法同querySelector();

 　　6.关系选择器

　　我将关系选择器分成三类：① 父选子② 子选父③ 兄弟

 　　① 父选子

var omsg = document.querySelector(".msg");
     omsg.children             //所有子元素；
     omsg.firstElementChild   //第一个子元素；
     omsg.lastElementChild    //最后一个子元素；            

　　②子选父

var    aspan = document.querySelector("span");
        span.parentNode;    //选择span 的父元素；

　　③兄弟选择器

var    aspan=document.querySelector("span");
        aspan.previousElementSibling    //选择span的上一个兄弟元素
        aspan.nextElementSibling    //选择span的下一个兄弟元素

 

 

Tip：上面所提到的利用选择器返回一个数组，该数组是一个伪数组，当需要对单个元素进行操作的时候，可以对该数组进行索引，遍历，但是要注意的是，不能使用数组的方法！