<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. Keras中图像维度介绍

    报错问题: ValueError: Negative dimension size caused by subtracting 5 from 1 for 'conv2d_1/convolution' ...

  2. Python23之内置函数filter()和map()

    首先我们了解一个概念:迭代 迭代是访问集合元素的⼀种⽅式.迭代器是⼀个可以记住遍历的位置的对象.迭代器对象从集合的第⼀个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退. 我们已经知道 ...

  3. go tcp发送网络请求

    //发送http请求 package main import ( "fmt" "net" "io" ) func main () { //使 ...

  4. linux根文件系统的挂载过程详解

    一:前言 前段时间在编译kernel的时候发现rootfs挂载不上.相同的root选项设置旧版的image却可以.为了彻底解决这个问题.研究了一下rootfs的挂载过程.特总结如下,希望能给这部份知识 ...

  5. windows下搭建nginx负载均衡

    学习笔记,第一次记录避免忘记 首先介绍一下本地环境是windows2008 R2-64位. 1.  到nginx官网上下载最新稳定版的安装包,http://nginx.org/en/download. ...

  6. Django一对一查询，列类型及参数

    一对一查询 表的创建 # 通过 OneToOneField 创建一对一的关系 from django.db import models # Create your models here. class ...

  7. Java调用Python相关问题：指定python环境、传入参数、返回结果

    本篇文章涉及到的操作均在Windows系统下进行,Java调用python在原理上不难,但是可能在实际应用中会有各种各样的需求,网上其他的资料很不全,所以又总结了这篇文章,以供参考. 一.指定pyth ...

  8. Linux 之 软件安装

    单纯一个操作系统是没有办法满足我们的需求的,所以需要各种安装各种软件来满足我们日常工作.生活需求.一般情况下,Linux常用的安装方式有两种,以CentOS为例: 1.从源代码安装软件 将软件源代码编 ...

  9. imx6q 启动logo

    转:https://wenku.baidu.com/view/81fa0f3982c4bb4cf7ec4afe04a1b0717fd5b30e.html?rec_flag=default&sx ...

  10. MySQL 数据库的高可用性分析

    MySQL数据库是目前开源应用最大的关系型数据库,有海量的应用将数据存储在MySQL数据库中.存储数据的安全性和可靠性是生产数据库的关注重点.本文分析了目前采用较多的保障MySQL可用性方案. MyS ...