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偏移量
<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			*{ margin: 0; padding: 0; }

			.waidiv{width: 600px; height: 700px; border: 6px #C0C0C0 solid;}

			.py{width: 200px; height: 150px; background: #444; padding: 4px; margin: 10px; border: 5px #FF0000 solid;}

			.par1{ padding: 40px;}

			.par2{ padding: 30px;}

		</style>

	</head>

	<body>

		<div class="par2">

			<div class="par1">

				<div class="waidiv">

					<div id="py" class="py">偏移量测试</div>

				</div>

			</div>

		</div>

		<input type="button" value="元素宽" onclick="getEleWidth()"/>

		<input type="button" value="元素高" onclick="getEleHeight()"/>

		<input type="button" value="getOffsetLeft" onclick="getEleoffLeft()"/>

		<input type="button" value="getOffsetTop" onclick="getEleoffTop()"/>

		<input type="button" value="元素距浏览器顶部距离" onclick="getActualTop(document.getElementById('py'))"/>

		<input type="button" value="元素距浏览器左距离" onclick="getActualLeft(document.getElementById('py'))"/>

		<script>

			var py = document.getElementById("py");

			function getEleWidth(){

				alert(py.offsetWidth);

			}

			function getEleHeight(){

				alert(py.offsetHeight);

			}

			function getEleoffLeft(){

				alert(py.offsetLeft);

			}

			function getEleoffTop(){

				alert(py.offsetTop);

			}

			function getActualLeft(element){

				var actuaLeft = element.offsetLeft;

				var current = element.offsetParent;

				while( current !== null){

					actuaLeft += current.offsetLeft;

					current = current.offsetParent;

				};

				alert(actuaLeft);

			}

			function getActualTop(element){

				var actuaTop = element.offsetTop;

				var current = element.offsetParent;

				while(current !== null){

					actuaTop += current.offsetTop;

					current = current.offsetParent;

				};

				alert(actuaTop);

			}

			console.log()

		</script>

	</body>

</html>

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

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

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			.testscroll{ width: 2000px; height: 1500px; background: #C0C0C0;}

		</style>

	</head>

	<body>

		<div class="testscroll" id="adiv"></div>

		<script>

			var adiv = document.getElementById("adiv");

			console.log("scrollWidth:"+document.documentElement.scrollWidth);

			console.log("scrollHeight:"+document.documentElement.scrollHeight);

			console.log("clientWidth:"+document.documentElement.clientWidth);

			console.log("clientHeight:"+document.documentElement.clientHeight);

			function getWin(){

				var mode = document.compatMode ;

				// 是否处于标准模式

				if(mode == "CSS1Compat"){

					// 疑问：是不是现在浏览器版本变高，然后都同步了？

					// 我测试过程中，谷歌、火狐、IE里clientWidth取到的都是视口宽度，书上说的谷歌scrollWidth为视口宽度

					alert("可视区域宽度为:"+document.documentElement.clientWidth);

					alert("可视区域高度为："+document.documentElement.clientHeight);

					// 由于浏览器之间存在差异，以scrollWidth和clientWidth中求大值最靠谱

					var docWin = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);

					var docHei = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);

					alert("标准模式下文档的宽度："+docWin);

					alert("标准模式下文档的宽度："+docHei);

				}

				// 是否处于混杂模式

				else if(mode == "BackCompat"){

					var docWin = Math.max(document.body.scrollWidth,document.body.clientWidth);

					var docHei = Math.max(document.body.scrollHeight,document.body.clientHeight);

					alert("混杂模式下文档的宽度："+docWin);

					alert("混杂模式下文档的宽度："+docHei);

				}

			}

			window.onload = function(){

				getWin();

			}

		</script>

	</body>

</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. appium 使用send_keys方法时报错： driver.find_element_by_id("com.hmkx.zgjkj:id/layout_search_bar_input").send_keys("123")

    新手 使用send_keys方法时一直报错,上网查这个方法的用法,看着大家都是这么写的啊,后来直接搜索 报错信息,搜索结果的针对性就清楚多了. 原来是seleium版本太高导致的问题. 可以先在cmd ...

  2. 安卓手机安装charles安全证书

    本次安装使用小米mix2为例. 手机浏览器上安装: 第一种: 1.首先 设置好手机的charles代理   172.16.xxx.xxx   8888 2.要使用 打开非自带浏览器(夸克/QQ/UC手 ...

  3. jq购物车结算功能

    css *{font-style: normal} .gw{margin: 8px;} .gw::after{display: block;clear: both;content: '';margin ...

  4. [forward] cmake, CMakeLists.txt梳理

    cmake intro 原文请见 cmake使用总结(转)-工程主目录CMakeList文件编写 在 Linux 下进行开发很多人选择编写 makefile 文件进行项目环境搭建,而makefile ...

  5. Python面向对象----继承, 重载

    1. 面向对象三大特性之继承. 继承的便捷是子类可以直接调用父类里面的方法和属性.(在强类型语言里面是只能调用公有成员), 不用重复的造轮子. 减少程序猿的负担.实现多态等上层结构 2. 父类代码 3 ...

  6. 【Codeforces 4D】Mysterious Present

    [链接] 我是链接,点我呀:) [题意] 要求长度和宽度都严格递增(选择一个序列) 然后你一开始有一个长度和宽度 要求这个一开始所给的长度和宽度能接在你选择的一段连续的长度宽度的开头 (且保持原来的性 ...

  7. GMT，UTC，DST，CST时间详解

    全球24个时区的划分       相较于两地时间表,可以显示世界各时区时间和地名的世界时区表(World Time),就显得精密与复杂多了,通常世界时区表的表盘上会标示着全球24个时区的城市名称,但究 ...

  8. JDK（Java Development Kit）内置常用自带工具一览（转）

    注意:可能随着JDK的版本升级,工具也会随着增多. JDK(Java Development Kit)是Java程序员最核心的开发工具,没有之一. JDK是一个功能强大的Java开发套装,它不仅仅为我 ...

  9. natural join 以及 v$statname ， v$sessstat

    oracle natural join是一个比较方便的用法.如果两个表的某些字段名称相同,类型相同,natural join就会把他们做等值连接.比如下面我们知道这两个视图的结构如下: SQL> ...

  10. 解决Ubuntu下Apache不解析PHP问题

    这两天笔者遇到了一个很操蛋的问题——Apache无法解析PHP代码了,之前一直用的挺好的,突然就挂了,然后在网上疯狂的找解决办法,但是大都是php5的版本,而我却是7的版本,我就先顺便把5版本的解决方 ...