JavaScript高级程序设计(反刍) 11

第12章：

DOM2和DOM3是对DOM1的升级版本，主要的升级项在于对DOM1中方法的整合，集成了很多的方法，不必再使用DOM1中繁杂的写法，但是需要注意的是部分浏览器不支持DOM2或DOM3的某些方法/属性。

判断浏览器是否支持DOM2或DOM3的某个属性，使用
var a = document.implementation.hasFeature(“方法/属性”, “2.0/3.0”);

使用xmlns特性指定命名空间不必担心命名冲突，但是在实际中用处不大。这种方法的主要应用在于：当一个文档中存在多个语言编写时，直接在文档中指出xmlns的命名空间即可。

DOM2中的Node也进一步变化：
localName：不带命名空间前缀的节点名称
namespaceURI：命名空间URI或者null
perfix：命名空间前缀或null
NodeName = perfix +”:”+ localName
（里面的很多东西个人觉得用处不大，也没有细看，因为DOM2和DOM3在现在的浏览器中支持的并不完整，所以大多数时候个人更倾向于DOM1中的属性/方法）

样式：
使用前依旧要先判断一遍hasFeature(“CSS”, “2.0”); / hasFeature(“CSS2”, “2.0”);

CSS中的样式和JavaScript中的样式写法不同，凡是使用短线连接的复合样式，在JavaScript中一律使用小驼峰的写法，但是存在一个特殊的属性float，该样式是JavaScript中的保留字，所以在JavaScript中将该样式使用cssFloat属性，IE中使用styleFloat属性。

当使用JavaScript设置长宽时，混杂模式下，直接写出数字，不加单位，单位默认为px，但是标准模式下，不加单位，该值会被忽略。推荐大家养成良好的编码习惯。

DOM2也为style对象定义了很多的属性和方法：
cssText属性：获取元素的样式，可读可写，但是写的时候会完全覆盖原来的样式
length属性：获取元素样式的个数
getPropertyValue()方法：将CSS样式转换为JavaScript样式，字符串转换
item()方法：返回给定位置CSS属性的名称

计算样式：使用document.defaultView.getComputedStyle()方法，给定两个参数，第一个参数是元素名，第二个参数是伪元素字符串 / null(一般为null)
IE中使用currentStyle属性，可以直接获取计算样式，但是需要注意，所有的计算样式都是只读的，并非可读可写的！

元素大小：
偏移量

function getElementLeft(element){var actualLeft = element.offsetLeft;var current = element.offsetParent;while(current !== null){              //这里判断当循环到的元素外面为空的时候，也就是到达了最外面一层元素的时候，停止循环actualLeft += current.offsetLeft;  //左侧长度累计current = current.offsetParent;    //获得自己的父级元素}return actualLeft;
}function getElementTop(element){var actualTop = element.offsetTop;var current = element.offsetParent;while(current !== null){   actualTop += current.offsetTop;  current = current.offsetParent;  }return actualTop;
}

客户区大小：

这里的clientWidth和clientHight属性获取客户区大小使用document.元素.clientWidth（IE7之前使用），或者document.docuementElement.clientWidth

遍历：
DOM2的结构遍历使用NodeIterator和TreeWalker两种类型进行深度优先遍历。
使用document.createNodeIterator()方法即可创建它的新实例，主要的属性：
root：搜索起点的树中的节点
NodeFilter.SHOW_ALL：显示所有类型的节点
NodeFilter.SHOW_LEMENT：显示元素节点
NodeFilter.SHOW_TEXT：显示文本节点
NodeFilter.SHOW_COMMENT：显示注释节点
NodeFilter.SHOW_DOCUMENT：显示文档节点

（关于后面的范围，个人觉得没什么作用，也没有细看，感兴趣的同学可以去原书的P332看看）

JavaScript高级程序设计(反刍) 11相关推荐

JavaScript高级程序设计(反刍) 2
第四章: 基本数据类型:undefined.null.boolean.number.string 引用类型的值是保存在内存中的对象,JavaScript不允许直接访问内存中的位置基本类型和引用类型值 ...
JavaScript高级程序设计(反刍) 4
第六章(上): 对象是一种无序属性的集合,其属性值可以包含基本值.对象.函数.对象的属性/方法都存在名字,而这个名字每一个都映射一个值,这个值可以是数据,也可以是函数. 对象字面量是创建对象的首选方式 ...
读javascript高级程序设计-目录
javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/> 本笔记是为了方便日后查阅,仅作学习交 ...
前端红宝书《JavaScript高级程序设计》核心知识总结
此文是对<JavaScript 高级程序设计>一书难点的总结,也是笔者在看了 3 遍之后的一些梳理和感想,希望能借此巩固js的基础和对一些核心概念有更深入的了解. 摘要 JS基本的数据类型 ...
《JavaScript高级程序设计》（第2版）上市
本书是技术畅销书<JavaScript高级程序设计> 的第2版,几乎全部更新.重写了上一版的内容,融入了作者近几年来奋战在前端开发一线的宝贵经验 , 是学习和提高JavaScript ...
javascript高级程序设计学习之数值转换 |Number(),parseInt(),parseFloat()
2019独角兽企业重金招聘Python工程师标准>>> 将非数值转换成数值的函数有三个:Number(),parseInt(),parseFloat(); 小记tip:Number( ...
《JavaScript高级程序设计》红宝书第二遍阅读（动手实践）
<JavaScript高级程序设计>红宝书第二遍阅读(动手实践) 第1章--什么是JavaScript 第2章--HTML中的JavaScript 第3章--语言基础第4章--变量.作用 ...
《JavaScript高级程序设计》红宝书第一遍阅读（了解概念）
<JavaScript高级程序设计>红宝书第一遍阅读(了解概念) 第1章--什么是JavaScript 第2章--HTML中的JavaScript 第3章--语言基础第4章--变量.作用 ...
精简《JavaScript高级程序设计》五、引用类型（上）
第五章概况 5.1 Object类型引用类型是一种数据结构,用于将数据和功能组织在一起.对象是某个特定引用类型的实例创建Object实例的方式有两种: new+Object构造函数 var per ...

JavaScript高级程序设计(反刍) 11

第12章：

JavaScript高级程序设计(反刍) 11相关推荐

最新文章

热门文章