您的位置：首页 > Web前端 > JavaScript

DOM2和DOM3

2017-06-08 00:00 375 查看

DOM2和DOM3都有哪些新特性？

相比DOM1, DOM2和DOM3引入了更多的交互能力，支持了更高级的XML特性

DOM2级核心(DOM Level 2 Code)：为节点添加了更多方法和属性

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)：添加了更多属性和方法

DOM3级又增加了"XPath"模块和"加载与保存"(Load and Save)

// 下面的代码判断浏览器是否支持这些DOM模块
document.implementation.hasFeature('Core', 2.0)
document.implementation.hasFeature('Core', 3.0)
document.implementation.hasFeature('HTML', 2.0)
document.implementation.hasFeature('Views', 2.0)
document.implementation.hasFeature('XML', 2.0)


DOM方面有哪些变化？

1 针对XML命名空间的变化

引入命名空间的作用：不同XML文档的元素可以混在一起(比如XHTML和SVG语言混合的文档)不必担心命名冲突

如何定义命名空间：使用xmlns特性

下面是一个命名空间为http://www.w3.org/1999/xhtml的xhtml页面例子

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example XHTML page</title>
</head>
<body>
Hello World!
</body>
</html>

如果想为XML命名空间创建前缀，可以使用 xmlns:prefix

下面的例子使用了xhtml的前缀，当然特性也可以使用命名空间来限制

<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml">
<xhtml:head>
<xhtml:title>Example XHTML page</xhtml:title>
</xhtml:head>
<xhtml:body xhtml:class="home">
Hello World!
</xhtml:body>
</xhtml:html>


1.1 Node类型的变化

在DOM2级中，Node类型包含下列特定于命名空间的属性

localName：不带命名空间前缀的节点名称

namespaceURI：命名空间URI或者null

prefix: 命名空间前缀或者null

当使用了命名空间前缀时，nodeName = prefix : localName

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example XHTML page</title>
</head>
<body>
<s:svg xmlns:s="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 100 100" style="width:100%, height:100%">
<s:rect x="0" y="0" width="100" height="100" style="fill:red" />
</s:svg>
</body>
</html>

对于<s:svg>元素而言，它的localName是"svg", tagName是"s:svg", namespaceURI是“http://www.w3.org/2000/svg”， prefix是“s”

1.2 Document类型变化

包含了与命名空间有关的方法，方法名的后面两个字母为NS, 意为namespace

createElementNS(namespaceURI, tagName)

createAttributeNS(namespaceURI, attributeName)

getElementsByTagNameNS(namespcaeURI, tagName)

1.3 Element类型变化

getAttributeNS(namespaceURI, localName)

getAttributeNodeNS(namespaceURI, localName)

getElementsByTagNameNS(namespaceURI, tagName)

hasAttributeNS(namespaceURI, localName)

removeAttribteNS(namespaceURI, localName)

setAttributeNS(namespace, qualifiedName, value)

setAttributeNodeNS(attNode)

1.4 NameNodeMap

getNamedItemNS(namespaceURI, localName)

removeNamedItemNS(namespaceURI, localName)

setNamedItemNS(node)

2 其他方面的变化

2.1 框架的变化

DOM2级中新增属性contentDocument：指向表示框架内容的文档对象

let iframe = document.getElementById('myIframe')
let iframeDoc = iframe.contentDocument // IE8以前的版本中无效

// 兼容方法，可以使用contentWindow
let iframeDoc = iframe.contentDocument || iframe.contentWindow.document


2.2 样式

HTML中定义样式有三种方式：

<link/>包含外部样式表

<style />元素定义嵌入式样式

style 特性定义针对特定元素的样式

// 判断浏览器是否支持DOM2级定义的CSS
var supportsDOM2CSS = document.implementation.hasFeature('CSS', 2.0)
var supportsDOM2CSS2 = document.implementation.hasFeature('CSS2', 2.0)


2.2.1 访问元素的样式

通过Javascript中的style属性，可以访问HTML元素的style特性，包含通过style特性指定的所有样式信息，但不包含外部样式表或嵌入式样式表经层叠而来的样式



"float"比较特殊，因为"float"是Javascript中的保留字，所以“DOM2级样式”规范规定属性名为"cssFloat", IE支持的是"styleFloat"

1) DOM样式属性和方法

cssText: 访问style特性中的css代码，有读写两种模式，是设置多项样式最快捷的方式

length: 应用给元素的CSS属性的数量

getPropertyCSSValue(propertyName): 返回包含给定属性值的CSSValue对象, 这个对象包含两个属性：cssText和cssValueType, 其中cssText和getPropertyValue()返回的值相同，cssValueType是一个属相常量，0表示继承的值；1表示基本的值；2表示值列表；3表示自定义的值, 实际应用中，这个属性较getPropertyValue()很少使用

getPropertyPriority(propertyName): 如果给定的属性使用了!important设置，则返回“important”，否则，返回空字串

getPropertyValue(propertyName): 返回给定属性的字符串值

item(index): 返回给定位置的CSS属性的名称, 总与length配套使用，以便迭代在元素中应用的CSS属性

removeProperty(property): 从样式中删除给定属性

setProperty(propetryName, value, priority): 将给定属性设置为响应的值，并加上优先权标识符，或一个空字串

举个例子：



元素样式覆盖了外部样式表中的样式，Javascript的style对象只返回元素的样式对象

HTML:

<div id="myDiv" style="background-color: green;width:50px;">myDiv</div>

CSS:

#myDiv {
width: 100px;
height: 100px;
background-color: red;
}

JS:

let i, len, prop, value;
let myDiv = document.querySelector("#myDiv")

// cssText
let cssText = myDiv.style.cssText
console.log(cssText) // background-color: green; width: 50px;

// length + item()
for(i = 0, len = myDiv.style.length; i < len; i++) {
console.log(myDiv.style[i]) // 或者 myDiv.style.item(i)
}
// background-color
// width

// getPropertyValue
for(i = 0, len = myDiv.style.length; i < len; i++) {
prop = myDiv.style.item(i)
value = myDiv.style.getPropertyValue(prop)
console.log(prop + ':' + value)
// background-color:green
// width:50px
}


2) 计算的样式

document.defalultView.getComputedStyle(element, pseudo)

<style>

#myDiv {
background-color: blue;
width: 100px;
height: 200px;
}

</style>

<div id="myDiv" style="background-color:red;border:1px solid black;">myDiv</div>

let myDiv = document.getElementById('myDiv')
let computedStyle = document.defaultView.getComputedStyle(myDiv, null)
console.log(computedStyle.backgroundColor) // rgb(255, 0, 0)
console.log(computedStyle.width) // 100px
console.log(computedStyle.height) // 200px
console.log(computedStyle.border) // 1px solid rgb(0, 0, 0)

border是一个综合属性，不会在所有浏览器中都有返回值，但computedStyle.borderLeftWidth则会返回值；IE不支持getComputedStyle, 但还有一个currentStyle属性，返回CSSStyleDeclaration的实例

let myDiv = document.getElementById('myDiv')
let computedStyle = myDiv.currentStyle'
console.log(computedStyle.backgroundColor) // rgba(255, 0, 0)
console.log(computedStyle.width) // 100px
console.log(computedStyle.height) // 200px
console.log(computedStyle.border) // undefined


2.2.2 操作样式表

1) CSS 规则

CSSStyleRule对象的属性

cssText: 返回整条规则对应的文本

selectorText: 返回当前规则的选择符文本, Firefox, Safari, Chrome和IE只读，Opera允许修改

style: 通过它设置和取得规则中特定的样式表(就像元素上的style属性一样)

let sheet = document.styleSheets[0]
let rules = sheet.cssRules || sheet.rules
let rule = rules[0]

console.log(rule.selectorText) // #myDiv
console.log(rule.style.cssText) // width: 100px; height: 100px; background-color: red;
console.log(rule.style.backgroundColor) // red
console.log(rule.style.width) // 100px
console.log(rule.style.height) // 100px


2) 元素大小
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  js DOM2 DOM3
相关文章推荐
新的分享
章节导航