首页 > web前端 > js教程 > 正文

JavaScript高级程序设计 DOM学习笔记_javascript技巧

WBOY
发布: 2016-05-16 18:02:25
原创
979 人浏览过

第十章 DOM
DOM是针对XML和HTML文档的一个API:即规定了实现文本节点操控的属性、方法,具体实现由各自浏览器实现。
1. 节点层次
1) 文档节点:document,每个文档的根节点。
2) 文档元素:即元素,文档最外层元素,文档节点第一个子节点。
3) Node类型:
①Node是DOM中各种节点类型的基类型,共享相同的基本属性和方法。
□ Node.Element_NODE(1);
□ Node.ATTRIBUTE_NODE(2);
□ Node.TEXT_NODE(3);
□ Node.CDATA_SECTION_NODE(4);
□ Node.ENTITY_REFERENCE_NODE(5);
□ Node.ENTITY_NODE(6);
□ Node.PROCESSING_INSTRUCTION_NODE(7);
□ Node.COMMENT_NODE(8);
□ Node.DOCUMENT_NODE(9);
□ Node.DOCUMENT_TYPE_NODE(10);
□ Node.DOCUMENT_FRAGMENT_NODE(11);
□ Node.NOTATION_NODE(12);
每种节点的nodeType属性返回上述类型之一,为一常量。
通过节点nodeType属性与数字值比较,可得节点类型。
②nodeName和nodeVlue属性。
③每个节点的子节点信息保存在childNodes属性中,childNodes属性中保存一个NodeList对象。
□ NodeList对象,类数组对象,有length属性,但非Array的实例。
□ 访问NodeList中的节点,可以通过方括号,也可以使用item()方法。
var firstChild = someNode.ChildNodes[0];
var secondChild = someNode.ChildNodes.item(1);
var count = someNode.childNodes.length;
□ 将NodeList转为数组对象。
function convertToArray(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes,0); //非IE
}catch(ex){
array = new Array();
for(var i = 0,len = nodes.length; i array.push(nodes[i]);
}
}
return array;
}
④parentName属性:指向文档树中父节点。
⑤previousSibling属性和nextSibling属性:前一个/下一个同胞节点。
⑥firstChild属性和lastChild属性:前一个/后一个子节点。
⑦hasChildNodes()方法:含子节点返回true,反之返回false。
⑧appendChild()方法:向childNodes列表末尾添加一个子节点,返回新增节点。
⑨insertBefore()方法:两个参数:要插入的节点和作为参照的节点。返回新增节点。
⑩replaceChild()方法:两个参数:要插入的节点和要替换节点。返回新增节点。
⑾removeChild()方法:移除节点。
⑿cloneNode()方法:接受一个布尔值。true为深复制,复制节点及子节点。false为浅复制,仅复制本身节点。
⒀nomalize()方法:处理文档树中文本节点。
4) Document类型(针对document对象)
①Document类型表示文档,是HTMLDocument类型的一个实例,表示整个HTML页面。document对象是window对象的一个属性,可作全局对象访问。
②documentElement属性;该属性始终指向HTML页面中的元素。
③body属性;直接指向

元素。
④doctype属性:访问,各浏览器支持不一致。用处有限。
⑤title属性:可获得和设置title的文本。
⑥URL属性:地址栏中的URL。
⑦domain属性:页面的域名(可设置,有限制)
⑧referrer属性:保存链接到当前页面的那个页面的URL
⑨getElementById()方法:传入元素的ID,返回元素节点。
⑩getElementsByTagName()方法:传入元素名,返回NodeList。
□ 在HTML中返回一个HTMLCollection对象,与NodeList类似。
□ 访问HTMLCollection对象:方括号语法,item()方法,namedItem()方法,HTMLCollection对象还可通过元素的name特性取得集合中的项。
⑾getElementsByName()方法:返回带有给定name特性的所有元素。
⑿特殊集合,这些集合都是HTMLCollection对象。
□ document.anchors:包含文档中所有带name特性的元素。
□ document.applets:包含文档中所有的元素。
□ document.forms:包含文档中所有的
元素。
□ document.images:包含文档中所有的JavaScript高级程序设计 DOM学习笔记_javascript技巧元素。
□ document.links:包含文档中所有带href属性的元素。
⒀DOM一致性检测:document.implementation属性就为此提供相应信息和功能的对象。
□ 此对象有一个方法:hasFeature():两个参数:要检测的DOM功能的名称及版本号。
□ 功能:Core、XML、HTML、Views、StyleSheets、CSS、CSS2、Events、UIEvents、MouseEvents、MutationEvents、HTMLEvents、Range、Traversal、LS、LS-Async、Validation
⒁将输出流写入网页:write()、writeln()、open()和close()。
5) Element类型
①用于表现XML或HTML元素,提供了对元素标签名、子节点及特性的访问。
②可用nodeName属性或tagName属性访问元素标签名。tagName会在HTML中返回大写标签名,在XML中会原样返回。
(1)HTML元素
■所有HTML元素都由Element类型子类HTMLElement类型表示,其属性如下:
□id:元素在文档中的唯一标识符。
□title:有关元素的附加说明信息,一般通过工具提示条显示出来。
□lang:元素内容的语言代码,很少使用。
□dir:语言的方向,值为“ltr”或“rtl”,很少使用。
□className:与元素的class特性对应,即为元素指定的css类。
上述这些属性都可以用来取得或修改相应的特性值。
(2)取得特性
①getAttribute()方法:可以取得公认特性和自定义特性的值。
□任何元素的所有特性,也可以通过DOM元素本身的属性来访问。alert(div.id);alert(div.align);
□只有公认的(非自定义的)特性才会以属性的形式添加到DOM对象中。
□style特性通过getAttribute()访问得特性值CSS文本。通过属性访问得一个对象。
□onclick特性:getAttribute(),返回JS代码字符串。通过属性访问返回一个函数。
□一般通过属性取得特性,只有在取自定义特性值时,才用getAttribute()。
(3)设置特性
①setAttribute():两个参数,要设置的特性名和值。如果特性已经存在,setAttribute()会以指定的值替换现有的值;如果特性不存在,setAttribute()则创建该属性并设置相应的值。
□此方法既可以操作HTML特性也可以操作自定义特性。
□所有公认特性都是属性,因此直接给属性赋值可以设置特性的值。
□IE6、IE7中,setAttribute()设置class、style,事件处理程序会每没有任何效果。但不建议通过属性设置特性。
②removeAttribute():彻底删除元素的特性(IE6不支持)。
(4)attributes属性
①此属性包含一个NameNodeMap对象(类似NodeList的“动态”集合)。元素的每一个特性有一个Attr节点表示,每个节点保存在NameNodeMap对象中。
□getNameItem(name):返回返回nodeName属性等于name的节点
□removeNameItem(name):从列表中移除nodeName属性等于name的节点。
□setNameItem(node):向列表中添加节点,以节点的nodeName属性为索引。
□item(pos):返回位于数字pos位置的节点。
(5)创建元素
①使用document.createElement()方法可以创建新元素。参数:标签名。
②IE中createElement()可传入完整的元素标签,防止IE7以及IE6问题:
□不能设置动态创建的");
}
(6)元素的子节点
①元素的childNode属性中包含了它的所有子节点:元素、文本节点、注释或处理指令。
□一般浏览器解析childNodes时会把元素节点空间的空白符解析为文本节点,而IE不会。因此遍历执行操作需要检查nodeType属性。
For(var i= 0, len = element.childNode.length; i> len; i++){
If(element.childNodes[i].nodeType == 1){
//执行某些操作
}
}
□元素节点支持getElementByTagName()方法。
6) Text类型
①文本节点由Text类型表示,包含纯文本内容,不含HTML代码。
□不支持(没有)子节点
□nodeValue属性、data属性可访问Text节点中包含的文本。
②操作文本节点
□appendData(text):将text添加到节点的末尾。
□deleteData(offset,count):从offset位置开始删除count个字符。
□insertData(offset,text):在offset位置插入text;
□replaceData(offset,count,text):用text替换从offset指定的位置开始到offset+count为止处的字符串。
□splitText(offset):从offset指定位置将当前文本节点分成两文本节点。
□substringData(offset,count):提取offset指定的位置开始到offset+count为止处的字符串。
□文本节点有一个length属性,保存节点中字符的数目。而nodeValue.length和data.length中也保存着同样的值。
○修改文本节点值时字符串经HTML编码,特殊符号转义:
div.firstChild.nodeValue = "Someother"; //输出Someother>
③创建文本节点
□使用document.createTextNode()创建新文本节点。参数:要插入的文本(自动按HTML或XML格式编码)
④规范化文本节点
□DOM操作中可向同一父元素插入多个文本节点,但会造成混乱。
□通过node类型继承的normalize()方法可合并同一父元素上的所有文本节点。
⑤分割文本节点
□Text类型方法splitText():与node方法normalize()相反传入一个位置参数,从该位置拆分成两个文本节点,返回后面的文本节点。
□分割文本节点是从文本节点中提取数据的一种常用DOM解析技术。
7) Comment类型
□Comment类型与Text类型继承自相同的基类,因此它拥有除splitText()之外所有字符串操作方法。
□可使用document.createComment()创建注释节点。
8) CDATASection类型
□CDATASection类型只针对基于XML的文档表示CDATA区域。
□CDATASection类型继承自Text类型,拥有除splitText()之外所有方法。
□各大浏览器均无法正确解析这种类型。
9) DocumentType类型
□IE不支持
□在DOM1级中DocumentType对象不能动态创建。
□DocumentType对象保存在document.doctype中。
◇name属性:文档类型名称。
◇entities属性:文档类型描述的实体的NamedNodeMap对象。
◇notation属性:文档类型描述的符号的NamedNodeMap对象。
10) DocumentFragment类型
□DOM规定文档片段(document fragment)是一种“轻量级”的文档,可以包含和控制节点,但不会像完整的文档那样占用额外资源。
□文档片段不能添加到文档中,只会添加文档片段作为“仓库”保存的节点。
var fragment = document.createDomFragment();
var ul = document.getElementById("myList");
var li = null;
for(var i= 0; ili = document.createElement("li");
li.appendChild(document.createTextNode("haha"));
fragment.appendChild(li);
}
ul.appendChild.appendChild(li);
□可以通过appendChild()或insertBefore()将文档片段中内容添加到文档中。
11) Attr类型
□是节点,但特性不被认为是DOM文档树的一部分。很少使用这类节点。
□Attr对象3个属性:
◇name属性:特性名称(如nodeName)
◇value属性:特性的值(如nodeValue)
◇specified属性:布尔值,用以区别特性是在代码中指定的还是默认的。
□不建议直接访问特性节点。建议用getAttribute()
setAttribute()、removeAttribute()方法。0

二、DOM扩展
1. 呈现模式
①document对象的compatMode属性
□值为“CSS1Compat”即标准模式。
□值为“BackCompact”即混杂模式。
②IE8为document对象引入documentMode新属性,返回数值:5(混杂模式)、7(仿真模式)、8(标准模式)
2. 滚动
□滚动方法都是作为HTMLElement类型的扩展存在,可再元素节点上使用。
□scrollIntoView(bool):滚动浏览器窗口或容器元素,以便在视口(viewport)中看到元素。(参数为true或省略,则滚动到顶部)。
□scrollIntoViewIfNeeded(bool):只在当前元素在视口中不可见的情况下,才滚动浏览器窗口或容器元素,让当前元素可见。(Safari和Chorme实现)。
□scrollByLines(lineCount):将元素的内容滚动指定的行数的高度,lineCount可为正/负数。(safari和Chrome可用)
3. children属性
□children属性中只包含元素的子节点中那些也是元素的节点。
□作为HTMLCollection对象。
□Firefox不支持,IE中的children集合会包含注释节点。
4. contains()方法
□应在作搜索起点的祖先节点上调用,传入要检测的节点作参数。返回true则传入节点作为当前节点后代。
□Firefox不支持contains()方法,在DOM3级实现替代的compareDocumentPosition()方法,确定两个节点间关系。Safari2.x以下版本不支持。
兼容各浏览器代码:
function contains(refNode, otherNode){
if(typeof refNode.contains == "function" && (!client.engine.webkit || client.engin.webkit >=552)){
return refNode.contains(otherNode);
}else if(tyepof refNode.compareDocumentPosition =="function"){
return !!(refNode.compareDocumentPosition(otherNode)&16);
}else{
var node = otherNode.parentNode;
do{
if(node === refNode){
Return true;
}else{
node = node.parentNode;
}
}while(node !== null);
return false;
}
}
5. 操作内容
①innerText属性
□可读取节点文档书中由浅入深的所有文本。
□通过inner.Text属性设置节点文本,会移除先前存在的所有子节点,完全改变了DOM树。
□赋给此属性的文本将自动进行HTML编码。
□Firefox不支持innerText,但支持作用类似的textContent属性。
□innerText:支持IE、Safari、Opera、Chrome
□textContent:支持Safari、Firefox、Opera、Chrome
兼容代码:
function getInnerText(element){
return (typeof element.textContent == "string")?element.textContent:element.innerText;
}

function setInnerText(element, text){
if(typeof element.textContent == "string"){
element.textContent = text;
}else{
element.innerText = text;
}
}
②innerHTML属性
□读取信息时,返回当前元素所有子节点的HTML表现。
□写入信息时,会按照指定的值创建新的DOM子树,并以该子树替换当前元素的所有子节点。
□innerHTML限制:插入<script>元素不会被执行。插入<style>也有类似问题。 <BR>□并不是所有元素都有innerHTML属性。不支持的元素有<col>、<colgroup>、<frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>、<title>和<tr>。 <BR>③outerText属性 <BR>□与innerText基本相同,区别在于写入信息时,会替换包含节点 <BR>□Firefox不支持 <BR>□不建议使用。 <BR>④outerHTML属性 <BR>□与innerHTML基本相同,区别在于写入信息时,会替换包含节点。 <BR>□Firefox不支持 <BR>□不建议使用 <BR>⑤内存与性能问题 <BR>□innerText、innerHTML、outerText、outerHTML替换子节点可能会导致浏览器的内存问题。被删除的子树中的元素设置的事件处理程序或具有值为JS对象的属性,依旧存在于内存中。 <BR>□插入大量新HTML时,使用HTML要比通过多次DOM操作有效率得多。 <BR>三、DOM操作技术 <BR>1. 动态脚本 <BR>①插入外部文件: <BR>function loadScript(url){ <BR>var script = document.createElement("script"); <BR>script.type = "text/javascript"; <BR>script.src = url; <BR>document.body.appendChild(script); <BR>} <BR>②指定JavaScript代码方式 <BR>□IE中将<script>视为一个特殊元素,不允许DOM访问其子节点。 <BR>兼容方式: <BR>function loadScriptString(code){ <BR>var script = document.createElement("script"); <BR>script.type = "text/javascript"; <BR>try{ <BR>script.appendChild(document.createTextNode(code)); <BR>}catch(ex){ <BR>script.text = code; <BR>} <BR>document.body.appendChild(script); <BR>} <BR>2. 动态样式 <BR>①外部链接 <BR>function loadStyles(url){ <BR>var link = document.createElement("link"); <BR>link.rel = "stylesheet"; <BR>link.href = url; <BR>var head = document.getElementsByTagName("head")[0]; <BR>head.appendChild(link); <BR>} <BR>②使用<style>元素来包含嵌入式CSS <BR>□IE将<style>视为一个特殊的、与<script>类似的节点,不允许访问其子节点。 <BR>□在重用一个<style>元素并再次设其styleSheet.cssText属性,有可能导致浏览器崩溃。 <BR>fucnction loadStyleString(css){ <BR>var style = document.createElement("style"); <BR>style.type = "text/css"; <BR>try{ <BR>style.appendChild(document.createTextNode(css)); <BR>}catch(ex){ <BR>style.styleSheet.cssText = css; <BR>} <BR>var head = document.getElementsByTagName("head")[0]; <BR>head.appendChild(style); <BR>} <BR>3. 操作表格 <BR>①为<table>元素添加的属性和方法 <BR>□caption:保存着对<caption>元素(如果有)地指针; <BR>□tBodies:是一个<tobdy>元素的 HTMLCollection; <BR>□tFoot:保存着对<tfoot>元素(如果有)的指针; <BR>□tHead:保存着对<thead>元素(如果有)的指针; <BR>□rows:是一个表格中所有行的HTMLCollection; <BR>□createTHead():创建<thead>元素,将其放到表格中,返回引用。 <BR>□createCaption(): <BR>□deleteTHead():删除<thead>元素。 <BR>□deleteTFoot(): <BR>□deleteCaption(): <BR>□deleteRow(pos): <BR>□insertRow(pos):向rows集合中指定位置插入一行。 <BR>②为<tbody>元素添加的属性和方法有: <BR>□rows:保存着<tbody>元素中行的HTMLCollection。 <BR>□deleteRow(pos):删除指定位置的行; <BR>□insertRow(pos):向rows集合中的指定位置插入一行,返回插入行的引用。 <BR>③为<tr>元素添加的属性和方法 <BR>□cells:保存着<tr>元素中单元格的HTMLCollection; <BR>□deleteCell(pos):删除指定位置的单元格。 <BR>□insertCell(pos):向cells集合中指定位置插入一单元格,返回插入的单元格引用。 <BR>4. 使用NodeList <BR>□NodeList及其“近亲”NamedNodeMap(Element类型中的attribute属性)和HTMLCollection,这三个集合都是“动态的”,每当文档结构发生变化时,它们都会得到更新。 <BR>□尽量减少访问NodeList的次数。因每次访问NodeList,都会运行一次基于文档的查询。可考虑将从NodeList取得的值缓存起来。 <br><br>第十一章 DOM2和DOM3 <BR>一、DOM变化 <BR>1. 针对XML命名空间的变化 <BR>①Node类型的变化 <BR>■DOM2级中,Node类型包含下列特定于命名空间的属性。 <BR>□localName:不带命名空间前缀的节点名称。 <BR>□namespaceURI:命名空间URI,未指定则为null。 <BR>□prefix:命名空间前缀,未指定则为null。 <BR>■DOM3级 <BR>□isDefaultNamespace(namespaceURI):指定的namespaceURI在当前的默认命名空间的情况下返回true。 <BR>□lookupNamespaceURI(prefix):返回给定prefix的命名空间。 <BR>□lookupPrefix(namespaceURI):返回给定namespaceURI的前缀。 <BR>②Document类型变化 <BR>■DOM2级中,与命名空间有关 <BR>□createElementNS(namespaceURI, tagName):使用给定的tagName创建一个属于命名空间namespaceURI的新元素。 <BR>□createAttributeNS(namespaceURI, attributeName): <BR>□getElementBytagNameNS(namespaceURI, tagName): <BR>③Elment类型的变化 <BR>■DOM2级核心中 <BR>□getAttributeNS(namespaceURI, localName) <BR>□getAttributeNodeNS(namespaceURI, localName) <BR>□getElementsByTagNameNS(namespaceURI, localName) <BR>□hasAttributeNS(namespaceURI, localName) <BR>□removeAttributeNS(namespaceURI, localName) <BR>□setAttributeNodeNS(attrNode):设置属于命名空间namespaceURI的特性节点。 <BR>④NamedNodeMap类型的变化 <BR>□getNamedItemNS(namespaceURI, localName) <BR>□removeNamedItemNS(namespaceURI, localName) <BR>□setNamedItemNS(node):添加node,这个节点已事先指定了命名空间信息。 <BR>2. 其他方面的变化 <BR>①DocumentType类型的变化 <BR>□新增3个属性:publicId、systemId和internalSubset <BR>□publicId、systemId表示文档类型声明中的两个信息段。 <BR>□internalSubset:用于访问包含在文档类型声明中的额外定义。 <BR>②Document类型的变化 <BR>□importNode()方法:从一个文档中取得一个节点,然后将其导入到另一个文档,使其成为文档结构的一部分。 <BR>◇每个节点都有一个ownerDocument属性,表示所属文档。 <BR>◇appendChild()传入节点属于不同文档,会导致错误。 <BR>◇importNode()方法与Element的cloneNode方法非常相似,接受两个参数:要复制的节点和一个表示是否复制子节点的布尔值。返回原节点的副本,但能够在当前文档中使用。 <BR>□defaultView属性:保存着一个指针,指向拥有给定文档的窗口(或框架)。 <BR>◇IE不支持此属性,但有等价属性parentWindow。 <BR>◇确定文档归属窗口兼容代码: <BR>var parentWindow = document.defaultView || document.parentWindow; <BR>□createDocuemntType():创建一个新的DocumentType节点,接受三个参数:文档类型名称、publicId、systemId。 <BR>□createDocument()方法:创建新文档。三个参数:针对文档中元素的namespaceURI、文档元素的标签名、新文档的文档类型。 <BR>□“DOM2级HTML”模块为document.implementation新增一个方法,名叫createHTMLDocument()。只接受title中的文本作为参数。返回新HTML文档。包括<html>、<head>、<title>和<body>。 <BR>③Node类型的变化 <BR>□isSupported()方法:与DOM1级中document.implementation引入的hasFeature()方法类似。用于确定当前节点具有什么能力。两个参数:特性名和特性版本号。 <BR>□isSameNode()方法:传入节点,与引用节点为同一个节点则返回true。 <BR>□isEqualNode()方法:传入节点,与引用节点相等返回true。 <BR>□setUserData()方法:将数据指定给节点。三个参数:要设置的键,实际的数据和处理函数。 <BR>◇处理函数接受5个参数:表操作类型的数值(1复制2导入3删除4重命名)、数据键、数据值、源节点和目标节点。 <BR>var div = document.createElement("div"); <BR>div.setUserData("name","Nicholas",fucntion(operation, key, value, src, dest){ <BR>if(operation == 1){ <BR>dest.setUserData(key,value); <BR>} <BR>}); <BR>④框架的变化 <BR>□框架和内嵌框架分别用HTMLFrameElement和HTMLIFrameElement表示。 <BR>□contentDocument属性:DOM2级中框架、内框架的新属性。此属性包含一个指针,指向表示框架内容的文档对象。 <BR>□contentDocument属性是Document类型实例,因此可以像使用其他HTML文档一样使用它,包括所有属性和方法。 <BR>□IE8之前不支持框架中的contentDocument属性,但支持一个叫contentWindow属性,返回框架的window对象。 <BR>□访问内嵌框架文档对象兼容代码: <BR>var iframe = document.getElementById("myIframe"); <BR>var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; <BR>二、样式 <BR>1. 访问元素的样式 <BR>①style属性 <BR>□支持style特性的HTML元素在JS中都有一个对应的style属性。 <BR>□这style对象是cssStyleDeclaration的实例,包含通过style特性指定的样式。 <BR>□在style特性指定的任何CSS属性都将表现为这个style对象的相应属性。对于使用短划线的CSS属性名,必须转换成驼峰大小写形式才能通过js访问。其中float属性不可直接使用。IE用styleFloat访问,其他浏览器用cssFloat访问。 <BR>□如果没有为元素设置style特性,那style对象中可能会包含一些默认值,但这些值不反映元素正确的样式信息。 <BR>②DOM样式属性和方法 <BR>1)DOM2级还为style对象定义了一些属性和方法。在提供特性值时也可修改样式。 <BR>□cssText:访问style特性中的css代码。 <BR>□length:应用给元素的css属性数量。 <BR>□parentRule:表示css信息的CSSRule对象。 <BR>□getPropertyCSSValue(propertyName):返回包含给定属性值的CSSValue对象,含两个属性cssText和cssValueType。 <BR>□getProperytPriority(propertyName):如果给定的属性使用了!important设置,则返回“important”,否则返回空字符串。 <BR>□item(index):返回给定位置的CSS属性的名称。 <BR>□removeProperyt(propertyName):从样式中删除给定属性。 <BR>□setProperty(propertyName, value, priority):将给定属性设置为相应的值,并加上优先权标志(“important”或者一个空字符串)。 <BR>2)使用 <BR>□设计length属性的目的,就是将其与item()方法配套使用。以便迭代元素中定义的css属性。 <BR>□Firefox、Safari、Opera9及更高、chrome均支持这些属性和方法。IE只支持cssText。 <BR>□getPropertyCSSValue()只有Safari和chrome支持。 <BR>③计算的样式 <BR>□“DOM2级样式”增强了document.defaultView,提供了getComputedStyle()方法。 <BR>□getComputedStyle():2个参数:要取得计算样式的元素和一个伪元素字符串(如:after)。如果不需要伪元素信息,第二个参数可以为null。返回一个CSSStyleDeclaration对象(与style属性类型相同)。 <BR>□IE不支持getComputedStyle()方法。但IE中有style特性的元素均有一个currentStyle属性(CSSStyleDeclaration的实例)包含当前元素全部计算后的样式。 <BR>□计算样式兼容代码: <BR>var myDiv = document.getElementById("myDiv"); <BR>var computedStyle = document.defaultView.getComputedStyle(mydiv, null) || myDiv.currentStyle; <BR>alert(computedStyle.width); <BR>alert(computedStyle.height); <BR>2. 操作样式表 <BR>①CSSStyleSheet类型 <BR>1)操控<link>元素样式表和<style>元素样式表。 <BR>2)确定浏览器是否支持DOM2级样式表。 <BR>var supportDOM2StyleSheets = document.implementation.hasFeature("StyleSheet","2.0"); <BR>3)CSSStyleSheet继承自StyleSheet,后者可以作为一个基础接口来定义非CSS样式表。从StyleSheet接口继承而来的属性如下: <BR>□disabled:表示样式表是否被禁用的布尔值。可读/写。设为true则禁用。 <BR>□href:如果样式表是通过<link>包含的,则是样式表的URL,否则是null。 <BR>□media:当前样式表支持的所有媒体类型的集合。与所有DOM集合一样,有length属性和item()方法。 <BR>□ownerNode:指向拥有当前样式表的节点的指针。若通过@import导入则属性为null。IE不支持此属性。 <BR>□parentStyleSheet:当前样式表是通过@import导入的情况下,这个属性指向导入它的样式表的指针。 <BR>□title:ownerNode中title属性的值。 <BR>□type:表示样式表类型的字符串。对css样式表而言,这个字符串是“type/css”。 <BR>■以上属性除disabled外,全部只读。 <BR>4)CSSStyleSheet在上述基础上添加以下属性和方法: <BR>□cssRule:样式表中包含的样式规则的集合。IE不支持,但有类似的rules属性。 <BR>□ownerRule:如果样式表是通过@import导入的,这个属性就是一个指针,指向表示导入的规则;否则为null。IE不支持这个属性。 <BR>□deleRule(index):删除cssRules集合中指定位置的规则。IE不支持,但支持一类似的removeRule()方法。 <BR>□insertRule(rule,index):向cssRules集合中指定的位置插入rule字符串。IE不支持,但支持类似的addRule()方法。 <BR>5)获取样式表对象 <BR>□应用于文档的所有样式表是通过document.styleSheets集合来表示的。通过这个集合的length属性可以获取文档中样式表的数量,而通过方括号语法或item()方法可以访问每一个样式表。 <BR>var sheet = null; <BR>for(var i = 0, len = document.styleSheets.length; i < len; i++){ <BR>sheet = document.styleSheets[i]; <BR>alert(sheet.href); <BR>} <BR>□不同浏览器的document.styleSheets返回的样式表也不同。所有浏览器都会包含<style>元素和rel特性被设置为“stylesheet”的<link>元素引入的样式表。 <BR>□可直接通过<link>或<style>元素取得CSSStyleSheet对象。DOM规定了一个包含CSSStyleSheet对象的属性,名叫sheet;IE不支持,但IE支持类似的styleSheet属性。 <BR>function getStyleSheet(element){ <BR>return element.sheet || element.styleSheet; <BR>} <BR>//取得第一个<link>元素引入的样式表 <BR>var link = document.getElementsByTagName("link")[0]; <BR>var sheet = getStylesheet(link); <BR>②CSS规则 <BR>1)CSSRule对象表示样式表中的每一条规则,是一个供其他多种类型继承的基类型,其中最常见的就是CSSStyleRule类型,表示样式信息。 <BR>2)CSSStyleRule对象包含下列属性: <BR>□cssText:返回整条规则对应的文本,IE不支持。 <BR>□parentRule:如果当前规则是导入的规则,这属性引用的就是导入规则;否则这个值为null。IE不支持。 <BR>□parentStyleSheet:当前规则所属的样式表。IE不支持。 <BR>□selectorText:返回当前规则的选择符文本。 <BR>□style:一个CSSStyleDeclaration对象,可以通过它设置和取得规则中特定的样式值。 <BR>□type:表示规则类型的常量值。对于样式规则,这个值是1。IE不支持。 <BR>■其中最常用的属性是cssText、selectorText和style。 <BR>□cssText属性与style.cssText属性类似但并不相同。前者包含选择符文本和围绕样式信息的花括号,后者只含样式信息(类似于元素的style.cssText)。而cssText只读,style.cssText可读/写。 <BR>var sheet = document.styleSheets[0]; <BR>var rules = sheet.cssRules || sheet.rules; <BR>var rule = rules[0]; <BR>alert(rule.style.backgroundColor); <BR>rule.style.backgroundColor="red"; <BR>③创建规则 <BR>□insertRule()方法:接受两个参数:规则文本和表达在哪里插入规则的索引。//IE不支持 <BR>sheet.insertRule("body{background-color:silver}",0); //DOM方法。 <BR>□addRule():IE中支持。两个必选参数:选择符文本和CSS样式信息。一个可选参数:插入规则的位置。//仅IE支持 <BR>Sheet.addRule("body","background-color:silver",0); <BR>□跨浏览器兼容 <BR>function insertRule(sheet, selectorText, cssText, position){ <BR>if(sheet.insertRule){ <BR>sheet.insertRule(selectorText + "{" + cssText + "}", position); <BR>}else if(sheet.addRule){ <BR>sheet.addRule(selectorText,cssText,position); <BR>} <BR>} <BR>调用:insertRule(document.styleSheets[0], "body", "background-color:red", 0); <BR>□当需要添加的规则多时,操作繁琐。建议采用动态加载样式表。 <BR>④删除规则 <BR>□sheet.deleteRule(0); //DOM方法,IE不支持 <BR>Sheet.removeRule(0); //IE方法,两者都是传入要删除的规则的位置。 <BR>□跨浏览器兼容: <BR>function deleteRule(sheet, index){ <BR>if(sheet.deleteRule){ <BR>Sheet.deleteRule(index); <BR>}else if(sheet.removeRule){ <BR>Sheet.removeRule(index); <BR>} <BR>} <BR>调用方式:deleteRule(document.styleSheets[0],0); <BR>□这种做法不是实际web开发中常见做法。删除规则会影响CSS层叠效果。慎用。 <BR>3. 元素大小(非DOM2级样式,但所有浏览器支持) <BR>①偏移量(offset dimension) <BR>定义:包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定,包括所有内边距、滚动条和边框大小(注意,不包括外边距) <BR>□offsetHeight:元素在垂直方向上占用的空间大小,以像素计。 <BR>□offsetWidth:元素在水平方向上占用的空间大小,以像素计。 <BR>□offsetLeft:元素左边框至包含的左内边框之间的像素距离。 <BR>□offsetTop:元素的上边框至包含元素的上内边框之间的像素距离。 <BR>△其中offsetLeft和offsetTop属性与包含元素有关,包含元素的引用保存在offsetParent属性中。offsetParent属性不一定与parentNode的值相等。 <BR>△这些属性是只读的,每次访问需要重新计算。若重复使用,应保存在局部变量中。 <BR>②客户区大小(client dimension) <BR>元素内容及其内边距所占大小。滚动条占用空间不算在内。 <BR>□clientWidth属性:元素内容区宽度加上左右内边距宽度。 <BR>□clientHeight属性:元素内容区高度加上上下内边距高度。 <BR>□确定浏览器视口大小可用document.documentElement或document.body(IE6的混杂模式中)。 <BR>function getViewport(){ <BR>if(document.compatMode == "BackCompat"){ <BR>return{ <BR>width:document.body.clientWidth, <BR>height:document.body.clientheight <BR>}; <BR>}else{ <BR>return{ <BR>width:document.documentElement.clientWidth, <BR>height:document.documentElement.clientHeight <BR>}; <BR>} <BR>} <BR>③滚动大小 <BR>指包含滚动内容的元素的大小。 <BR>□scrollHeight:在没有滚动条的情况下,元素内容的总高度。 <BR>□scrollWidth:在没有滚动条的情况下,元素内容的总宽度。 <BR>□scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。 <BR>□scrollTop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。 <BR>◇在确定文档的总高度时(包括基于视口的最小高度时),必须取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值,保证跨浏览器。 <BR>Var docHeight = Max.max(document.documentElement.scrollHeight,document.documentElement.clientHeight); <BR>Var docWidth = Max.max(document.documentElement.scrollWidth,document.docuemntElement.clientWidth); <BR>注:对于运行在混杂模式下的IE,则需要用document.body代替document.documentElement。 <BR>◇通过scrollLeft和scrollTop属性既可以确定元素当前的滚动状态,也可以设置元素滚动位置。 <BR>function scrollToTop(element){ <BR>if(element.scrollTop != 0){ <BR>element.scrollTop = 0; <BR>} <BR>} <BR>④确定元素大小 <BR>□IE、Firefox3及更高和Opera9.5及更高为每一个元素提供了一个getBoundingClientRect()方法。这个方法返回一个矩形对象,含4个属性:left、top、right和bottom。这些属性给出了元素在页面中相对于视口的位置。但IE认为左上角坐标为(2,2),其他浏览器认为是(0,0)。 <BR>function getBoundingClientRect(element){ <BR>var scrollTop = document.documentElement.scrollTop; <BR>var scrollLeft = document.documentElement.scrollLeft; <br><br>if(element.getBoundingClientRect){ <BR>If(typeof arguments.callee.offset != "number"){ <BR>var temp = document.createElement("div"); <BR>temp.style.cssText = "position:absolute;left:0;top:0;"; <BR>document.body.appendChild(temp); <BR>arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop; <BR>document.body.removeChild(temp); <BR>temp = null; <BR>} <br><br>var rect = element.getBoundingClientRect(); <BR>var offset = arguments.callee.offset; <br><br>return{ <BR>left: rect.left + offset, <BR>right: rect.right + offset, <BR>top: rect.top + offset, <BR>bottom: rect.bottom + offset <BR>}; <BR>}else{ <BR>var actualLeft = getElementLeft(element); <BR>var actualTop = getElementTop(element); <br><br>return{ <BR>left: actualLeft - scrollLeft, <BR>right: actualLeft + element.offsetWidth - scrollLeft, <BR>top: actualTop - scrollTop, <BR>bottom: actualTop + element.offsetHeight - scrollTop <BR>} <BR>} <BR>} <br><br>三、遍历 <BR>①概况:“DOM2级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM结构的类型:NodeIterator和TreWalker。这两个类型能够基于给定的起点对DOM结构执行深度优先(depth-first)的遍历操作。 <BR>□在与DOM兼容版本中可访问这些对象。IE不支持遍历。 <BR>□检查浏览器对DOM2级遍历能力的支持。 <BR>var supportsTraversals = document.implementation.hasFeature("Traversal","2.0"); <BR>var supportsNodeIterator = (typeof document.createNodeIterator == "function"); <BR>var supportsTreeWalker = (typeof document.createTreeWalker == "function"); <BR>②NodeIterator <BR>1)可以使用document.createNodeIterator()方法创建它的新实例。 <BR>接受4个参数: <BR>□root:想要作为搜索起点的树种的节点。 <BR>□whatToShow:表示要访问哪些节点的数字代码。 <BR>□filter:是一个NodeFilter对象,或者一个表示应该接受还是拒绝某种特定节点的函数。 <BR>□entityReferenceExpansion:布尔值,表示是否要扩展实体引用。此参数在HTML页面中没有用。 <BR>■whatToShow参数是一个位掩码,其值以常量形式在NodeFilter类型中定义。 <BR>□NodeFilter.SHOW_ALL:显示所有类型的节点。 <BR>□NodeFilter.SHOW_ELEMENT:显示元素节点。 <BR>□NodeFilter.SHOW_ATTRIBUTE:显示特性节点。由于DOM结构原因,实际上不能使用这个值。 <BR>□NodeFilter.SHOW_TEXT:显示文本节点。 <BR>□NodeFilter.SHOW_CDATA_SECTION:显示CDATA节点。对HTML无用。 <BR>□NodeFilter.SHOW_ENTITY_REFERENCE:显示实体引用节点。对HTML无用。 <BR>□NodeFilter.SHOW_ENTITYPE:显示实体节点。对HTML无用。 <BR>□NodeFilter.SHOW_PROCESSING_INSTRUCTION:显示处理指令节点。对HTML无用。 <BR>□NodeFilter.SHOW_COMMENT:显示注释节点。 <BR>□NodeFilter.SHOW_DOCUMENT:显示文档节点。 <BR>□NodeFilter.SHOW_DOCUMENT_TYPE:显示文档类型节点。 <BR>□NodeFilter.SHOW_DOCUMENT_FRAGMENT:显示文档片段节点。对HTML无用。 <BR>□NodeFilter.SHOW_NOTATION:显示符号节点。对HTML无用。 <BR>◇除了NodeFilter_SHOW_ALL外,可以使用按位或操作符来组合多个选项。 <BR>var whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT; <BR>◇用filter参数自定义NodeFilter对象或一个过滤器函数。 <BR>NodeFilter对象只有一个方法,即acceptNode(),访问则放回NodeFilter.FILTER_ACCEPT,不访问则返回NodeFilter.FILTER_SKIP <BR>例1:迭代器 <BR>var filter= { <BR>acceptNode:function(node)P{ <BR>return node.tagName.toLowerCase()=="p" ? <BR>NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; <BR>} <BR>} <BR>}; <BR>var iterator = document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false); <BR>例2:filtr参数也可以是一个与acceptNode方法类似的函数。 <BR>var filter = function(node){ <BR>return node.tagName.toLowerCase() == "p" ? <BR>NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; <BR>}; <BR>var iterator = document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false); <BR>2)NodeIterator类型主要两个方法:nextNode()和previousNode()。 <BR>var div = document.getElemetnById("div1"); <BR>var iterator = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false); <BR>var node = iterator.nextNode(); <BR>while(node !== null){ <BR>alert(node.tagName); <BR>node = iterator.nextNode(); <BR>} <BR>③TreeWalker <BR>1)TreeWalker是NodeIterator的一个更高级版本。除了有nextNode()和previousNode()外,还有下列用于在不同方向上遍历DOM结构的方法: <BR>□parentNode():遍历到当前节点的父节点。 <BR>□firstChild():遍历到当前节点的第一个子节点。 <BR>□lastChild():便历到当前节点的最后一个子节点。 <BR>□nextSibling():遍历到当前节点的下一个同辈节点。 <BR>□previousSibling():遍历到当前节点的上一个同辈节点。 <BR>2)创建TreeWalker对象要使用document.createTreeWalker()方法,接受4个参数,与document.createNodeIterator()方法相同。 <BR>□其中第3个参数filter返回值除了可以返回NodeFilter.FITER_ACCEPT和NodeFilter.FILTER_SKIP外,还可以使用NodeFILTER_REJECT(作用:跳过相应的节点及该节点的整个子树)。 <BR>□TreeWalker强大之处在于能够在DOM结构中沿任何方向移动。 <BR>◇例:遍历DOM树,即使不定义过滤器,也可以取得所有<li>元素。 <BR>var div = document.getElementById("div1"); <BR>var walker = document.createTreeWalker(div,NodeFilter.SHOW_ELEMENT,null,false); <BR>walker.firstChild(); <BR>walker.nextSibling(); <BR>var node = walker.firstChild(); <BR>while(node !== null)} <BR>alert(node.tagName); <BR>node = walker.nextSibling(); <BR>} <BR>□TreeWalker类型还有一个属性,名叫currentNode,表示任何遍历方法在上一次遍历中返回的节点。 <BR>四、范围 <BR>基本定义: <BR>通过范围可以选择文档中的一个区域,而不必考虑节点的界限(选择在后台完成,对用户看不见)。在常规DOM操作中不能更有效地修改文档时,使用范围往往可以达到目的。 <BR>1.DOM中的范围 <BR>①概况: <BR>1)DOM2级在Document类型中定义了createRange()方法。 <BR>□检查是否支持范围: <BR>var supportsRange = document.implementation.hasFeature("Range","2.0"); <BR>var alsoSupportsRange = (typeof document.createRange == "function"); <BR>□创建DOM范围: var range = document.createRange(); <BR>2)Range类型实例中,提供当前范围在文档中的位置信息的属性: <BR>□startContainer:包含范围起点的节点(即选取中第一个节点的父节点) <BR>□startOffset:范围在startContainer中起点的偏移量。如StartContainer是文本节点,则startOffset就是范围起点之前跳过的字符数量。否则,startOffset就是范围中第一个子节点在父节点中的索引。 <BR>□endContainer:包含范围终点的节点(即选取最后一个节点的父节点)。 <BR>□endOffset:范围在endContainer中终点的偏移量(规则如startoffset) <BR>□commonAncestorContainer:startContainer和endContainer共同的祖先节点在文档树种位置最深的那个。 <BR>②用DOM范围实现简单选择: <BR>1)使用范围选择文档中的一部分: <BR>□selectNode():传入一个DOM节点,选择整个节点,包括子节点作范围。 <BR>□selectNodeContents():传入一个DOM节点,只选择子节点作范围。 <BR>2)更精细地控制范围: <BR>□setStartBefore(refNode):将范围的起点设置在refNode之前,因此refNode也就是范围选取中第一个子节点。范围的位置属性自动更新。 <BR>□setStartAfter(refNode): <BR>□setEndBefore(refNode): <BR>□setEndAfter(refNode): <BR>③用DOM范围实现复杂选择: <BR>□setStart():传入一个参照点和一个偏移量。参照节点成startContainer,而偏移量成startOffset。 <BR>□setEnd():传入一参照点和一个偏移量。参照节点成endContainer,而偏移量成endOffset。 <BR><p id="p1"><b>Hello world! //使用范围选择l到o。 <BR>var p1 = document.getElementById("p1"); <BR>var helloNode = p1.firstChild.firstChild; <BR>var worldNode = p1.lastChild; <BR>var range = document.createRange(); <BR>range.setStart(helloNode,2); <BR>range.setEnd(worldNode,3); <BR>④操作DOM范围中的内容 <BR>□在调用操作方法时,后台会为范围创建有效的文档片段及DOM结构。P275 <BR>□deleteContents():从文档中删除范围所包含的内容。 <BR>□extractContents():从文档中删除范围内容,返回范围文档片段。 <BR>⑤插入DOM范围中的内容 <BR>□insertNode():向范围选区的开始处插入一个节点。 <BR>□surroundContents():接受一个参数,即环绕范围内容的节点。 <BR>a.提取出范围中的内容(类似执行extractContent()) <BR>b.将给定节点插入到文档中原来范围所在的位置上。 <BR>c.将文档片段的内容添加到给定节点中。 <BR>⑥折叠DOM范围 <BR>□所谓折叠范围,就是指范围中未选择文档的任何部分。 <BR>□collapse()方法:一个参数布尔值。true折叠到范围起点,false折叠到范围终点。可以用collapsed属性检查是否已经折叠。 <BR>range.collapse(true); //折叠到起点 <BR>alert(range.collapsed); //输出true <BR>⑦比较DOM范围 <BR>在有多个范围的情况下,可以使用compareBoundaryPoints()方法来确定这些范围是否有公共的边界(起点或终点)。两个参数:表示比较方式的常量和要比较的范围。 <BR>比较方式常量值: <BR>□Range.START_TO_START(0):比较第一个范围和第二个范围起点。 <BR>□Range.START_TO_END(1): <BR>□Range.END_TO_END(2): <BR>□Range.END_TO_STRAT(3): <BR>⑧复制DOM范围 <BR>□cloneRange()方法:var newRange = range.cloneRange(); <BR>⑨清理DOM范围 <BR>□调用detach()方法,从文档分离出范围。 <BR>range.detach(); //从文档中分离 <BR>range = null; //解除引用 <BR>2.IE中的范围 <BR>①概况: <BR>□IE不支持DOM范围。支持类似的文本范围(text range)。 <BR>□文本范围处理的主要是文本(不一定是DOM节点)。通过<body>、<button>、<input>和<textarea>等元素调用createTextRange()方法。 <BR>□通过document创建的范围可以在页面中的任何地方使用。 <BR>var range = document.body.createTextRange(); <BR>②用IE范围实现简单选择 <BR>□findText()方法:找到第一次出现的给定文本,并将范围移过来以环绕该文本。返回布尔值,表示是否找到文本。 <BR>◇使用text属性可返回范围中文本。 <BR>var range = document.body.createTextRange(); <BR>var found = range.findText("Hello"); <BR>◇可为findText传入另一个参数,负值即当前位置向后搜,正值则向前搜。 <BR>□moveToElementText()方法:类似DOM中selectNode()方法。接受一个DOM元素,并选择该元素的所有文本,包括HTML标签。 <BR>◇范围可用htmlText属性取得范围全部内容,包括HTML。 <BR>③使用IE范围实现复杂选择 <BR>□4个方法:move()、moveStart()、moveEnd()、expand();两个参数:移动单位和移动单位数量。移动单位为以下一种字符串: <BR>◇"character":逐个字符地移动。 <BR>◇"word":逐个单词(一系列非空格字符地移动) <BR>◇"sentence":逐个句子(一系列句号、问好或感叹号结尾的字符地移动) <BR>◇"textedit":移到当前范围选取的开始或结束位置。 <BR>□moveStart():移动到范围起点;moveEnd()移动到范围终点。 <BR>□expand():将任何部分选择的文本全部选中。 <BR>□move()方法:首先会折叠当前范围(起点终点相等),然后将范围移动指定的单位数量。 <BR>④操作IE范围中的内容 <BR>□范围仅含文本可通过text属性读写文本。 <BR>□pasteHTML()方法:向范围插入HTML代码。 <BR>⑤折叠IE范围 <BR>□collapse()方法:传入布尔值,true折叠到起点,false折叠到终点。 <BR>□检查折叠是否完毕:boundingWidth属性等于0 <BR>var isCollapse = (range.boundingWidth == 0); <BR>⑥比较IE范围 <BR>□compareEndPoints()方法:两个参数:比较类型和要比较的范围。 <BR>◇比较类型取值字符串:“startToStart”“StartToEnd”、“EndToEnd”和“EndToStart”。 <BR>◇如果第一个范围边界位于第二个前,返回-1;相等返回0;在后面返回1. <BR>□isEquanl()用于确定两个范围是否相等。 <BR>□inRange()用于确定一个范围是否包含另一个范围。 <BR>⑦复制IE范围 <BR>使用duplicate()方法,复制文本范围,返回副本。 <BR>var newRange = range.duplicate(); </script>
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板