那么首先来介绍一下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