《JavaScript系列讲座(五)-高级DOM技术课件》由会员分享，可在线阅读，更多相关《JavaScript系列讲座(五)-高级DOM技术课件（29页珍藏版）》请在金锄头文库上搜索。
1、JavaScript系列讲座(六),高级DOM技术,高级DOM技术,样式编程 利用CSS创建可折叠区域 访问样式表 最终样式 自定义鼠标提示 innerText与innerHTML outerText与outerHTML IE中的范围编程,样式编程 CSS于1996年被提出后,它颠覆了开发人员格式化HTML页面的方式,很自然，支持CSS的下一步就是让javascript能够访问样式表 IE4.0为每一个页面上的元素都引入了一个style对象来管理元素的CSS样式Style对象包含与每个CSS样式对应的属性. 注意：style对象中，两个单词的样式的表示方式是通过将第一个单词加上首字母大写的第二
2、个单词，且单词间没有横线,如：, 注意：可以用style.cssText来得到一个对象上所应用的css字符串,案例1:自定义鼠标提示,click me 这是我自己写的提示 这是我自己写的提示 , function showTip(oEvent) /alert(document.documentElement.scrollTop); var oDiv = document.getElementById(divTip1); oDiv.style.visibility =visible; oDiv.style.left = document.documentElement.scrollLeft+ o
3、Event.clientX+5; oDiv.style.top = document.documentElement.scrollTop+oEvent.clientY+5; function hiddenTip(oEvent) var oDiv = document.getElementById(divTip1); oDiv.style.visibility = hidden; ,案例2:折叠 Content,function toggle(div) var mydiv = document.getElementById(div); if (mydiv) mydiv.style.display
4、=mydiv.style.display = none?block:none; ,访问样式表 问题: 使用style对象可以很方便的获取内部样式表,但无法访问外部样式表,如: div.divclass background-color:red; height:100px; width:100px; , ,解决方案: 第一步:获取定义类的样式表的引用.使用document.styleSheets集合来实现这个目的 注意:DOM为每一个样式表指定一个cssRules的集合,它包含所有的定义在样式表中的css规则.不过IE称这个集合为 rules. var oCss = document.style
5、Sheets0.cssRules|document.styleSheets.rules;,function getStyle() var oCss = document.styleSheets0.cssRules|document.styleSheets0.rules; alert(oCss0.style.backgroundColor); /output “red” alert(oCss0.selectorText); /得到选择器名称:DIV.divclass 思考document.styleSheets1 ?document.styleSheets0.rules1 ?,思考: 如何得到h
6、ref? alert(document.styleSheets0.href); 注意:上述属性均可读可写: eg: document.styleSheets1.rules0.style.backgroundColor=blue;,IE中的最终样式 微软为任何元素提供了一个currentStyle对象,它包含了所有元素的Style对象的特性和任何未被覆盖的CSS规则的style特性. currentStyle对象与style对象的使用方式完全一样。 如： div.divclass background-color:red; height:100px; width:100px; var oDIV
7、= document.getElementById(div1); alert(oDIV.currentStyle.backgroundColor);,动态注入CSS function addhupoocss(cssfile) var head = document.getElementsByTagName(HEAD).item(0); var style = document.createElement(link); style.href = cssfile; style.rel = stylesheet style.type = text/css; head.appendChild(styl
8、e); ,动态注入js function addjs(jsfile) var head = document.getElementsByTagName(HEAD).item(0); var script = document.createElement(script); script.src = jsfile; script.type = text/javascript; head.appendChild(script); ,innerText与innerHTML 尽管DOM带来了动态修改文档的能力，但对微软的开发人员来说，这还不够，IE4.0为所有的元素引入两个特性，以更方便的进行文档操作。
9、这两个特性是innerText与innerHTML. 例：以前要想在document中添加以下元素 Hellow World 代码如下： Var oStrong=document.createElement(“strong”); oStrong.appendChild(document.createTextNode(“Hellow”); Var oEm = document.createElement(“em”); oEm.appendChild(document.createTextNode(“World”); oDiv.appendChild(oStrong); oDiv.append(d
10、ocument.creatTextNode(“ “); oDiv.appendChild(oEm);,引入innerHTML后，代码为： oDiv.innerHTML=“Hellow World” innerText仅返回元素包含的文本的值 innerHTML返回所有元素和文本的HTML代码,注：通过将innerText赋值给它自身，表示从指定的元素中删除所有的HTML标签. eg: oDiv.innerText = oDiv.innerText,outerText与outerHTML 与innerText和innerHTML相似，不过，其替换的目标是整个节点 如：Hellow World o
11、Div.outerText=“Hellow World”; 等同于： Var oText = document.createTextNode(“Hellow World”); Var oDivParent = oDiv.parentNode; oDivParent.replaceChild(oText,oDiv);,outerText仅返回元素包含的文本的值,基本等同于innerText outerHTML返回所有元素和文本的HTML代码(包括节点本身),注意：通过将outerText赋给其本身，就可以删除元素，并把它替换成包含元素中所有文本的一个文本节点 如： Hellow World fu
12、nction repalceDIV() var oDiv = document.getElementById(div1); alert(oDiv.outerHTML); oDiv.outerText = oDiv.outerText; var oDiv2 = document.getElementById(div1); alert(oDiv2.innerHTML);/error ,范围 为了能在较大尺度上控制页面,可以使用范围(range)。 当一般的DOM操作不足以改变文档时，范围将非常有用，通通常，有两种不同的实现，一种 是DOM的，另一种是IE的。 一、IE中的范围 首先，IE中的范围称
13、之为文本范围(text range),它们主要用来处理文本(并不是针对DOM节点).要创建范围，要调用、或者元素上的createTextRange()方法(而不是document对象),var oRange = document.body.createTextRange(); (用这种方法创建的范围可以在页面上的任何位置上使用，如上面所说，其他元素创建的范围只允许范围在其内部使用) 二、IE范围中的简单选区 Hellow World 要选择Hellow,可以用以下代码： var oRange = document.body.createTextRange() var bFound = oRan
14、ge.findText(“Hellow”); /查看oRange alert(oRange); /output “true”; alert(oRange.text); /output “Hellow”; oRange.select(); /选中选 区,findText方法 bFound = TextRange.findText(sText , iSearchScope , iFlags) iSearchScope : 1 - 代表向后搜索；0 - 代表向前搜索 iFlags : 0 - 默认的，不区分大小写,4 - 区分大小写,2 - 整字匹配,1 -向后匹配 返回：true:找到，false
15、：未找到,四、与IE的内容进行交互 与IE的范围内容进行交互是通过text属性或者是 pasteHTML方法来完成的 eg1: var oRange = document.body.createTextRange(); oRange.findText(“Hellow”); oRange.text=“How”; eg2: var oRange = document.body.createTextRange(); oRange.findText(“Hellow”); oRange.pasteHTML(“”+oRange.text+”);,实例： 替换链结 单词查找,五、范围在实际中的应用 DOM和IE的范围实现上的不同，造成创建跨浏览器的解决方案十分困难，当评估自己的用法时，了解目标人群十分重要 范围可以在Web网页上提供十分强大的功能。 1、根据一系列搜索词汇，用范围突出页面上特定单词，可以使用户很方便的找到他们在查找的单词。 2、另外一种用途，在广告商中经常使用，将特定的单词变成链结。,综合示例 示例,Thank you,
