<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，看完即会，不用收藏！

    本文以 Eric Matthes 的<Python编程:从入门到实践>为基础,以有一定其他语言经验的程序员视角,对书中内容提炼总结,化繁为简,将这本书的精髓融合成一篇10分钟能读完的文章. ...

  2. QT http请求数据

    1.创建一个请求类(HttpWork): HttpWork.h头文件 #pragma once #include <QObject> #include <QNetworkAccess ...

  3. PowerBuilder学习笔记之3应用对象

    教材地址:https://wenku.baidu.com/view/49121fdb6f1aff00bed51e05.html?sxts=1565760465744 3.1.1什么是应用对象(Appl ...

  4. Linux 查询端口被占用命令

    1.lsof -i:端口号 用于查看某一端口的占用情况,比如查看8000端口使用情况,lsof -i:8000 lsof -i:8080:查看8080端口占用 lsof abc.txt:显示开启文件a ...

  5. hdu 1501 贪心问题

    这道题目的关键就是逐个搜索的过程 找个时间得复习一下dfs了    这里使用temp作为参照变量 每次比较以后(由于已经排序好) 已temp为参照进行下一次的比较

  6. SQL case when 遇到null值

    case  when f.FPH is  NULL then a.HSJE else f.KPHSJE  end    yes case f.FPH  when   NULL then a.HSJE ...

  7. AngularJS在IE下页面缓存问题

    问题: 在使用AngularJS发出请求(GET)获取服务端数据,然后再绑定到页面中,你会发现在IE中总是显示原来的数据结果.这时候我们就会知道,IE做了缓存. 解决办法: 我们可以在AngularJ ...

  8. 应用程序池优化配置方案(IIS7、IIS7.5)

    定义: 是将一个或多个应用程序链接到一个或多个工作进程集合的配置,该池中的应用程序与其他应用程序被工作进程边界分隔, 一.一般优化方案 1.基本设置 [1]队列长度:默认1000,将原来的队列长度65 ...

  9. 表单送件按钮代码(一)cs（C#）(未完)

    protected void BtnRequest_Clich(object sender, EventArgs e) { lblMsg.Text= " " ; lblfmsg.T ...

  10. 使用Docker发布Asp.Net Core程序到Linux

    CentOS安装Docker 按照docker官方文档来,如果有之前安装过旧版,先卸载旧版,没有的话,可跳过. sudo yum remove docker \ docker-client \ doc ...