<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 示例代码的更多相关文章

  1. javascript权威指南第11章 DOM扩展

    //javascript 权威指南 第三版 第11章 DOM扩展 //取得body元素 var body = document.querySelector("body"); //取 ...

  2. 【笔记】javascript权威指南-第六章-对象

    对象 //本书是指:javascript权威指南    //以下内容摘记时间为:2013.7.28 对象的定义: 1.对象是一种复合值:将很多值(原始值或者对象)聚合在一起,可以通过名字访问这些值. ...

  3. 【笔记】javascript权威指南-第三章-类型，值和变量

    javascript中的原始类型和对象类型(基本类型和引用类型) //本书是指:javascript权威指南    //以下内容摘记时间为:2013.7.27   计算机程序运行时需要对值(value ...

  4. javascript权威指南第13章 事件示例代码

    html 部分 <!DOCTYPE html> <html> <head> <title>Event Bubling Example</title ...

  5. JavaScript权威指南--第3章 类型、值和变量

    在编程语言中,能够表示并操作的值(value)的类型称作数据类型(type).使用变量来储存值.JavaScript中数据类型有两种:原始类型(primitive type/基本数据类型)和对象类型( ...

  6. javascript权威指南第22章高级技巧

    HTML <!DOCTYPE html> <html> <head> </head> <body> <div style=" ...

  7. javascript权威指南第16章 HTML5脚本编程

    <!DOCTYPE html> <html> <head> <script type="text/javascript" src=&quo ...

  8. javascript权威指南第15章 使用Canvas绘图

    HTML <!DOCTYPE html> <html> <head> <title>canvas</title> </head> ...

  9. JavaScript权威指南第02章 词法结构

    词法结构 2.1字符集 JavaScript 是Unicode字符集编写,差点儿支持地球上全部的语言. 2.1.1区分大写和小写 javascript是区分大写和小写的语言. 2.1.2 空格.换行符 ...

随机推荐

  1. Python字符串图解

    >>> word = "Python" >>> word[:2]  # character from the beginning to posi ...

  2. 使用 react 的 hooks 进行全局的状态管理

    使用 react 的 hooks 进行全局的状态管理 React 最新正式版已经支持了 Hooks API,先快速过一下新的 API 和大概的用法. // useState,简单粗暴,setState ...

  3. codeforce 849D. Make a Permutation!

    D. Make a Permutation! time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  4. VS.NET(C#-2.5)_简单例子（所有控件都转换成HTML控件）

    简单例子 UI设计视图  UI代码视图 <% @PageLanguage="C#" AutoEventWireup="true"CodeFile=&quo ...

  5. Matlab匿名函数，向量化和预分配，函数的函数，P码文件

    匿名函数: 匿名函数是不存储在程序文件中.但与数据类型是 function_handle 的变量相关的函数.匿名函数可以接受输入并返回输出,就像标准函数一样.但是,它们可能只包含一个可执行语句. 例如 ...

  6. Extending WCF using IServiceBehavior, IOperationBehavior, and IParameterInspector

    [ServiceContract(Name = "PasswordGenerator")] public interface IPasswordGenerator { [Opera ...

  7. openssl 证书cert与key合并pfx

    openssl pkcs12 -export -out server.pfx -inkey server.key -in server.crt

  8. Ajax调用WebService接口样例

    在做手机端h5的应用时,通过Ajax调用http接口时没啥问题的:但有些老的接口是用WebService实现的,也来不及改成http的方式,这时通过Ajax调用会有些麻烦,在此记录具体实现过程.本文使 ...

  9. Go 操作 Mysql（一）

    关于 Go 的标准库 database/sql 和 sqlx database/sql 是 Go 操作数据库的标准库之一,它提供了一系列接口方法,用于访问数据库(mysql,sqllite,oralc ...

  10. swift 有哪些学习资源

    Swift有哪些优秀的学习资源呢? 首先要推荐的当然是官方的资料了. 这个地址里放的是苹果官方为开发者提供的Swfit学习资源:https://developer.apple.com/swift/re ...