Js dom 学习
节点类型
文档节点：
一棵DOM树的顶端是文档节点，它呈现为整个页面（相当于document对象），当需要访问任何元素、属性或文本节点时，都需要通过文档节点来进行导航。（document.）
元素节点
HTML元素描述了HTML页面的结构，需要访问DOM树时，需要从查找元素开始。一旦找到所需的元素，然后就可以根据需要来访问它的文本和属性节点。所以需要先学习访问元素节点的方法，然后再学习如何访问和修改文本及属性值。
属性节点
HTML元素的开始标签中可以包含若干属性，这些属性在DOM树中形成属性节点。
文本节点
当访问这些元素节点时，可以访问元素内部的文本，这些文本保存在其文本节点中。文本节点没有子节点。如果一个元素包含文本和其他子元素，这些子元素并非文本节点的子节点，而是整个容器元素的子节点<p>name<em>fresh</em>figs</p>,父节点为p，子节点为name，<em>fresh</em>，figs。
DOM操作
1访问元素
1.1选择单个元素
getElementById()返回对拥有指定 id 的第一个对象的引用。
querySelector() 使用css选择器，返回第一个匹配的元素。querySelector("li#id1");查询li的id=‘id1’的元素。
1.2选择多个元素
getElementsByClassName(); 选择所有在class属性上使用了特定值的元素
getElementsByTagName(); 选择所有使用了指定标记的元素
querySelectorAll（） 使用Css选择器来选择所有匹配的元素、
childNodes 孩子节点数组
1.3在元素节点之间遍历
parentNode 返回当前元素的父节点
previousSibling 返回当前元素的前一个兄弟节点
nextSibling 返回当前元素的后一个节点
firstChild 返回当前元素的第一个子节点
lastChild 返回当前袁术的最后一个子节点
在绝大数浏览器，除了IE,都会将元素之间的空白（比如空格或回车）当做文本节点来处理，所以上面的属性（除了parentNode属性）在不同的浏览器中可能会返回不同的元素。所以应该避免使用这些DOM属性，解决这个问题的一个最受欢迎的方法是使用jquery这样的JavaScript库。
2.操纵这些元素
nodeType 元素节点类型
2.1 访问/更新文本节点
nodeValue
2.2操作HTML内容
innerHTML 访问/更新子元素和文本内容。
textContent 访问元素的文本内容 <p id="p1">fresh <em>figs</em></p> document.getElementById("p1").textContent 结果为 fresh figs
innertText 访问元素的文本内容 最好不要使用，1.firefox不支持，2.遵从css，css规则隐藏了的元素的文本内容获取不到。3、因为innerText考虑到布局规则来判断元素的可见性，它在获取文本内容时的速度要比textContent更慢。
createElement()创建元素节点
createTextNode()创建文本节点
appendChild() 向元素添加新的子节点，作为最后一个子节点。
removeChild() 移除节点
insertBefore 方法在您指定的已有子节点之前插入新的子节点 parentNode.insertBefore(newItem,existingItem);
2.3访问或更新属性值
className/id 可以使用它们来获取或更新class和id属性
hasAttribute()是否存在某属性
setAttrubute ()设置元素节点属性
getAttribute() 获取元素节点属性
removeAttribute()删除节点
