js012-DO2和DOM3
js012-DO2和DOM3
本章内容:
DOM2和DOM3的变化
操作样式的ODM API
DOM 遍历与范围
DOM2级核心:在一级核心基础上构建,为节点添加了更多方法和属性
DOM2级视图:为文档定义了基于样式信息的不同视图
DOM2级事件:说明了如何使用事件与DOM文档交互
DOM2级样式:定义如何以变成方式来访问和改变css样式信息
DOM2级HTML:在1级HTML基础上构建,添加更多属性、方法和新接口
12.1 DOM变化
12.1.1针对XML命名空间的变化
1、node类型的变化
2、document类型的变化
3、element类型的变化
4、namenodemap类型的变化
12.1.2其他方面的变化
1、documenttype类型的变化
documenttype类型新增了3个属性:publicId、systemId、internalSubset。
publicId、systemId、表示文档类型声明的两个信息段。internalSubset用于访问包含在文档了诶性声明的额外定义。
2、document类型的变化
document类型的变化中唯一与命名空间无关的方法时importNode()。该方法用途时从一个文档中取得一个节点,然后将其导入到另一个文档,使其成为该文档的一部分。。每个节点都有一个ownerDocument属性,表示所属的文档。
3、node类型的变化
node类型中唯一与命名空间无关的变化就是添加了isSupported()方法。
DOM3级为DOM节点添加额外数据引入的新方法,其中,setUserData()方法会将数据指定给节点,它接收三个参数:要设定的键,实际的数据,处理函数。以下代码可以将数据指定给一个节点:
document.body.setUserData("name", "meimei", function(){});
然后使用getUserData(),并传入相同的键就可以取得该数据。
var value = document.body.getUserData("name");
传入setUserData()中处理的函数会在带有数据的节点被复制、删除、重命名、引入一个文档时调用。处理函数接收5个参数:表示操作类型的数值(1、复制,2、导入,3、删除,4、重命名)、数据键、数据值、源节点、和目标节点
4、框架的变化
框架和内嵌框架分别使用HTMLFrameElement和HTMLIFrameElement表示。他们在DOM2级中都有一个新的属性:contentDocument。该属性包含一个指针,指向表示框架内容的文档对象。在此之前没办法直接通过元素来取得这个文档对象。
12.2 样式
12.2.1访问元素的的样式
任何支持style特性的HTML元素在JS中都有一个对应的style属性
css属性 |
JS属性 |
background-image |
style.backgroundImage |
color |
style.color |
display |
style.display |
font-family |
style.fontFamily |
float时JS的保留字,不能作为属性名。所以它时其中一个不能直接转的css属性。
12.2.2操作样式表
1、css规则
CSSRule对象表示样式表中的每一条规则,它时一个供其他多种类型继承的基类型,其中最常见的就是CSSStyleRule类型,表示样式信息。CSSStyleRule对象包含下列属性:
cssText:返回整条规则对应的文本
parentRule:如果当前规则时导入规则,这个属性引用的就是导入规则,否则为null。IE不支持这个属性。
parentStyleSheet:当前规则所属的样式表,IE不支持这个属性。
selectorText:返回当前规则的选择符文本。
style:一个CSSStyleDeclaration对象,可以通过它设置和取得规则中特定的样式值。
type:表示规则类型的常量值,对也样式规则,这个值时1,IE不支持这个属性。
2、创建规则
向现有样式表中添加新规则,使用insertRule()方法。它接收两个参数:规则文本和表示在哪里插入规则的索引。
sheet.insertRule("body {background-color:red}", 0); //DON方法 |
3、删除规则
deleteRule(),该方法接收一个参数:要删除的规则的位置。
sheet.deleteRule(0);//DOM方法 sheet.removeRule(0);//仅对IE有效 |
12.2.3 元素大小
1、偏移量
元素的可见大小由其高度、宽度决定,包括所有内边距、滚动条、边框大小。通过下列4个属性可以取得元素的偏移量:
offsetHeight:元素在垂直方向上占用的空间大小,以像素记。
offsetWidth:元素在水平方向上占用的空间大小,以像素记。
offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离
offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离
想知道某个元素在页面上的偏移量,将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加,如此循环直到根元素,就可得到一个基本准确的值。
以下两个函数分别取得元素的做和上偏移量
function getElementLeft(element){ var actuaLeft = element.offsetLeft; var current = element.offsetParent; while(current != null){ actuaLeft +=current.offsetLeft; current = current.offsetParent; } return actuaLeft; } |
function getElementTop(element){ var actuaTop = element.offsetTop; var current = element.offsetParent; while(current != null){ actuaTop +=current.offsetTop; current = current.offsetParent; } return actuaTop; } |
2、客户区大小
指的是元素内容及其边距所占据的空间的大小。相关的属性有两个:clientWidth、clientHeight
3、滚动大小
指的是包含滚动内容的元素的大小。
与之相关的四个属性如下:
scrollWidth |
没有滚动的情况下元素内容的总宽度 |
scrollHeight |
没有滚动的情况下元素内容的总高度 |
scroll Left |
被隐藏在元素左侧的像素数 |
scrollTop |
被隐藏在元素上方的像素数 |
4、确定元素大小
方法:getBoundingClientRect()方法。该方法返回一个矩形对象,包含四个属性:
top , right, bottom, left,这些属性给出了元素在页面中相对于视口的位置
12.3 遍历
DOM遍历时深度优先的DOM结构遍历。
12.3.1 NodeIterator
该类型时两者中较为简单的一个,可以使用document.NodeIterator()方法创建它新实例,接收下列4个参数。
root:想要作为搜索起点的树中的节点;
whatToShow:表示要访问哪些节点的数字代码;
filter:时一个NodeFilter对象,或者一个表示应该接收还是拒绝某种特定节点的函数
entityReferenceExpansion:布尔值,表示是否要扩展实体引用。该参数在HTML里面没有用,因为其中的实体引用不能扩展。
12.3.2 TreeWalker
是NodeIterator的一个更高级的版本,处理包括nextNode() previousNode()在内的相同的功能之外,还提供了下列用于不同方向上的遍历DOM结构的方法。
parentNode() |
遍历到当前节点的父节点 |
firstChild() |
遍历到当前节点的第一个子节点 |
lastChild() |
遍历到当前节点的最后一个节点 |
nextSibling() |
遍历到当前节点的下个同辈节点 |
previous Sibling() |
遍历到当前节点的上一个同辈节点 |
12.4 范围
12.4.1 DOM中的范围
DOM2级在document类型定义了createRange()方法,使用hasFeature()或者直接检测该方法,都可以确定浏览器是否支持范围。
1、用DOM范围实现简单选择
selectNode() selectNodeContents() 两种方法
selectNode():选择整个节点(包括其子节点) selectNodeContents() 选择节点的子节点
2、用DOM范围实现复杂选择
setStart()和setEnd()方法。接收两个参数:一个参照点和一个偏移量
3、操作DOM范围的内容
4、插入DOM范围的内容
5、折叠DOM范围
6、比较DOM范围
7、复制DOM范围
8、清理DOM范围
12.4.2 IE8及更早版本中的范围
声明:该博客由http://www.cnblogs.com/lal-fighting/原创发表,未经作者允许,不得私自转载抄袭!!!
js012-DO2和DOM3的更多相关文章
- DOM0,DOM2,DOM3 事件基础知识
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...
- dom2和dom3
第十二章 DOM2和DOM3 一.DOM变化 1.针对XML命名空间的变化 2.其他方面的变化 二.样式 1.访问元素的样式 .style 1)DOM样 ...
- 12. javacript高级程序设计-DOM2和DOM3
1. DOM2和DOM3 DOM2级规范定义了一些模块,用于增强DOM1级.“DOM2级核心”为不同的DOM类型引入了一些与XML命名空间有关的方法,这些变化只在使用XML或者XHTML,对于HTML ...
- DOM--3 DOM核心和DOM2 HTML(1)
网页是一种结构化的文档,使用一组预定义的XML和HTML标签进行标记:当浏览器接受到网页文档时,会根据文档类型和关联的样式表对其进行解析,然后以可视化形式显示在屏幕上. DOM是一组用来描述脚本怎样与 ...
- DOM0,DOM2,DOM3事件,事件基础知识入门
事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM ...
- 读JS高级API笔记_(DOM&&DOM2&&DOM3)哎呀——园龄才9个月啊
---恢复内容开始--- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- JS自定义事件(Dom3级事件下)
原文出处: http://www.w3cfuns.com/notes/11861/e21736a0b15bceca0dc7f76d77c2fb5a.html . 我拿出作者中的一段,感谢作者原创. ...
- DOM的发展,DOM0,DOM1,DOM2,DOM3
Documentc Object Model文档对象模型是针对XML但经过扩展用于HTML的应用程序接口(API Application programming Interface).DOM把整个界面 ...
- DOM0 DOM2 DOM3
DOM0 DOM2 DOM3 DOM是什么 W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式. DOM 定义了访问 HTML 和 ...
随机推荐
- stack 栈的实现
今天晚上去「南哪」听了场AI的讲座,除了话筒真心不给力之外,算是对微软这方面的进展有了更多了解,毕竟是半宣传性质的活动吧. 光听这些是没用的,眼下还是打好基础,多尝试学点新技术,拓宽能力和视野比较重要 ...
- webkit webApp 开发技术要点总结
如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?幸好,webkit内核的浏览器能帮助我们完成这一切.接触 webkit webApp的开发已经有一段时间了,现把一些技巧分享给大家 ...
- Ubuntu14.04安装JDK与配置环境变量
工具/原料 Ubuntu14.04系统 方法/步骤 先从Oracle官网下载JDK.先选择同意按钮,然后根据自己的系统下载相应版本.我的系统是Ubuntu14.04 64位的,所以我下载 2 创建 ...
- [转]PL/SQLDeveloper导入导出Oracle数据库方法
原文地址:http://www.2cto.com/database/201405/305452.html 1.Oracle数据库导出步骤 1.1 Tools→Export User Objects.. ...
- [转] Java序列化与反序列化
原文地址:http://blog.csdn.net/wangloveall/article/details/7992448 Java序列化与反序列化是什么?为什么需要序列化与反序列化?如何实现Java ...
- 【转载】java版打字练习软件
网上找到一个java版的打字的游戏 import java.applet.Applet; import java.applet.AudioClip; import java.awt.Dimension ...
- EasyIcon:免费图标搜索和下载平台
EasyIcon是一个为设计师提供免费图标搜索和下载服务的网站. 步骤如下: 第一步,打开EasyIcon网站主页: http://www.easyicon.net/ 第二步,在EasyIcon网站的 ...
- shell截取字符串的方法
参考文献: linux中shell截取字符串方法总结 [Linux]如何在Shell脚本中计算字符串长度? 截取字符串的方法一共有八种,主要为以下方法 shell中截取字符串的方法有很多中, ${ex ...
- 【HDU 3938】Portal (并查集+离线)
http://acm.hdu.edu.cn/showproblem.php?pid=3938 两点之间建立传送门需要的能量为他们之间所有路径里最小的T,一条路径的T为该路径上最长的边的长度.现在 Q ...
- 【OpenJ_POJ C16D】Extracurricular Sports(构造,找规律)
题目求n个互不相同的数,满足其和为其lcm.我们把lcm看成一个线段,分割成长度不同的n份.当然分法有很多,我们只需要构造一个好想好写的.先分成两个二分之一,取其中一个二分之一再分成1/3和2/3,接 ...