<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. Python3 - 随便说一下

    Ⅰ编程语言基础知识 ⅡPython 语言概述 Ⅰ编程语言基础知识 编程语言总体分以为机器语言.汇编语言.高级语言: 机器语言:计算机硬件能够直接使用的编程语言,二进制的集合,属于低级语言. 汇编语言: ...

  2. 【LEETCODE】33、LeetCode的Given a non-negative integer numRows, generate the first numRows of Pascal's triangle

    package y2019.Algorithm.array; import java.util.ArrayList; import java.util.List; /** * @ProjectName ...

  3. 在vue中使用ElementUI

    完整引用ElementUI: 安装:在需要使用到的vue项目目录下,使用npm下载安装: npm/cnpm i element-ui -S/--save <!-- 引入样式 --> < ...

  4. k8s安装ingress

    1. 环境准备 安装nginx-ingress-controller和backend cd /etc/yum.repos.d/mainfests 下载镜像的脚本 vi ingressnginx.sh ...

  5. Spring BeanFactory 与 FactoryBean 的区别

    BeanFactory 和 FactoryBean 都是Spring Beans模块下的接口 BeanFactory是spring简单工厂模式的接口类,spring IOC特性核心类,提供从工厂类中获 ...

  6. .net core 杂记：用Autofac替换内置容器

    官方建议使用内置容器,但有些功能并不支持,如下: 属性注入 基于名称的注入 子容器 自定义生存期管理 Func<T> 支持 所以可以使用其他第三方IOC容器,如Autofac,下面为学习使 ...

  7. vue单页面应用加入百度统计

    版权声明:本文为CSDN博主「钟文辉」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/qq_39753974/a ...

  8. 洛谷P3372--线段树代码模板1

    如题,已知一个数列,你需要进行下面两种操作: 1.将某区间每一个数加上x 2.求出某区间每一个数的和 输入格式 第一行包含两个整数N.M,分别表示该数列数字的个数和操作的总个数. 第二行包含N个用空格 ...

  9. 【转载】 腾讯云通过设置安全组禁止某些IP访问你的服务器

    有时候我们在运维网站的过程中会发现一些漏洞扫描者的IP信息,或者个人爬虫网站的IP信息,此时我们想禁止掉这些IP访问到你的服务器,可以通过腾讯云的安全组功能来设置禁止这些IP访问你的服务器,也可以通过 ...

  10. [原]Object-Oriented Programming With ANSI-C

    前一段时间面试被问到一个问题,怎么用C去实现面向对象的特性,比如封装.继承和多态.我心想这不是闲的蛋疼么,好吧,我承认我不会...[大哭].然后去网上找相关的文章,有文章推荐了<Object-O ...