无码帝 阅读(95) 评论(0)

前言  

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