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及更早版本中动态建立元素的某些问题：

1. 不能设置动态建立iframe元素的name特性
2. 不能经过表单的reset()方法重设动态建立的input
3. 动态建立的type特性值为reset的button元素重设不了表单
4. 动态建立的一批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代码的方式

1. 经过其src特性包含外部文件
2. 就是用这个元素来包含代码

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文档时实时查询。