<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Example XHTML page</title>
<style type="style/css">
</style>
</head>
<body>
hello world!
<!--SVG是一种描述几何图形的标准文档语言-->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" style="50%;height:50%;">
<rect x="0" y="0" width="100" height="100" style="fill:red" />
</svg>
<div id="mydiv" name="mydiv" data-localName="199"></div>
<div id="div1">
<p><b>Hello</b>world! </p>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
</div>
<p id="p1"><b>Hello</b>world</p>
<script type="text/javascript">
//根据TageNames获取命名空间下的元素 * 表示任意
//也可以用document.getElementsByTagNameNS("http://http://www.w3.org/1999/xhtml","mydiv");
var emlements = document.getElementsByTagNameNS("http://http://www.w3.org/1999/xhtml", "*");
var mydiv = document.getElementById("mydiv");
mydiv.getAttributeNodeNS("http://http://www.w3.org/1999/xhtml", "localName"); //获取元素的特性
mydiv.hasAttributeNS("http://http://www.w3.org/1999/xhtml", "localName"); //确定元素是否存在特性
//alert(emlements);
var doctype = document.implementation.createDocumentType("html", "-//W3C//DTD XHTML 1.0 Strict //EN",
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"); //创建文档类型 主要用于xml 构建
//document.implementation.createDocumentType(限定名,publicId,systemId)
document.implementation.createDocument("http://www.w3.org/1999/xhtml", "html", doctype);
// document.implementation.createDocument("namespaceURI",限定名,文档类型)
//该方法仅仅创建一个只有html 文档元素，其他需要再继续添加
var _html = document.implementation.createHTMLDocument("New Doc"); //创建一个html文档
// alert(_html.title);
// alert(_html.body);
if (document.implementation.hasFeature("Core", "3.0")) {
alert(true);
}
// document.body.setUserData("name", "Nicolas", function () { }); //似乎静态页面不支持这个方法，后面再了解。
// var value = document.body.getUserData("name");
// alert(value);
// var div = document.createElement("div");
// div.setUserData("name","Nicholas",function(operation,key,value,src,dest){
// if(operation ==1){
// dest.setUserData(key,value,function(){});
// }
// });
// var newDiv = div.cloneNode(true);
// alert(newDiv.getUserData("name")); //Nicholas
var supportsDom2Css = document.implementation.hasFeature("CSS","2.0"); //判定文档是否支持 CSS 2.0
var supportsDom2Css2 = document.implementation.hasFeature("CSS2","2.0");
var supportsDom2Css3 = document.implementation.hasFeature("CSS","3.0"); //是否支持CSS 3.0
alert(supportsDom2Css);
alert(supportsDom2Css2);
alert(supportsDom2Css3);
var mydiv = document.getElementById("mydiv");
//设置背景色 通过单个元素设置属性方式
mydiv.style.backgroundColor ="red"; //设置背景色
mydiv.style.width ="100px"; //设置宽度
mydiv.style.height ="100px";//设置高度
mydiv.style.border ="1px solid black";
alert(mydiv.style.backgroundColor);
alert(mydiv.style.width);
mydiv.style.cssText ="wdith:25px;height:100px;background-color:green"; //以文本方式设置样式
alert(mydiv.style.cssText);
for(var i=0,len=mydiv.style.length;i<len;i++)
{
mydiv.style[i];
mydiv.style.item(i);
mydiv.style.getPropertyValue(mydiv.style[i]); //通过style[i]的属性名获取属性值
//mydiv.style.getPropertyCSSValue()
}
//样式sheet
var supportsDOM2StyleSheets = document.implementation.hasFeature("StyleSheets","2.0");
var sheet =null;
for(var i=0,len=document.styleSheets.length;i<len;i++)
{
sheet = document.styleSheets[i];
}
// function getStyleSheet(element){
// return element.sheet|| element.styleSheet;
// }
// var link = document.getElementsByTagName("link")[0];
// sheet = getStyleSheet(link);
//元素遍历
var div = document.getElementById("div1");
var iterator = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false);
var node = iterator.nextNode();
while(node!=null)
{
alert(node.tagName);
node = iterator.nextNode();
}
var filter = function(node)
{
return node.tagName.toLowerCase()=="li"?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;
}
var walker = document.createTreeWalker(div,NodeFilter.SHOW_ELEMENT,filter,false); //该方法类似 createNodeIterator
var node = walker.nextNode();
while(node!=null)
{
alert(node.tagName); //node.tagNmae =li
node = walker.nextNode();
}
walker.firstChild(); //跳转到 P
walker.nextSibling(); //跳转UL
var node = walker.firstChild(); //跳转li
while(node!=null)
{
alert(node.tagName);
node = walker.nextSibling();
}
//范围函数
var range1 = document.createRange();
var range2 = document.createRange();
range1.selectNode(p1);
range2.selectNodeContents(p1);
</script>
</body>
</html>