//
-----------------DOM2 node-----------------
//
对html元素来说，localName为html，tagName是html，nameSpaceURI是http://www.w3.org/1999/xhtml，prefix是null
//
对svg来说，localName为svg，tagName是s:svg，nameSpaceURI是http://www.w3.org/2000/svg，prefix是s
var
svg
=
document.getElementsByTagName(
"
s:svg
"
);
alert(document.body.isDefaultNamespace(
"
http://www.w3.org/1999/xhtml
"
));
//
true
alert(svg.lookupPrefix(
"
http://www.w3.org/2000/svg
"
));
//
s
alert(svg.lookupNamespaceURI(
"
s
"
));
//
http://www.w3.org/2000/svg
//
-----------------DOM2 document-----------------
var
svg
=
document.createElementNS(
"
http://www.w3.org/2000/svg
"
,
"
svg
"
);
//
创建一个新的SVG元素
var
arr
=
document.createAttributeNS(
"
http://www.w3.org/2000/svg
"
,
"
xmlns
"
);
//
创建一个属于某个命名空间的新特性
var
ele
=
document.getElementsByTagNameNS(
"
http://www.w3.org/1999/xhtml
"
,
"
*
"
);
//
取得所有xhtml元素
//
-----------------DOM2 element------------
getAttributeNS(namespaceURI, localName);
//
取得属于命名空间namespaceURI且名为localName的特性
getAttributeNodeNS(namespaceURI, localName);
//
取得属于命名空间namespace且名为localName的特性节点
getElementsByTagNameNS(namespaceURI, tagName);
//
返回属于命名空间namespace的tagName的NodeList
hasAttributeNS(namespaceURI, localName);
//
确定当前元素是否有一个名为localName的特性，且该特性的命名空间是namespaceURI
removeAttributeNS(namespaceURI, localName);
//
删除属于命名空间namespaceURI且名为localName的特性
setAttributeNS(namespaceURI, qualifiedName, value);
//
设置属于命名空间namespaceURI且名为qualifiedName的特性值为value
setAttributeNodeNS(attNode);
//
设置属于命名空间namespaceURI的特性节点
//
----------NamedNodeMap-----------
getNamedItemNS(namespaceURI, localName);
//
取得属于命名空间namespaceURI且名为localName的项
removeNamedItemNS(namespaceURI, localName);
//
移除属于命名空间namespaceURI且名为localName的项
setNamedItemNS(namespaceURI, localName);
//
添加node，这个节点已经事先指定了命名空间信息
//
----------DocumentType---------
alert(document.doctype.publicId);
//
在支持DOM2的浏览器返回"-//W3C//DTD XHTML 1.0 Strict//EN"
alert(document.doctype.systemId);
//
在支持DOM2的浏览器返回"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
//
------------Document-----------------
var
newNode
=
document.importNode(oldNode,
true
);
//
导入节点及所有子节点
var
parentWindow
=
document.defaultView
||
document.parentWindow;
//
IE之外的都支持defaultView属性，IE、OP支持parentWindow
var
doctype
=
document.implementation.createDocumentType(
"
html
"
,
"
-//W3C//DTD XHTML 1.0 Strict//EN
"
,
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
"
);
var
doc
=
document.implementation.createDocument(
"
http://www.w3.org/1999/xhtml
"
,
"
html
"
, doctype);
var
htmldoc
=
document.implementation.createHTMLDocument(
"
new doc
"
);
alert(htmldoc.title);
//
"new doc" =>Sa,Op
alert(
typeof
htmldoc.body);
//
object =>Sa,Op
//
-------------node-----------------------
if
(document.body.isSupported(
"
HTML
"
,
"
2.0
"
)) {
//
执行只有“DOM2级HTML”才支持的操作
}
var
div1
=
document.createElement(
"
div
"
);
div1
=
setAttribute(
"
class
"
,
"
box
"
);
var
div2
=
document.createElement(
"
div
"
);
div2
=
setAttribute(
"
class
"
,
"
box
"
);
alert(div1.isSameNode(div1));
//
true =>DOM3
alert(div1.isEqualNode(div2));
//
true =>DOM3
alert(div1.isSameNode(div2));
//
false =>DOM3
//
document.body.setUserData("name", "Nicholas", function(){});
var
div
=
document.createElement(
"
div
"
);
div.setUserData(
"
name
"
,
"
Nicholas
"
,
function
(operation, key, value, src, dest){
if
(operation
==
1
) {
//
1表示复制，2表示导入，3表示删除，4表示重命名
dest.setUserData(key, value);
}
});
var
newDiv
=
div.cloneNode(
true
);
alert(newDiv.getUserData(
"
name
"
));
//
Nicholas
//
frameSet
var
iframe
=
document.createElement(
"
myIfrme
"
);
var
iframeDoc
=
iframe.contentDocument
||
iframe.contentWindow.document;
//
得到内联框架的文档对象
//
Op,FF,Sa,Ch，IE8支持contentDocument属性，所有浏览器都支持contentWindow属性
//
DOM样式属性和方法
var
myDiv
=
document.createElement(
"
div
"
);
myDiv.setAttribute(
"
id
"
,
"
myDiv
"
);
myDiv.style.backgroundColor
=
"
#09c
"
;
myDiv.style.width
=
"
100px
"
;
myDiv.style.height
=
"
100px
"
;
if
(myDiv.style.cssFloat
!=
null
) {
myDiv.style.cssFloat
=
"
right
"
;
}
else
{
myDiv.style.styleFloat
=
"
right
"
;
}
document.body.appendChild(myDiv);
var
demo
=
document.getElementById(
"
demo
"
);
demo.style.cssText
=
"
width:25px;height:50px;border:1px solid #09C;
"
;
//
myDiv.style.cssText = "display:inline;";//覆盖上面的样式设置
for
(
var
i
=
0
,len
=
myDiv.style.length; i
<
len; i
++
) {
var
prop
=
myDiv.style[i];
//
alert(myDiv.style.item(i));
var
value
=
myDiv.style.getPropertyValue(prop);
alert(prop
+
"
:
"
+
value
+
"
;
"
);
//
IE8-不支持
//
alert(prop + ": " + value.cssText + " (" + value.cssValueType + ") ");//很少浏览器支持
}
//
计算的样式
var
demo
=
document.getElementById(
"
demo
"
);
var
computedStyle
=
document.defaultView.getComputedStyle(demo,
null
);
//
第二个参数为伪元素字符串，如:after
alert(computedStyle.width);
//
IE不支持computedStyle()
alert(computedStyle.backgroundColor);
var
computedStyleIe
=
demo.currentStyle;
//
IE中，每个style有一个currentStyle属性
alert(computedStyleIe.backgroundColor);
//
操作样式表
var
sheet
=
null
;
for
(
var
i
=
0
, len
=
document.styleSheets.length; i
<
len; i
++
) {
//
len包含内联样式
sheet
=
document.styleSheets[i];
alert(sheet.href);
//
输出文档中每一个样式表的href值
}
function
getStyleSheet(element) {
//
通过link或style取得样式表
return
element.sheet
||
element.styleSheet;
//
非IE支持sheet，IE支持styleSheet
}
var
link
=
document.getElementsByTagName(
"
link
"
)[
0
];
//
item(0)
var
sheet
=
getStyleSheet(link);
//
这里getStyleSheet()返回的对象和document.styleSheets集合中的样式表相同
//
css规则
var
sheet
=
document.styleSheets[
0
];
//
取得第一个样式表(内嵌的不算上)
var
rules
=
sheet.cssRules
||
sheet.rules;
//
取得第一个样式表的所有规则
var
rule
=
rules.item(
0
);
//
取得第一个样式表的所有规则的第一条规则
alert(rule.selectorText);
//
取得选择器
alert(rule.style.cssText);
//
完整的css代码
alert(rule.style.backgroundColor);
//
背景
alert(rule.style.item(
2
));
//
规则的第二条
//
创建规则
var
sheet
=
document.styleSheets[
0
];
//
取得第一个样式表(内嵌的不算上)
//
sheet.insertRule("body{background-color: #DDD;}", 0);//非IE支持
//
sheet.addRule("body", "background-color: #DDD", 0);//IE only
function
insertRule(sheet, selectorText, cssText, index) {
//
重新定义insertRule实现跨浏览器兼容
if
(sheet.insertRule) {
return
sheet.insertRule(selectorText
+
"
{
"
+
cssText
+
"
}
"
, index);
}
else
{
sheet.addRule(selectorText, cssText, index);
}
}
insertRule(sheet,
"
body
"
,
"
background-color: #DDD;
"
,
0
);
//
删除规则
var
sheet0
=
document.styleSheets[
0
];
//
取得第一个样式表(内嵌的不算上)
//
sheet0.deleteRule(0);//非IE
//
sheet0.removeRule(0);//IE only
function
deleteRule(sheet, index) {
//
重定义delectRule实现跨浏览器兼容
if
(sheet.deleteRule) {
return
sheet.deleteRule(index);
}
else
{
return
sheet.removeRule(index);
}
}
deleteRule(sheet0,
0
);
View Code
