1、DOM的变化

1、针对XML命名空间的变化

HTML不支持XML的命名空间，XHTML支持XML命名空间。

命名空间使用xmlns特性指定。XHTML页面如下：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>test</title>
    </head>
    <body>
        hello world!
    </body>
</html>

XML页面如下，xmlns后冒号，再后跟前缀

<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml">
    <xhtml:head>
        <xhtml:title>test</xhtml:title>
    </xhtml:head>
    <xhtml:body xhtml:class="home">
        hello world!
    </xhtml:body>
</xhtml:html>

XHTML和SVG语言的文档

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>test</title>
    </head>
    <body>
        <s:svg xmlns:s="http://www.w3.org/2000/xhtml">
            ...
        </s:svg>
    </body>
</html>

localName：不带命名空间前缀的节点名称
namespaceURI：命名空间，不指定为null
prefix：命名空间前缀，不指定为null

nodeName = prefix:localName tagName为元素实际的标签名称

let $svg = document.getElementsByTagName('html')[0];
$svg.nodeName //'s:svg'
$svg.tagName //'s:svg'
$svg.localName //'svg'
$svg.namespaceURI //'http://www.w3.org/2000/xhtml'
$svg.prefix //'s'

$svg.lookupPrefix('http://www.w3.org/2000/xhtml') //'s'
$svg.lookupNamespaceURI('s') //'http://www.w3.org/2000/xhtml'
$svg.isDefaultNamespace('http://www.w3.org/2000/xhtml') //false

2、框架的变化

let iframe = document.getElementById('myiframe');
let content = iframe.contentDocument || iframe.contentWindow.document;

注意：ie8之前不支持contentDocument属性，但是提供contentWindow.document

访问框架或内嵌框架的文档对象受到同源策略的限制

2、样式

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

1、使用style特性定义元素内嵌式样式

let myDiv = document.getElementById('myDiv');
myDiv.style.backgroundColor = 'red'; //可写

myDiv.style.backgroundColor //'red'，可以读

注意：属性设置要以驼峰，宽高加单位，float是保留字，使用cssFloat，ie则使用styleFloat

<div style="color: red;border: 1px solid #ddd;" id="myDiv"></div>

let myDiv = document.getElementById('myDiv');

myDiv.style.length //18，对于border是一个综合样式
myDiv.style.item(0) //'color'，CSS属性名称
myDiv.style[0] //'color'

myDiv.style.cssText //'color: red;border: 1px solid #ddd;'
myDiv.style.cssText = 'color: red;border: 1px solid #ddd;'

myDiv.style.getPropertyPriority('border') //''，如果是!important
myDiv.style.getPropertyValue('border') //'1px solid rgb(221, 221, 221)'
myDiv.style.setProperty('border', '1px solid #ddd') 
myDiv.style.removeProperty('border')

注意：style属性不包含从其他样式表层叠而来并影响到当前元素的样式信息

let myDiv = document.getElementById('myDiv');
document.defaultView.getComputedStyle(myDiv, null)

//ie
myDiv.currentStyle //CSSStyleDeclaration的实例

注意：由于浏览器差异，可能某个CSS属性的默认值不同

2、<style/>元素定义嵌入式样式、<link/>元素引入外部样式文件

//获取全部样式表
document.styleSheets.length 
document.styleSheets.item(0)
document.styleSheets[0]

样式表->规则

DOM2和DOM3--(1)

1、DOM的变化

1、针对XML命名空间的变化

2、框架的变化

2、样式