DOM中基础选择器的整理

一：DOM中的选择器

1.ID选择器：document.getElementById()
2.class选择器：document.getElementsByClassName()
3.标签选择器：document.getElementsByTagName()

二：ES5选择器

1.返回的是单个对象:document.querySelector()
1.返回的是数组对象:document.querySelectorAll()

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");

三：关系选择器

1.父选子
var omsg = document.querySelector(".msg");
omsg.children //所有子元素；
omsg.firstElementChild //第一个子元素；
omsg.lastElementChild //最后一个子元素；
2.子选父
var aspan = document.querySelector(“span”);
span.parentNode; //选择span 的父元素；
3.相邻兄弟
var aspan=document.querySelector(“span”);
aspan.previousElementSibling //选择span的上一个兄弟元素
aspan.nextElementSibling //选择span的下一个兄弟元素