<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. Java串口通信 RXTX 解决过程

    背景介绍: 由于第一次用Java与硬件通信,网上查了许多资料,在这进行整理,便于以后学习.本人串口测试是USB串口设备连接电脑,在设备管理器中找到端口名称(也可以通过一些虚拟串口工具模拟). 下面主要 ...

  2. 克隆centos虚拟机导致eth0网卡不可用

    打开  vim /etc/udev/rules.d/70-persistent-net.rules可以看到eth0 eth1两个. 1.删除 NAME="eth0",即 # PCI ...

  3. PAT(B) 1082 射击比赛（Java）

    题目链接:1082 射击比赛 (20 point(s)) 题目描述 本题目给出的射击比赛的规则非常简单,谁打的弹洞距离靶心最近,谁就是冠军:谁差得最远,谁就是菜鸟.本题给出一系列弹洞的平面坐标(x,y ...

  4. 【并发】9、借助redis 实现生产消费，消息订阅发布模式队列

    这个就是一个消息可以被多次消费的范例了 其实这个实现的方式可以参考我之前的设计模式,观察者模式 https://www.cnblogs.com/cutter-point/p/5249780.html ...

  5. Python完成迪杰斯特拉算法并生成最短路径

    def Dijkstra(network,s,d):#迪杰斯特拉算法算s-d的最短路径,并返回该路径和代价 print("Start Dijstra Path……") path=[ ...

  6. PB笔记之验证必填（pfc_validation）

    pfc_validation事件中可以在保存时进行提示

  7. Kettle部署笔记

    1.启动脚本(启动job) /u02/www/data-integration/kitchen.sh -file:/u02/www/data-integration/job.kjb -logfile= ...

  8. SVN_05用戶管控

    安全性设置 [1]在左侧的User上点击右键 输入上面的信息,点击OK,我们就创建一个用户了. 说明:注意到了下面图中的Groups,是的,也可以先创建组,把用户添加到各个组中,然后对组进行授权,操作 ...

  9. Spark机器学习基础-无监督学习

    0.K-means from __future__ import print_function from pyspark.ml.clustering import KMeans#硬聚类 #from p ...

  10. POJ1475(Pushing Boxes)--bbffss

    题目在这里 题目一看完就忙着回忆童年了.推箱子的游戏. 假设只有一个箱子.游戏在一个R行C列的由单位格子组成的区域中进行,每一步, 你可以移动到相邻的四个格子中的一个,前提是那个格子是空的:或者,如果 ...