DOM2 级核心：在 1 级基础上构建，为节点添加更多方法和属性
DOM2 级视图：为文档定义了基于样式信息的不同视图
DOM2 级事件：说明了如何使用事件和DOM文档交互
DOM2 级样式：如何以编程方式来访问和改变CSS样式信息
DOM2 级遍历和范围：引入了遍历DOM文档和选择其特定部分的新接口
DOM2 级HTML：添加了更多属性、方法和新接口
 
12.1 DOM变化
DOM2 级和3级的目的在于扩展DOM API，满足操作XML的所有需求，同时提供更好的错误处理及特性检测能力。
 
 
12.1.2 其它方面的变化
1.DocumentType 类型变化
新增3个属性：publicID、systemID 表示的是文档类型声明中的两个信息段，在DOM1中无法访问
internalSubset   ， 用于访问包含在文档类型声明中的额外定义
 
2.Document 类型的变化
importNode（）
用途：从一个文档中取得一个节点，然后将其导入另一个文档。   如果调用appendChild（）在不同文档中传入节点会出错
接受两个参数：要复制的节点和一个表示是否复制子节点的布尔值。返回的结果是原来节点的副本，但能够在文档中使用
 
 
3.Node类型的变化
isSupported（）

isSameNode（）
isEqualNode（）

 
4.框架的变化
 
12.2 样式
12.2.1   访问元素的样式
style 可以获取和设置html元素style特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。
对于使用短划线的css属性名，必须将其转换为驼峰大小写形式
 
1.DOM样式属性和方法
在提供元素 的style特性值时，也可修改样式
 
cssText：访问style特性中的css代码（写入模式，以前通过style设定的样式信息全将丢失）
length：应用给元素的css属性的数量
parentRule：表示CSS信息的CSSRule对象
getPropertyCSSValue（propertyName）：返回包含给定属性值的CSSValue对象
getPropertyPriority（propertyName）：如果给定的属性使用了!important设置，则返回 “important”，否则，返回空
gePropertyValue（propertyName）：返回给定属性的字符串值
item（index）：返回给定位置的css属性的名称
removeProperty（propertyName）：从样式中删除给定属性
setProperty（propertyName,value,priority）：将给定属性设置为相应的值，并加上优先权标志( !important  或   一个空字符串)
 
 
2.计算的样式
 
  • document.defaultView.getComputedStyle（mydiv，:after / null） —— 此方法在IE9 以下浏览器中无法生效
接受两个参数，1 要取得计算样式的元素   ，  2 一个伪元素字符串 ：after，：before，或者为null
 
  • 在IE8及以下中可使用  .currentStyle  属性，来获取当前元素的样式
 
兼容性最好求取元素所有样式列表的方法
 var computedStyle = window.getComputedStyle?document.defaultView.getComputedStyle(myDiv, null):myDiv.currentStyle;
 
以上方法计算出的样式都是只读，不能修改。
包含属性浏览器内部所有样式信息，任何具有默认值的css属性都会表现在计算后的样式中。部分为浏览器为  visibility，部分为 visible  ，有的则为  inherit 
 
 
12.2.2  操作样式表
styleSheets  遍历 styleSheets 循环可以获取当前页面通过 link 包含的样式表和 style 元素定义的所有样式表。以下属性可以对样式表进行获取或者设置操作：
 
disabled：表示样式是否被禁用的布尔值。可读 / 写，true表示禁用
href：如果样式表通过 link 包含，则返回样式表的URL，否则为null
 
 
 
 
1. css规则。 cssStyleRule 对象包含下列属性
 
offset偏移量
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<style>
  7. 			*{ margin: 0; padding: 0; }
  8. 			.waidiv{width: 600px; height: 700px; border: 6px #C0C0C0 solid;}
  9. 			.py{width: 200px; height: 150px; background: #444; padding: 4px; margin: 10px; border: 5px #FF0000 solid;}
  10.  
  11. 			.par1{ padding: 40px;}
  12. 			.par2{ padding: 30px;}
  13. 		</style>
  14. 	</head>
  15. 	<body>
  16. 		<div class="par2">
  17. 			<div class="par1">
  18. 				<div class="waidiv">
  19. 					<div id="py" class="py">偏移量测试</div>
  20. 				</div>
  21. 			</div>
  22. 		</div>
  23. 		<input type="button" value="元素宽" onclick="getEleWidth()"/>
  24. 		<input type="button" value="元素高" onclick="getEleHeight()"/>
  25. 		<input type="button" value="getOffsetLeft" onclick="getEleoffLeft()"/>
  26. 		<input type="button" value="getOffsetTop" onclick="getEleoffTop()"/>
  27. 		<input type="button" value="元素距浏览器顶部距离" onclick="getActualTop(document.getElementById('py'))"/>
  28. 		<input type="button" value="元素距浏览器左距离" onclick="getActualLeft(document.getElementById('py'))"/>
  29.  
  30. 		<script>
  31. 			var py = document.getElementById("py");
  32. 			function getEleWidth(){
  33. 				alert(py.offsetWidth);
  34. 			}
  35. 			function getEleHeight(){
  36. 				alert(py.offsetHeight);
  37. 			}
  38. 			function getEleoffLeft(){
  39. 				alert(py.offsetLeft);
  40. 			}
  41. 			function getEleoffTop(){
  42. 				alert(py.offsetTop);
  43. 			}
  44. 			function getActualLeft(element){
  45. 				var actuaLeft = element.offsetLeft;
  46. 				var current = element.offsetParent;
  47. 				while( current !== null){
  48. 					actuaLeft += current.offsetLeft;
  49. 					current = current.offsetParent;
  50. 				};
  51. 				alert(actuaLeft);
  52. 			}
  53.  
  54. 			function getActualTop(element){
  55. 				var actuaTop = element.offsetTop;
  56. 				var current = element.offsetParent;
  57.  
  58. 				while(current !== null){
  59. 					actuaTop += current.offsetTop;
  60. 					current = current.offsetParent;
  61. 				};
  62.  
  63. 				alert(actuaTop);
  64. 			}
  65.  
  66. 			console.log()
  67. 		</script>
  68. 	</body>
  69. </html>

混杂模式、标准模式下，scrollWidth、clientWidth、document.documentElement.scrollWidth、document.body.scrollWidth

对于混杂模式下IE 需要用 document.body代替document.documentElement

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<style>
  7. 			.testscroll{ width: 2000px; height: 1500px; background: #C0C0C0;}
  8. 		</style>
  9. 	</head>
  10. 	<body>
  11. 		<div class="testscroll" id="adiv"></div>
  12.  
  13. 		<script>
  14. 			var adiv = document.getElementById("adiv");
  15. 			console.log("scrollWidth:"+document.documentElement.scrollWidth);
  16. 			console.log("scrollHeight:"+document.documentElement.scrollHeight);
  17. 			console.log("clientWidth:"+document.documentElement.clientWidth);
  18. 			console.log("clientHeight:"+document.documentElement.clientHeight);
  19.  
  20. 			function getWin(){
  21. 				var mode = document.compatMode ;
  22. 				// 是否处于标准模式
  23. 				if(mode == "CSS1Compat"){
  24. 					// 疑问：是不是现在浏览器版本变高，然后都同步了？
  25. 					// 我测试过程中，谷歌、火狐、IE里clientWidth取到的都是视口宽度，书上说的谷歌scrollWidth为视口宽度
  26. 					alert("可视区域宽度为:"+document.documentElement.clientWidth);
  27. 					alert("可视区域高度为："+document.documentElement.clientHeight);
  28.  
  29. 					// 由于浏览器之间存在差异，以scrollWidth和clientWidth中求大值最靠谱
  30. 					var docWin = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);
  31. 					var docHei = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
  32. 					alert("标准模式下文档的宽度："+docWin);
  33. 					alert("标准模式下文档的宽度："+docHei);
  34.  
  35. 				}
  36. 				// 是否处于混杂模式
  37. 				else if(mode == "BackCompat"){
  38. 					var docWin = Math.max(document.body.scrollWidth,document.body.clientWidth);
  39. 					var docHei = Math.max(document.body.scrollHeight,document.body.clientHeight);
  40. 					alert("混杂模式下文档的宽度："+docWin);
  41. 					alert("混杂模式下文档的宽度："+docHei);
  42. 				}
  43. 			}
  44.  
  45. 			window.onload = function(){
  46. 				getWin();
  47. 			}
  48. 		</script>
  49. 	</body>
  50. </html>

　　

笔记《javascript高级程序设计》 第12章 DOM2和DOM3的更多相关文章

  1. javascript高级程序设计第3版——第12章 DOM2与DOM3

    12章——DOM2与DOM3 为了增强D0M1,DOM级规范定义了一些模块. DOM2核心:为不同的DOM类型引入了一些与XML命名空间有关的方法,还定义了以编程方式创建Document实例的方法: ...

  2. 《JavaScript高级程序设计》——第二章在HTML使用JavaScript

    这章讲的是JavaScript在HTML中的使用,也就是<script>元素的属性.书中详细讲了async.defer.src和type四个<script>的属性. 下面是对第 ...

  3. JavaScript 高级程序设计 第5章引用类型 笔记

    第五章 引用类型 一.object类型 1.创建方法: 1.使用new 操作符创建 var person=new object() Person.name=”Nicholasa” Porson.age ...

  4. JavaScript高级程序设计第20章JSON 笔记 （学习笔记）

    第二十章 JSON 1.Json 可以表示三种类型的值: 1.简单值: 表示数值:5  表示字符串:“hello wrold”注表示字符串时必须使用双引号 2.对象: {“name”:“mi”,”ag ...

  5. JavaScript高级程序设计第14章表单脚本 （学习笔记）

    第十四章 表单脚本 1.阻止默认表单提交 1.提交表单数据 1.使用type=submit提交按钮 2.使用submit():方法 注意:当用户点击提交按钮时,会触发submit事件,从而在这里我们有 ...

  6. 读书笔记 - javascript 高级程序设计 - 第一章 简介

      第一章 简介   诞生时间 1995 最初用途 客服端验证 第一版标准 注意是标准 1997年 Ecma-262  一个完整的js实现由三部分组成 ECMAScript DOM 文档对象模型 BO ...

  7. 读书笔记 - javascript 高级程序设计 - 第二章 在Html中使用JavaScript

    1 <script>的6个属性 async  立即下载当前script标签的外部脚本 但不能影响别的 charset 没用了 defer  文档显示之后再执行脚本,只对外部脚本有效 lan ...

  8. javascript高级程序设计第三章的一些笔记

    [TOC] 1. 语法 1.1 区分大小写 变量.函数名和操作费都区分大小写. 1.2 标识符 标识符指变量.函数.属性的名字,或者函数的参数.标识符按以下规则组合: 第一个字符必须是一个字母,下划线 ...

  9. 《JavaScript 高级程序设计》第一章：简介

    JavaScript 历史 JavaScript的诞生的主要是当时的 netspace 公司谋求为自己的浏览器 Navigator 添加一种脚本语言,以便在本地客户端进行一些行为操作,而这一功能的需求 ...

随机推荐

  1. 解决 i5 6500 安装黑苹果 Sierra 显卡不正常问题

    i5 6500内置HD 530显卡,装好Sierra显卡驱动不太正常. 先下载Clover configurator 用Clover configurator加载 EFI (Mount EFI)分区 ...

  2. Learning opencv续不足（七）线图像的设计D

    因为线图像startline有了起点和终点,我们就可以用DDA法求出线上所有点,任意斜率直线通过四象限八区域查表法界定.我们只示范一个区域:函数为: public PointF DdaFindPtIm ...

  3. 洛谷——P1613 跑路

    P1613 跑路 题目大意: 小A的工作不仅繁琐,更有苛刻的规定,要求小A每天早上在6:00之前到达公司,否则这个月工资清零.可是小A偏偏又有赖床的坏毛病.于是为了保住自己的工资,小A买了一个十分牛B ...

  4. 使用python的几个小经验（查看文档）

    好久没有水博客了,未来再过20天不到的时间又得参加软考,今天终于得好好水一发帖子 关于Python,很多人包括我之前都不知道怎么找文档,现在有一个好办法,就是在命令行模式下调用pydoc –p xxx ...

  5. win10下VMware Workstation 14运行虚拟机黑屏

    最新 升级电脑Win10自动升级后,在打开虚拟机后,很卡,且出现黑屏,但是挂起后仍能显示锁屏界面,网上就一顿搜.下面放解决方法. 管理员运行 netsh winsock reset 帮你解决一切烦恼. ...

  6. bytes类型和python中编码的转换方法

    一.bytes类型 bytes类型是指一堆字节的集合,在python中以b开头的字符串都是bytes类型.例如: >>> a = "中国" >>> ...

  7. 利用定时器 1和定时器0控制led1和led2分别 2hz和0.5hz闪烁

    //利用定时器 1和定时器0控制led1和led2分别 2hz和0.5hz闪烁 #include<reg52.h> #define uchar unsigned char #define ...

  8. linux学习4-crontab定时任务

    crontab -e  在当前用户下创建定时任务 我们通过这样一张图来了解 crontab 的文档编辑的格式与参数 在了解命令格式之后,我们通过这样的一个例子来完成一个任务的添加,在文档的最后一排加上 ...

  9. ajax学习----json，前后端交互，ajax

    json <script> var obj = {"name": "xiaopo","age": 18,"gender ...

  10. Hibernate基于注解annotation的配置

    Annotation在框架中是越来越受欢迎了,因为annotation的配置比起XML的配置来说方便了很多,不需要大量的XML来书写,方便简单了很多,只要几个annotation的配置,就可以完成我们 ...