3. 查找元素:

  4种：直接查找、节点关系查找、HTML查找、选择器查找

方式	何时	方法	问题
1,不用查找，就可直接获取的对象		documentdocument.documentElement  -> document.head   -> document.body   ->
2,按节点间关系查找:	已经获得一个元素，找周围的元素时	节点树（包含所有节点内容的完整树结构）：1.       父子: 4个elem.parentNode   elem的父节点elem.childNodes   elem的所有直接子节点     返回elem所有直接子节点的类数组对象;elem.firstChild       elem的第一个直接子节点;elem.lastChild       elem的最后一个直接子节点2. 兄弟: 2个,elem.previousSibling  elem的前一个兄弟节点,elem.nextSibling      elem的后一个兄弟节点;元素树（仅包含元素节点的树结构）优点: 不包含看不见的空字符，不会受空字符干扰;1. 父子: 4个elem.parentElement    elem的父元素;elem.children     elem的所有直接子元素         返回elem所有直接子节点的类数组对象;elem.firstElementChild  elem的第一个直接子元素elem.lastElementChild  elem的最后一个直接子元素;2. 兄弟: 2个elem.previousElementSibling  elem的前一个兄弟元素;elem.nextElementSibling   elem的后一个兄弟元素	节点树问题: 受看不见的空字符的干扰！解决: 元素树     元素树：其实: 元素树不是一棵新树，只是节点树的一个子集 问题: 必须先有一个元素，且只能找周围的元素
3,按HTML查找		1. 按id   var elem=document.getElementById("id")    强调: 1. 只能用document调用2.仅返回第一个符合条件的元素2. 按name属性   var elems=document.getElementsByName("name")    强调: 1. 只能用document调用         2. 返回一个类数组对象3. 按标签名var elems=parent.getElementsByTagName("tag")    强调: 1. 可用任何元素调用         2. 返回一个类数组对象         3. 不仅找直接子级，且查找所有后代！4. 按class属性   var elems=parent.getElementsByClassName("class")    强调: 1. 可用任何父元素调用         2. 返回一个类数组对象         3. 不仅查找直接子级，且查找所有后代         4. 多个class修饰一个元素时，只需一个class，就可找到该元素	问题: 一次只能用一个条件查找，无法用复杂条件查找
4. 按选择器查找		1. 只找一个元素:    var elem=parent.querySelector("选择器")  2. 找多个元素    var elems=parent.querySelectorAll("选择器")  问题: 受制于浏览器对选择器的兼容性

对比记忆：节点树和元素树

节点树	元素树
elem.parentNode	elem.parentElement
elem.childNodes	elem.children
elem.firstChild	elem.firstElementChild
elem.lastChild	elem.lastElementChild
elem.previousSibling	elem.previousElementSibling
elem.nextSibling	elem.nextElementSibling