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

//-----------------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);