JavaScript系列讲座(五)-高级DOM技术.ppt

JavaScript系列讲座 六 高级DOM技术 高级DOM技术 样式编程利用CSS创建可折叠区域访问样式表最终样式自定义鼠标提示innerText与innerHTMLouterText与outerHTMLIE中的范围编程 样式编程CSS于1996年被提出后 它颠覆了开发人员格式化HTML页面的方式 很自然 支持CSS的下一步就是让javascript能够访问样式表IE4 0为每一个页面上的元素都引入了一个style对象来管理元素的CSS样式 Style对象包含与每个CSS样式对应的属性 注意 style对象中 两个单词的样式的表示方式是通过将第一个单词加上首字母大写的第二个单词 且单词间没有横线 如 注意 可以用style cssText来得到一个对象上所应用的css字符串 案例1 自定义鼠标提示 clickme这是我自己写的提示这是我自己写的提示 functionshowTip oEvent alert document documentElement scrollTop varoDiv document getElementById divTip1 oDiv style visibility visible oDiv style left document documentElement scrollLeft oEvent clientX 5 oDiv style top document documentElement scrollTop oEvent clientY 5 functionhiddenTip oEvent varoDiv document getElementById divTip1 oDiv style visibility hidden 案例2 折叠Content functiontoggle div varmydiv document getElementById div if mydiv mydiv style display mydiv style display none block none 访问样式表问题 使用style对象可以很方便的获取内部样式表 但无法访问外部样式表 如 div divclass background color red height 100px width 100px 解决方案 第一步 获取定义类的样式表的引用 使用document styleSheets集合来实现这个目的注意 DOM为每一个样式表指定一个cssRules的集合 它包含所有的定义在样式表中的css规则 不过IE称这个集合为rules varoCss document styleSheets 0 cssRules document styleSheets rules functiongetStyle varoCss document styleSheets 0 cssRules document styleSheets 0 rules alert oCss 0 style backgroundColor output red alert oCss 0 selectorText 得到选择器名称 DIV divclass 思考document styleSheets 1 document styleSheets 0 rules 1 思考 如何得到href alert document styleSheets 0 href 注意 上述属性均可读可写 eg document styleSheets 1 rules 0 style backgroundColor blue IE中的最终样式微软为任何元素提供了一个currentStyle对象 它包含了所有元素的Style对象的特性和任何未被覆盖的CSS规则的style特性 currentStyle对象与style对象的使用方式完全一样 如 div divclass background color red height 100px width 100px varoDIV document getElementById div1 alert oDIV currentStyle backgroundColor 动态注入CSSfunctionaddhupoocss cssfile varhead document getElementsByTagName HEAD item 0 varstyle document createElement link style href cssfile style rel stylesheet style type text css head appendChild style 动态注入jsfunctionaddjs jsfile varhead document getElementsByTagName HEAD item 0 varscript document createElement script script src jsfile script type text javascript head appendChild script innerText与innerHTML尽管DOM带来了动态修改文档的能力 但对微软的开发人员来说 这还不够 IE4 0为所有的元素引入两个特性 以更方便的进行文档操作 这两个特性是innerText与innerHTML 例 以前要想在document中添加以下元素HellowWorld代码如下 VaroStrong document createElement strong oStrong appendChild document createTextNode Hellow VaroEm document createElement em oEm appendChild document createTextNode World oDiv appendChild oStrong oDiv append document creatTextNode oDiv appendChild oEm 引入innerHTML后 代码为 oDiv innerHTML HellowWorld innerText仅返回元素包含的文本的值innerHTML返回所有元素和文本的HTML代码 注 通过将innerText赋值给它自身 表示从指定的元素中删除所有的HTML标签 eg oDiv innerText oDiv innerText outerText与outerHTML与innerText和innerHTML相似 不过 其替换的目标是整个节点如 HellowWorldoDiv outerText HellowWorld 等同于 VaroText document createTextNode HellowWorld VaroDivParent oDiv parentNode oDivParent replaceChild oText oDiv outerText仅返回元素包含的文本的值 基本等同于innerTextouterHTML返回所有元素和文本的HTML代码 包括节点本身 注意 通过将outerText赋给其本身 就可以删除元素 并把它替换成包含元素中所有文本的一个文本节点如 HellowWorldfunctionrepalceDIV varoDiv document getElementById div1 alert oDiv outerHTML oDiv outerText oDiv outerText varoDiv2 document getElementById div1 alert oDiv2 innerHTML error 范围为了能在较大尺度上控制页面 可以使用范围 range 当一般的DOM操作不足以改变文档时 范围将非常有用 通通常 有两种不同的实现 一种是DOM的 另一种是IE的 一 IE中的范围首先 IE中的范围称之为文本范围 textrange 它们主要用来处理文本 并不是针对DOM节点 要创建范围 要调用 或者元素上的createTextRange 方法 而不是document对象 varoRange document body createTextRange 用这种方法创建的范围可以在页面上的任何位置上使用 如上面所说 其他元素创建的范围只允许范围在其内部使用 二 IE范围中的简单选区HellowWorld要选择Hellow 可以用以下代码 varoRange document body createTextRange varbFound oRange findText Hellow 查看oRangealert 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 未找到 四 与IE的内容进行交互与IE的范围内容进行交互是通过text属性或者是pasteHTML方法来完成的eg1 varoRange document body createTextRange oRange findText Hellow oRange text How eg2 varoRange document body createTextRange oRange findText Hellow oRa