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