Js杂谈-DOM
前言
对jQuery的依赖。导致js的原生方法的淡忘，如果是封装自己的库，那势必要用到js的许多原生方法。从Jquery强大的dom处理开始，我们开始回顾javascript那些古老而坚挺的DOM方法。先从0级DOM入手。
1 节点类型
| nodeType | name |
| 1 | element_node |
| 2 | attribute_node |
| 3 | text_node |
| 4 | cdata_section_node |
| 5 | entity_reference_node |
| 6 | entity_node |
| 7 | processing_instruction_node |
| 8 | comment_node |
| 9 | document_node |
| 10 | document_type_node |
| 11 | document_fragment_node |
| 12 | notation_node |
1.1 dom的基本操作
js拥有对dom树的增删改查权利，相对应的方法为
document.createElement()//创建 fatherNode.appendChild()//添加 fatherNode.replaceChild('newNode','oldNode')//改 fatherNode.childNodes[0-n]//查 fatherNode.removeChild(node)//删
对于childNodes存在包含text节点，注释节点等。使用时需要注意。添加和替换节点时，不会额外增加text节点。所有操作权利一般都在父节点上。
这里有一个cloneNode()方法，它有一个参数，true表示深度复制，可以复制该元素的子元素，false为浅度复制，只能复制其本身。在IE9以下版本，存在一点问题，即深度复制时，它们是不会为空白符创建节点的。
2 元素类型
2.1 文档元素
Node Type
| Document | |
| nodeType | 9 |
| nodeName | '#document' |
| nodeValue | null |
| parentNode | null |
| ownerDocument | null |
document表示文档，在浏览器中，document对象时HTMLDocument(继承自Document类型)的一个实例，表示整个页面。而却document对象时window对象的一个属性。
document有两个内置属性 1.documentElement:直接获取HTML元素.等同于childNodes[0],firstChild 2.doctype:获取文档类型节点 其中第一个属性是所有浏览器都支持，第二个属性：IEn-8将其解析成注释节点。所以其值为null IE9+ FF:将其解析成document的第一个子节点. chrome safari opera:可以解析，但不作为文档的子节点。
document对象还是提供了一些标准的Document对象中所没有的属性，这些属性提供了表现的网页的一些信息。
console.log(document.title);//网页标题 console.log(document.URL);//路径 console.log(document.domain);//域名 console.log(document.referrer);//链接到之前那个页面的url
只有域名可以设置，相同的域名的网站可以使用javascript相互访问。
以下是一个便捷方式。
document.anchors //所有的a标签 document.applet //所有的applet标签 document.forms //所有form元素 document.images //包含所有img元素 document.links//所有带href特性的a标签
查找元素
Document类型为此提供了两种方法:getElementById和getElementsByTagName
在IE8及较低版本不区分ID的大小写。另外IE7及较低版本还为此方法添加了一个有意思的“怪癖”：name特性于给定ID匹配的表单元素(input,textarea,button,select)也会被该方法返回，如果有哪个表单元素的name特性等于指定ID，而且该元素在文档中位于给定ID的元素前面，那么IE就会返回那个表单元素。但是为了避免IE中存在的这个问题，最好的办法是不让表单字段的name特性与其他元素的ID相同。
此外还有一个方法就是getElementsByTagName，这个方法接受一个参数，即要取得元素的标签名，而返回的是包含零或多个元素的NodeList，在HTML文档中，这个方法会返回一个HTMLCollection对象，作为一个“动态”集合，该对象与nodeList非常类似。这里HTMLCollection对象还保存一个方法namedItem()，使用这个方法可以通过方法通过元素的name特性 取得集合中的项，此外HTMLCollection还支持按名称访问项，这就为我们取得实际想要的元素提供了便利，而且，对命名的项也可以使用方括号语法来访问。
总的来说，对HTMLCollection而言，我们可以向方括号中传入数值或字符串形式的索引值。在后台，对数值索引就会调用item()，而对字符串索引就会调用namedItem
另外还有一个方法就是getElementByName()，这个方法会返回给定name特性的所有元素，这个方法通常用在radio上。也返回HTMLCollection
文档写入
具体显示4个方法：
write(),writeln(),open(),close()。其中，write()和writeln()方法都接受一个字符串参数，即要写入到输出流的文本，write()会原样写入，而writeln()则会在字符串的末尾添加一个换行符(\n)，在页面被加载的过程中，可以使用这两个方法向页面中动态地加入内容。
方法open和close分别用于打开和关闭网页的输出流，如果是在页面加载期间使用write()或writeln()方法。
2.2 标签元素
| Element | |
| nodeType | 1 |
| nodeName | 元素的标签名 |
| nodeValue | null |
| parentNode | Element或Document |
2.2.1 HTML元素
所有HTML元素都由HTMLCollection类型表示。
每一个元素节点都存在属性，那如何获取它们的属性，可以是标准方法：getAttribute(),setAttribute(),removeAttribute()。
Element类型是使用attributes属性唯一一个DOM节点类型。attributes属性中包含一个NameNodeMap，与nodelist类似，是一个动态的集合
有两类特殊的特性，它们虽然有对应的属性名，但属性的值与通过getAttribute返回的值并不相同。第一类特性就是style，用于通过css为元素指定样式。在通过getAttribute访问时，返回style特性值中包含的是css文本，而通过属性来访问它则会返回一个对象。由于style属性是用于以编程方式访问元素样式。第二类与众不同的特性是onclick这样的事件处理程序。
IE6以及之前版本不支持removeAttribute
2.2.2 attributes属性
Element类型是使用attributes属性唯一一个DOM节点类型。attributes属性中包含一个NamedNodeMap，于NodeList类似，也是一个动态集合，元素的每一个特性都由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中。
API如下：
getNamedItem(name): 返回nodeName属性等于name的节点
removeNamedItem(name): 从列表中移出nodeName属性等于name的节点
setNamedItem(node):向列表中添加节点，以节点的nodeName属性为索引
item(pos):返回位于数字pos位置处的节点。
一般来说，由于前面介绍的attributes的方法不够方便，因此开发人员更多的会使用getAttribute，setAttribute和removeAttribute
关于attribute，有两点必要的说明。
- 针对attributes对象中的特性，不同浏览器返回的顺序不同，这些特性在XML或HTML代码中出现的先后顺序，不一定与它们出现在attributes对象中的顺序一致。
- IE7及更早的版本会返回HTML元素中所有可能的特性，包括没有指定的特性。换句话说，返回100多个特性的情况会很常见。
- 针对IE7及更早版本中存在的问题，让它只返回指定的特性。每个特性节点都有一个名为specified的属性，这个属性的值如果为true，则意味着要么在HTML中指定相应特性，要么是通过setAttribute方法设置了该特性，在IE中，所有未设置过的特性的该属性都为false
2.2.3 创建元素
document.createElement('xx');
接收参数不区分大小写，而在XML中是区分大小写的
在新元素上设置特性只是给它们赋予了相应的信息。由于新元素尚未被添加到文档树中，因此设置这些特性不会影响到浏览器的显示。要把新元素添加到文档树，可以使用appendChild，insertBefore或replaceChild方法。
一旦将元素添加到文档树中，浏览器就会立即呈现该元素，此后，对这个元素所作的任何修改都会实时反映在浏览器中。
注意：在IE中可以使用另一种方式使用createElement，如下：
var div = document.createElement("<div id='div1' class='class1'></div>")
类似于jQuery的写法。这种方式有助于避开IE7及更早版本中动态创建元素的某些问题：
- 不能设置动态创建iframe元素的name特性
- 不能通过表单的reset()方法重设动态创建的input
- 动态创建的type特性值为reset的button元素重设不了表单
- 动态创建的一批name相同的单选按钮彼此毫无关系，无法实现单选效果。
上述说到这些问题都可以通过createElement()中指定完整的HTML标签来解决。
2.2.4 元素的子节点
元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。元素的childNodes属性中包含了它的所有子节点。这些子节点可能是元素，文本节点，注释或是处理指令。不同的浏览器下看待这些节点方面存在显著的不同。举个例子：
<ul id="myList"> <li>1</li> <li>2</li> <li>3</li> </ul>
如果是IE来解析这些代码，那么ul会有3个子节点，如果是其他浏览器，则会是7个子节点，即3个li节点和4个文本节点
2.3 文本元素
| nodeType | 3 |
| nodeName | #text |
| nodeValue | 包含的文本内容 |
| parentNode | element |
可以通过nodeValue和data属性来访问Text节点中包含的文本。这两个属性中包含的值相同。API如下：
appendData(text):将text添加到节点的末尾 deleteData(offset,count):从offset指定的位置开始删除count个字符。 insertData(offset,text):从offset指定的位置开始插入text。 replaceDate(offset,count,text):用text替换从offset指定位置开始到offset+count为止的文本。 splitText(offset):从offset指定的位置将文本分成两个文本节点。 substringData(offset,count):提取从offset指定位置开始到offset+count为止处的字符串。
以上的方法主要是操作文本节点的，而不是文本。默认情况下，每个可以包含内容的元素最多只能有一个文本节点。而且必须确实有内容存在。
2.3.1 创建文本节点
document.createTextNode()
这个方法接收一个参数-即要插入节点的文本，与设置已有文本节点的值一样。
如果两个文本节点是相邻的同胞节点，那么这两个节点中的文本就会连起来显示，中间不会有空格。
2.3.2 规范化文本节点
DOM文档中存在相邻的同胞文本节点很容易导致混乱，因为分不清哪个文本节点表示哪个字符串。在一个包含两个或者多个文本节点的父元素上调用normalize()方法，则将所有文本节点合并成一个节点，结果节点的nodevlaue等于将合并前每个文本节点的nodeValue值拼接起来的值。
2.3.3 分割文本节点
Text类型提供了一个作用与normalize()相反的方法:splitText()，这个方法会将一个文本节点分成两个文本节点：即按照指定的位置分割nodeValue值
2.4 注释节点
| nodeType | 8 |
| nodeName | #comment |
| nodeValue | 注释的内容 |
| parentNode | Document或者Element |
Comment类型与Text类型继承自相同的基类，因此它拥有除splitText()之外的所有字符串操作方法。与text类型相似，也可以通过nodeValue或data属性来取得注释的内容，比如访问一个注释
var div = document.getElementById('myDiv'); var comment = div.firstChild; alert(comment.data);
同样，注释同样可以创建，使用document.createComment()方法，其参数是传入注释文本。
2.5 CDATA元素
| nodeType | 4 |
| nodeName | #cdata-section |
| nodeValue | CDATA区域中的内容 |
| parentNode | Document或是element |
不支持子节点。CDATA区域出现在XML文档中，因此多数浏览器都会把CDATA区域解析错误地解析成Comment或Element。可以使用document.createCDataSection()来在XML文件中创建CDATA区域。
2.6 DocumentType类型
| nodeType | 10 |
| nodeName | doctype |
| nodeValue | null |
| parentNode | Document |
DocumentType类型在web浏览器中并不常见，仅在FF，safari和opera支持它。在DOM1级中，DocumentType对象不能动态创建，而只能通过解析文档代码的方式来创建。支持它的浏览器会把DocumentType对象保存在document.doctype中。DOM1级描述了DocumentType对象的3个属性：name，entities和notations。其中name表示文档文档类型的名称；entities是由文档类型描述的实体的NamedNodeMap对象；notations是由文档类型描述的符号的NamedNodeMap对象。通常，浏览器中的文档使用的都是HTML或XHTML文档类型，因而entities和notations都是空列表(列表的项来自行内文档类型声明)。但不管怎么样，只有name属性是有用的，这个属性中保存的是文档类型的名称。
2.7 文档片段
| nodeType | 11 |
| nodeName | #document-fragment |
| nodeValue | null |
| parentNode | null |
在所有节点类型中，只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段是一种'轻量级'的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源。虽然不能把闻到那股片段直接添加到文档中，但是可以将它作为一个仓库来使用。即可以在里面保存将来可能会添加到文档中的节点。要创建文档片段。可以使用如下方法：
document.createDocumentFragment()
文档片段继承了Node的所有方法，通常用于执行那些针对文档的DOM操作。如果将文档中节点添加到文档片段中，就从文档树中移除该节点。
2.8 属性类型
| nodeType | 2 |
| nodeName | 特性的name |
| nodeValue | 特性的值 |
| parentNode | null |
尽管它们也是节点，但特性却不被认为是DOM文档树的一部分。这个Attr对象有3个属性：name，value和specified，其中specified是一个布尔值，用以区别特性是在代码中指定的。
3 DOM部分操作技术
3.1 动态脚本
目的：使用script元素可以像页面中插入javascript代码的方式
- 通过其src特性包含外部文件
- 就是用这个元素来包含代码
3.2 动态样式
所谓动态样式是指样式在页面加载时不存在的样式；动态样式是在页面加载完成后动态添加到页面中的。加载外部样式文件的过程是异步的，也就是说加载样式与执行javascript代码的过程没有固定的次序。一般来说，知不知道样式已经加载完成并不重要。
3.3 操作表格
DOM1级提供了一些操作表格的API
| caption | 保存着对caption元素的指针 |
| tBodies | 是一个tBody元素的HTMLCollection |
| tFoot | 保存着对tFoot元素的指针 |
| tHead | 保存着对thead元素的指针 |
| rows | 是一个表格中所有行的HTMLCollection |
| createTHead() | 创建thead元素，将其放到表格中，返回引用 |
| createTFoot() | 创建tFoot元素，将其放到表格中，返回引用 |
| createCaption() | 创建caption元素，将其放到表格中，返回引用 |
| deleteTHead() | 删除thead元素 |
| deleteTFoot() | 删除TFoot元素 |
| deleteCaption() | 删除caption元素 |
| deleteRow(pos) | 删除指定位置的行 |
| insertRow(pos) | 删除指定位置的行 |
| tbody-rows | 保存着tbody元素中行的HTMLCollection |
| tbody-deleteRow() | 删除指定位置的行 |
| tbody-insertRow() | 向rows集合中的指定位置插入一行，返回对新插入行的引用 |
| tr-cells | 保存这tr元素中单元格的HTMLCollection |
| tr-deleteCell(pos) | 删除指定位置的单元格 |
| tr-insertCell(pos) | 向cells集合中的指定位置插入一个单元格，返回对新单元格的引用 |
3.4 关于使用NodeList
理解NodeList及其近亲NamedNodeMap和HTMLCollection是从整体上透彻理解DOM的关键所在，这三个集合都是“动态的”，换句话说，如果文档结构发生变化时，它们都会得到更新，因此，它们始终保存着最新，最准确的信息。从本质来说，所有NodeList对象都是访问DOM文档时实时查询。
