《JavaScript高级程序设计2》学习笔记——DOM2和DOM3(一)

View Code
//-----------------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);
posted @ 2011-02-26 17:01  chemdemo  阅读(490)  评论(0编辑  收藏  举报