DOM扩大,DOM2和DOM3

2019年8月30日 155次阅读 来源: yuhualingfeng

DOM扩大

挑选符API

Selectors API Level 1 的中心是两个要领：querySelector()和querySelectorAll()。在兼容的浏
览器中，可以经由过程Document 及Element 范例的实例挪用它们。现在已完整支撑Selectors API Level 1
的浏览器有IE 8+、Firefox 3.5+、Safari 3.1+、Chrome 和Opera 10+。

querySelector()要领

//取得body 元素
var body = document.querySelector("body");
//取得ID 为"myDiv"的元素
var myDiv = document.querySelector("#myDiv");
//取得类为"selected"的第一个元素
var selected = document.querySelector(".selected");
//取得类为"button"的第一个图象元素
var img = document.body.querySelector("img.button");

querySelectorAll()要领

//取得某<div>中的一切<em>元素（相似于getElementsByTagName("em")）
var ems = document.getElementById("myDiv").querySelectorAll("em");
//取得类为"selected"的一切元素
var selecteds = document.querySelectorAll(".selected");
//取得一切<p>元素中的一切<strong>元素
var strongs = document.querySelectorAll("p strong");

HTML5

与类相干的扩大

getElementsByClassName()要领

//取得一切类中包含"username"和"current"的元素，类名的先后递次无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");

支撑 getElementsByClassName()要领的浏览器有IE 9+、Firefox 3+、Safari 3.1+、Chrome 和
Opera 9.5+。

核心治理

document.activeElement

这个属性指向的是当前取得核心的元素,运用focus()可以让元素取得核心

var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); //true

document.hasFocus()

这个要领用于肯定文档是不是取得了核心

var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus()); //true

完成了这两个属性的浏览器的包含IE 4+、Firefox 3+、Safari 4+、Chrome 和Opera 8+。

HTMLDocument的变化

readyState 属性

document.readyState示意文档的加载进度,它有两个值离别为’loading’和’complete’.

if(document.readyState == 'complete'){
    //实行操纵
}

支撑 readyState 属性的浏览器有IE4+、Firefox 3.6+、Safari、Chrome 和Opera 9+。

compatMode 的属性

document.compatMode属性通知开发人员浏览器采用了哪一种衬着形式。在规范形式下，document.compatMode 的
值即是”CSS1Compat”，而在混淆形式下，document.compatMode 的值即是”BackCompat”。

if (document.compatMode == "CSS1Compat"){
alert("Standards mode");
} else {
alert("Quirks mode");
}

兼容性:IE、Firefox、Safari 3.1+、Opera 和Chrome

字符编码

document.charset

当前文档的字符编码

document.defaultCharset

当前文档的默许字符编码

自定义数据属性

HTML5 划定可以为元素增加非规范的属性，但要增加前缀data-，目标是为元素供应与衬着无关的信息，或许供应语义信息。

<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
var div = document.getElementById("myDiv");
//取得自定义属性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//设置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";

if (div.dataset.myname){
alert("Hello, " + div.dataset.myname);
}

支撑自定义数据属性的浏览器有Firefox 6+和Chrome

插进去标记

innerHTML属性

在读形式下，innerHTML 属性返回与挪用元素的一切子节点（包含元素、解释和文本节点）对应
的HTML 标记。在写形式下，innerHTML 会依据指定的值建立新的DOM树，然后用这个DOM树完整
替代挪用元素本来的一切子节点

outerHTML 属性

在读形式下，outerHTML 返回挪用它的元素及一切子节点的HTML 标签。在写形式下，outerHTML
会依据指定的HTML 字符串建立新的DOM 子树，然后用这个DOM子树完整替代挪用元素。

内存与机能题目

运用本节引见的要领替代子节点可以会致使浏览器的内存占用题目，尤其是在IE 中，题目越发明
显。在删除带有事宜处置惩罚递次或引用了其他JavaScript 对象子树时，就有可以致使内存占用题目。假定
某个元素有一个事宜处置惩罚递次（或许引用了一个JavaScript 对象作为属性），在运用前述某个属性将该元
素从文档树中删除后，元素与事宜处置惩罚递次（或JavaScript 对象）之间的绑定关联在内存中并没有一并
删除。假如这类状况频仍涌现，页面占用的内存数目就会明显增加。因而，在运用innerHTML、
outerHTML 属性要领时，最好先手工删除要被替代的元素的一切事宜处置惩罚递次和JavaScript 对象属性

scrollIntoView()要领

//让元素可见
document.forms[0].scrollIntoView();

DOM2和DOM3

DOM2 和DOM3级分为很多模块（模块之间具有某种关联），离别形貌了DOM 的某个异常详细的子集。这些模块以下

  • DOM2 级中心（DOM Level 2 Core）：在1 级中心基本上构建，为节点增加了更多要领和属性。

  • DOM2 级视图（DOM Level 2 Views）：为文档定义了基于款式信息的差别视图。

  • DOM2 级事宜（DOM Level 2 Events）：申明了怎样运用事宜与DOM文档交互。

  • DOM2 级款式（DOM Level 2 Style）：定义了怎样以编程体式格局来接见和转变CSS 款式信息。

  • DOM2 级遍历和局限（DOM Level 2 Traversal and Range）：引入了遍历DOM 文档和挑选其特定部份的新接口。

  • DOM2 级 HTML（DOM Level 2 HTML）：在1 级HTML 基本上构建，增加了更多属性、要领和新接口

款式

在 HTML 中定义款式的体式格局有3 种：经由过程<link/>元素包含外部款式表文件、运用<style/>元素
定义嵌入式款式，以及运用style 特征定义针对特定元素的款式。“DOM2 级款式”模块缭绕这3 种运用
款式的机制供应了一套API。要肯定浏览器是不是支撑DOM2 级定义的CSS 才能，可以运用以下代码

var supportsDOM2CSS = document.implementation.hasFeature("CSS", "2.0");
var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2", "2.0");

接见元素的款式

任何支撑 style 特征的HTML 元素在JavaScript 中都有一个对应的style 属性。接见和设置元素的css属机可以如许操纵:

var div = document.getElementById('myDiv');
console.log(div.style.color); //猎取color值
div.style.color = 'red';    //设置color值
div.style.fontSize = '20px';//设置font-size的值(这里会将有短横线的值转化为驼峰定名来猎取或设置)

注：IE6+,chrome,firfox支撑这类猎取或设置css的体式格局.这里有一个惯例,因为float是保存关键字,所以经由过程cssFloat来接见和设置,而IE中则经由过程styleFloat来设置或接见.
元素的style对象除了有css的款式属性外,也包含了本身的一些属性,详细以下:

  • cssText：经由过程它可以接见和设置style 特征中的CSS代码.支撑IE6+,chrome,firfox.

  • length：运用给元素的CSS 属性的数目。支撑IE9+,chrome,firfox.

  • parentRule：示意CSS 信息的CSSRule 对象,背面将议论CSSRule 范例。

  • getPropertyPriority(propertyName)：假如给定的属性运用了!important 设置，则返回”important”；不然，返回空字符串。支撑IE9+,chrome,firfox.

  • getPropertyValue(propertyName)：返回给定属性的字符串值。支撑IE9+、Safari,Chrome,firfox

  • item(index)：返回给定位置的CSS 属性的称号。支撑IE9+、Safari,Chrome,firfox

  • removeProperty(propertyName)：从款式中删除给定属性。支撑IE9+、Safari,Chrome,firfox

  • setProperty(propertyName,value,priority)：将给定属性设置为响应的值，并加上优先权标志（”important”或许一个空字符串）。支撑IE9+、Safari,Chrome,firfox

//设置style对象的cssText属性
myDiv.style.cssText = "width: 25px; height: 100px; background-color: green";
alert(myDiv.style.cssText);

操纵款式表

CSSStyleSheet 范例示意的是款式表，包含经由过程<link>元素包含的款式表和在<style>元素中定义的款式表,运用下面的代码可以肯定浏览器是不是支撑DOM2 级款式表:

var supportsDOM2StyleSheets =document.implementation.hasFeature("StyleSheets", "2.0");

CSSStyleSheet 继续自StyleSheet，后者可以作为一个基本接口来定义非CSS 款式表。从StyleSheet 接口继续而来的属性以下:

  • disabled：示意款式表是不是被禁用的布尔值。这个属性是可读/写的，将这个值设置为true可以禁用款式表。

  • href：假如款式表是经由过程<link>包含的，则是款式表的URL；不然，是null。

  • media：当前款式表支撑的一切媒体范例的鸠合。与一切DOM 鸠合一样，这个鸠合也有一个length 属性和一个item()要领。也可以运用方括号语法取得鸠合中特定的项。假如鸠合是空列表，示意款式表适用于一切媒体。在IE 中，media 是一个反应<link>和<style>元素media特征值的字符串。

  • ownerNode：指向具有当前款式表的节点的指针，款式表多是在HTML 中经由过程<link>或<style/>引入的（在XML 中多是经由过程处置惩罚指令引入的）。假如当前款式表是其他款式表经由过程@import 导入的，则这个属性值为null。IE 不支撑这个属性。

  • parentStyleSheet：在当前款式表是经由过程@import 导入的状况下，这个属性是一个指向导入它的款式表的指针。

  • title：ownerNode 中title 属性的值。

  • type：示意款式表范例的字符串。对CSS 款式表而言，这个字符串是”type/css”。

除了 disabled 属性以外，其他属性都是只读的。在支撑以上一切这些属性的基本上，CSSStyleSheet 范例还支撑以下属性和要领：

  • cssRules：款式表中包含的款式划定规矩的鸠合。IE 不支撑这个属性，但有一个相似的rules 属性。

  • ownerRule：假如款式表是经由过程@import 导入的，这个属性就是一个指针，指向示意导入的划定规矩；不然，值为null。IE 不支撑这个属性。

  • deleteRule(index)：删除cssRules 鸠合中指定位置的划定规矩。IE 不支撑这个要领，但支撑一个相似的removeRule()要领。

  • insertRule(rule,index)：向cssRules 鸠合中指定的位置插进去rule 字符串。IE 不支撑这个要领，但支撑一个相似的addRule()要领。

运用于文档的一切款式表是经由过程 document.styleSheets 鸠合来示意的。也可以直接经由过程<link>或<style>元素取得CSSStyleSheet 对象。DOM 划定了一个包含CSSStyleSheet 对象的属性，名叫sheet；除了IE，其他浏览器都支撑这个属性。IE 支撑的是styleSheet属性

元素大小

偏移量

  • offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包含元素的高度、（可见的）程度转动条的高度、上边框高度和下边框高度。

  • offsetWidth：元素在程度方向上占用的空间大小，以像素计。包含元素的宽度、（可见的）垂直转动条的宽度、左边框宽度和右边框宽度。

  • offsetLeft：元素的左外边框至包含元素的左内边框之间的像素间隔。

  • offsetTop：元素的上外边框至包含元素的上内边框之间的像素间隔。

客户区大小

有关客户区大小的属性有两个：clientWidth 和clientHeight。个中，clientWidth 属性是元素内容区宽度加上摆布内边距宽度；clientHeight 属性是元素内容区高度加上高低内边距高度

转动大小

  • scrollHeight：在没有转动条的状况下，元素内容的总高度。

  • scrollWidth：在没有转动条的状况下，元素内容的总宽度。

  • scrollLeft：被隐蔽在内容地区左边的像素数。经由过程设置这个属机可以转变元素的转动位置。

  • scrollTop：被隐蔽在内容地区上方的像素数。经由过程设置这个属机可以转变元素的转动位置。

肯定元素大小

IE、Firefox 3+、Safari 4+、Opera 9.5 及Chrome 为每一个元素都供应了一个getBoundingClientRect()方
法。这个要领返回会一个矩形对象，包含4 个属性：left、top、right 和bottom。这些属性给出了元素在页面中相对于视口的位置。然则，浏览器的完成稍有差别。IE8 及更早版本以为文档的左上角坐
标是(2, 2)，而其他浏览器包含IE9 则将传统的(0,0)作为出发点坐标。因而，就需要在一开始检查一下位于
(0,0)处的元素的位置，在IE8 及更早版本中，会返回(2,2)，而在其他浏览器中会返回(0,0).

遍历

DOM2 级遍历和局限”模块定义了两个用于辅佐完成递次遍历DOM 构造的范例：NodeIterator
和TreeWalker。这两个范例可以基于给定的出发点对DOM 构造实行深度优先（depth-first）的遍历操纵。
在与DOM 兼容的浏览器中（Firefox 1 及更高版本、Safari 1.3 及更高版本、Opera 7.6 及更高版本、Chrome
0.2 及更高版本），都可以接见到这些范例的对象。IE 不支撑DOM 遍历。运用以下代码可以检测浏览器
对DOM2 级遍历才能的支撑状况。

var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0");
var supportsNodeIterator = (typeof document.createNodeIterator == "function");
var supportsTreeWalker = (typeof document.createTreeWalker == "function");

局限

为了让开发人员更方便地掌握页面，“DOM2 级遍历和局限”模块定义了“局限”（range）接口。通
过局限可以挑选文档中的一个地区，而没必要斟酌节点的界线（挑选在背景完成，对用户是不可见的）。
在通例的DOM 操纵不能更有效地修正文档时，运用局限每每可以到达目标。Firefox、Opera、Safari 和
Chrome 都支撑DOM 局限。IE 以专有体式格局完成了本身的局限特征。

    原文作者：yuhualingfeng
    原文地址: https://segmentfault.com/a/1190000003963679
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞