JavaScript的理解记录（5）

---接上篇：

三、DOM解析：

　　　　1、Document Object Model(DOM)：是表示和操作HTML和XML文档内容的基础API;其中几个重要的类有：Document和Element，Text，这三个也是Node的其中几个子类；　

2、文档元素的选取：返回值是Element或Element组成的数组NodeList;

通过ID :　　　　  document.getElementById('id');

　　　　　　　   通过name:    　　 document.getElementsByName('name');

　　　　　　　　通过tagName:      document.getElementsByTagName('span');

　　　　　　　　通过CSS类：　　  document.getElementsByClassName('c1 c2 c3');

　　　　　　　　　　　　　　　　　//参数中class有多个时，只关心名称，顺序无关紧要；

通过CSS选择器：  document.querySelectorAll()和document.querySelector() 参数是包含一个CSS选择器的字符串参数，返回一个NodeList对象或Element；功能与JQuery类库中的$()相似，两者参数相同，不同的是：$()返回值为一个JQuery对象表示匹配的元素集，JQuery对象是一个类数组，可以用标准的数组标示方括号来访问JQuery对象的内容；也可以用toArray()方法来将JQuery对象转化为真实的数组； 参数举例：1、ID: #nav 2、 标签名：div 3、class属性值：.success 4、基于属性值：input[name='button']; 5、组合使用：span.fatal.error //其class中包含fatal和error的所<span>元素；

　　　  3、 文档结构：作为节点树的解析（还有一种是作为元素树解析，将文档看做Element对象树，忽略Text和Comment节点）

　　　　　　　   节点Node对象主要以下几个重要属性：

　　　　　　　　　　　1、parentNode: 父节点，没有为null;

　　　　　　　　　　　2、childNodes  : 节点的子节点的实时表示，值为NodeList对象；

　　　　　　　　　　　3、firstChild，lastChild：节点的子节点的第一个和最后一个节点，没有为null;

　　　　　　　　　　   4、nextSibling和previousSibling： 节点的兄弟节点的前一个和后一个；

　　　　　　　　　　　5、nodeType: 该节点类型; 9代表Document节点 1代表Element节点 3代表Text节点，8代表comment节点；

　　　　　　　　　　   6、nodeValue:Text节点的文本内容；

　　　　　　　　　　　7、nodeName: 元素的标签名，大写；

　　　 　　　　　　　  8、attributes : 元素的所有属性，只读的类数组对象；

　　　　4、元素内容：依据Element不同属性获取不同内容;

　　　　　　　　　innerHTML : 元素的内容作为字符串返回；

　　　　　　　　　outerHTML :返回的字符包含查询元素的开头和结尾标签;(HTML5才有且FireFox浏览器不支持）

　　　　　　　　　textContent: 返回纯文本；IE不支持

　　　　　　　　   innerText:也是返回纯文本，但不返回<script>元素的内容；FireFox不支持；

　　　 5、 节点的增删：操作文档进行文档节点的增加和删除

　　　　　　　　  1、创建节点：document.createElement() 参数为不区分大小写的标签名(对于HTML),对XML文档会区分大小写；第二种方法是复制已存在的节点，每个节点都有一个cloneNode()方法放回节点的副本；

　　　　　　　　  2、插入节点：使用Node的方法appendChild()和insertBefore();

　　　　　　　　　　　　　　　appendChild():插入子节点使其成为节点的最后一个子节点；　　

　　　　　　　　　　　　　　　insertBefore():两个参数，第一个参数是待插入的节点，第二个参数是该父节点的子节点，可以为null,为null是功能与appendChild相同；

　　　　　　　　　　　　　　  如果使用以上两个方法再次插入已经存在的节点，已存在节点将会自动从它的当前位置删除并在新的位置从新插入，可以用来做单页表格的排序等，不改变表格数据，只改变节点的顺序；

　　　　　　　　 3、删除和替换节点：删除节点：removeChild() 替换节点：replaceChild();

　　　　　　　　 4、节点容器DocumentFragment:var frag = document.createDocumentFragment(); 可以包含任意多子节点而且它使得一组节点被当做一个节点看待；

　　　　6、HTML可编辑内容：有两种方法启用编辑功能，

　　　　　　　　其一：设置任何标签的HTML contenteditable属性;<div id="editor" contenteditable>edit.....</div>

　　　　　　　   其二：设置对应元素的JavaScript contenteditable属性;

　　　　　　　　浏览器定义了多项文本编辑命令，为了执行这些命令，应该使用Document对象的execCommand()方法；