找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

查看: 9031|回复: 0

Js杂谈-DOM

50

主题

1057

帖子

1108

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1108

活跃会员热心会员最佳导师默默耕耘突出贡献优秀版主荣誉管理论坛元老

blueelwang 发表于 2013-12-24 09:48:46 | 显示全部楼层 |阅读模式
前言  
对jQuery的依赖。导致js的原生方法的淡忘,如果是封装自己的库,那势必要用到js的许多原生方法。从Jquery强大的dom处理开始,我们开始回顾javascript那些古老而坚挺的DOM方法。先从0级DOM入手。
1 节点类型
nodeTypename
1element_node
2attribute_node
3text_node
4cdata_section_node
5entity_reference_node
6entity_node
7processing_instruction_node
8comment_node
9document_node
10document_type_node
11document_fragment_node
12notation_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
nodeType9
nodeName'#document'
nodeValuenull
parentNodenull
ownerDocumentnull





document表示文档,在浏览器中,document对象时HTMLDocument(继承自Document类型)的一个实例,表示整个页面。而却document对象时window对象的一个属性。
document有两个内置属性1.documentElement:直接获取HTML元素.等同于childNodes[0],firstChild2.doctype:获取文档类型节点其中第一个属性是所有浏览器都支持,第二个属性:IEn-8将其解析成注释节点。所以其值为nullIE9+ 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
nodeType1
nodeName元素的标签名
nodeValuenull
parentNodeElement或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 文本元素
nodeType3
nodeName#text
nodeValue包含的文本内容
parentNodeelement
可以通过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 注释节点
nodeType8
nodeName#comment
nodeValue注释的内容
parentNodeDocument或者Element
Comment类型与Text类型继承自相同的基类,因此它拥有除splitText()之外的所有字符串操作方法。与text类型相似,也可以通过nodeValue或data属性来取得注释的内容,比如访问一个注释
var div = document.getElementById('myDiv');var comment = div.firstChild;alert(comment.data);
同样,注释同样可以创建,使用document.createComment()方法,其参数是传入注释文本。
2.5 CDATA元素
nodeType4
nodeName#cdata-section
nodeValueCDATA区域中的内容
parentNodeDocument或是element
不支持子节点。CDATA区域出现在XML文档中,因此多数浏览器都会把CDATA区域解析错误地解析成Comment或Element。可以使用document.createCDataSection()来在XML文件中创建CDATA区域。
2.6 DocumentType类型
nodeType10
nodeNamedoctype
nodeValuenull
parentNodeDocument
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 文档片段
nodeType11
nodeName#document-fragment
nodeValuenull
parentNodenull
在所有节点类型中,只有DocumentFragment在文档中没有对应的标记。DOM规定文档片段是一种'轻量级'的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源。虽然不能把闻到那股片段直接添加到文档中,但是可以将它作为一个仓库来使用。即可以在里面保存将来可能会添加到文档中的节点。要创建文档片段。可以使用如下方法:
document.createDocumentFragment()
文档片段继承了Node的所有方法,通常用于执行那些针对文档的DOM操作。如果将文档中节点添加到文档片段中,就从文档树中移除该节点。
2.8 属性类型
nodeType2
nodeName特性的name
nodeValue特性的值
parentNodenull
尽管它们也是节点,但特性却不被认为是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文档时实时查询。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表