DOM选择器

那么首先来介绍一下js的三大组成
ECMAscript规定，如何在BOM中操作DOM
DOM(W3C机构)不属于BOM(浏览器厂商)
window对象身上提供document对象
DOM 主要控制页面，所有的页面操作都是通过DOM
DOM树形结构的每个组成部分，都叫节点（元素，属性，内容，文本）；
所有节点，都是对象
js做交互，性为，页面。那个元素，选择器，属性，内容，样式，元素等
选择器
元素节点选择器（只有元素节点有）
直接选择器
id选择器：document,getElementById(“id名”)；
class选择器：document.getElementByClassName(“class名”)
tag选择器：document.getElement(“tag名”)；
name选择器：document.getElement(“name”);
ES5新增选择器
querySelector选择器：document.querySelector(“css选择器”)
querySelectorAll选择器：document.querySelectorAll(“css选择器”)；
总结：
返回单个元素：
id querySelector
返回数组：
class,tag, name,querySelector
var olist = document.querySelector(".list");
// var olist = document.getElementsByClassName(“list”)[0];
console.log(olist);
// 第一个子：
console.log(olist.firstElementChild);
// 最后一个子：
console.log(olist.lastElementChild);
// 所有子：
console.log(olist.children);
// 其他的子：
// console.log(olist.children[索引]);
子选父：先拿到子
// var oEm = document.querySelector(“em”);
var oEm = document.getElementsByTagName(“em”)[0];
// 子选父：一个！直接的父级！
console.log(oEm.parentNode);
console.log(oEm.parentNode.parentNode);
//兄弟关系（姐妹关系）
// 先选择当前
var olist = document.querySelector(".list");
//哥：谁的哥（上一个兄弟）
// 上一个（哥）：
console.log(olist.previousElementSibling);
//弟：谁的弟（下一个兄弟）
// 下一个（弟）：
console.log(olist.nextElementSibling);

节点选择器(元素，属性，注释，文本)

• 元素，注释，文本，参与了父子或兄弟关系
  • 利用关系选择
  • 父元素节点.childNodes
  • 当前元素.previousSibling
  • 当前元素.nextSibling