javascript权威指南第12章DOM2 DOM3 示例代码

<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="width: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>
javascript权威指南第12章DOM2 DOM3 示例代码

猜你喜欢
