DOM 自身存在很多类型，比如 Element 类型（元素节点）再比如 Text 类型（文本节点）。DOM 还提供了一些扩展功能。

一、Node类型

　　Node 接口是 DOM1 级就定义了，Node 接口定义了 12 个数值常量以表示每个节点的类型值。IE6,7,8不支持，其他所有浏览器都可以访问这个类型。

　　虽然这里介绍了 12 种节点对象的属性，用的多的其实也就几个而已。

　　

<script>

     window.onload =function(){

        alert(Node);            //火狐打印出函数本身

        alert(Node.ELEMENT_NODE);

        alert(Node.TEXT_NODE);

     };

</script>

　　IE 6,7,8,不支持，我们可以模拟一个类，让 IE 6,7,8也支持。

<script>

     window.onload =function(){

        alert(Node);            //火狐打印出函数本身

        alert(Node.ELEMENT_NODE);

        alert(Node.TEXT_NODE);

     };

     if (typeof Node == 'undefined') {                     //IE 返回

        window.Node = {                                    //创建全局的Node，所以使用window

            ELEMENT_NODE : 1,

            TEXT_NODE : 3

            //......这里将所有写全就可以了

        };

     }

</script>

二、Document 类型

　　1、Document 类型表示文档，或文档的根节点，而这个节点是隐藏的，没有具体的元素标签。

　　window.onload =function(){

        alert(document);

        alert(document.nodeType);    //类型是9

        alert(document.nodeValue);  //结果是null  没有内容

        alert(document.nodeName);//#document

     };
<script>

     window.onload =function(){

        alert(document.childNodes[0]); //DocumentType，第一个子节点对象

        alert(document.childNodes[0].nodeType); //非 IE 为 10，IE6,7,8 为 8

        alert(document.childNodes[0].nodeName);  //新版的浏览器中全部兼容结果都是小写的html（是文档声明中的），旧版的火狐是大写的，IE6,7,8是#comment

        alert(document.childNodes[1]); //HTMLHtmlElement

        alert(document.childNodes[1].nodeName); //HTML

     };

</script>

　　2、如果想直接得到<html>标签的元素节点对象 HTMLHtmlElement，不必使用 childNodes属性这么麻烦，可以使用 documentElement 即可。

　　window.onload =function(){

        alert(document.documentElement); //HTMLHtmlElement

     };

　　3、在很多情况下，我们并不需要得到<html>标签的元素节点，而需要得到更常用的<body>标签，之前我们采用的是：document.getElementsByTagName('body')[0]

　　　　那么这里提供一个更加简便的方法：document.body。

　　window.onload =function(){

        alert(document.body); //[object HTMLBodyElement]

     };

　　4、Document 中有一些遗留的属性和对象合集，可以快速的帮助我们精确的处理一些任务。

<script>

    window.onload =function(){

        //属性

        alert(document.title); //获取<title>标签的值,还可以设置

        alert(document.URL); //获取 URL 路径

        alert(document.domain); //获取域名，服务器端

        alert(document.referrer); //获取上一个 URL，服务器端

        //对象集合

        alert(document.anchors); //获取文档中带name属性的<a>元素集合

        alert(document.links); //获取文档中带 href 属性的<a>元素集合

        //document.applets; //获取文档中<applet>元素集合，已不用

        document.forms; //获取文档中<form>元素集合

        document.images; //获取文档中<img>元素集合

     };

</script>

三、Element 类型
　　Element 类型用于表现 HTML 中的元素节点。元素节点的 nodeType 为 1，nodeName 为元素的标签名。

四、Text 类型

　　Text 类型用于表现文本节点类型，文本不包含 HTML，或包含转义后的 HTML。文本节点的 nodeType 为 3。在同时创建两个同一级别的文本节点的时候，会产生分离的两个节点

<script>

     window.onload =function(){

        var box = document.getElementById("box");

        var text1 = document.createTextNode("Mr.");

        var text2 = document.createTextNode("Lee");

        box.appendChild(text1);

        box.appendChild(text2);

        alert(box.childNodes.length); //2，两个文本节点

        box.normalize();     //合并成一个节点  把两个同邻的同一级别文本节点合并在一起使用 normalize()即可。

        alert(box.childNodes.length); //1，合并之后变成1个文本节点

        alert(box.childNodes[0].nodeValue);

     };

</script>

</head>

<body>

    <div id="box"></div>

</body>

　　有合并就有分离，通过 splitText(num)即可实现节点分离。

<script>

     window.onload =function(){

        var box = document.getElementById("box");

        alert(box.childNodes[0].nodeValue);//Mr.Lee一个节点

        box.firstChild.splitText(3); //把前三个字符分离成一个节点，剩下的是一个节点

        alert(box.childNodes[0].nodeValue);//Mr.

     };

</script>

</head>

<body>

    <div id="box">Mr.Lee</div>

</body>

　　除了上面的两种方法外，Text 还提供了一些别的 DOM 操作的方法如下：

<script>

     window.onload =function(){

        var box = document.getElementById("box");

        //box.firstChild.deleteData(0,2); //删除从 0 位置的 2 个字符  结果是.Lee

        //box.firstChild.insertData(0,'Hello.'); //从 0 位置添加指定字符

        //box.firstChild.replaceData(0,2,'Miss'); //从 0 位置替换掉 2 个指定字符  结果是Miss.Lee

        alert(box.firstChild.substringData(0,2)); //从 0 位置获取 2 个字符，直接输出

        alert(box.firstChild.nodeValue); //输出结果

     };

</script>

</head>

<body>

    <div id="box">Mr.Lee</div>

</body>

五、Comment 类型

　　Comment 类型表示文档中的注释。nodeType 是 8，nodeName 是#comment，nodeValue是注释的内容。

<script>

     window.onload =function(){

        var box = document.getElementById("box");

        alert(box.firstChild); //[object Comment]

        alert(box.firstChild.nodeName);//#comment

        alert(box.firstChild.nodeType);//

        alert(box.firstChild.nodeValue);//我是注释

     };

</script>

</head>

<body>

    <div id="box"><!--我是注释--></div>

</body>

　　在 IE6,7,8 中，注释节点可以使用！当作元素来访问

<script>

     window.onload =function(){

        var comment = document.getElementsByTagName('!');

        alert(comment.length);

     };

</script>

</head>

<body>

    <div id="box"><!--我是注释--></div>

</body>

</html>

六、Attr 类型

　　Attr 类型表示文档元素中的属性。nodeType 为 2，nodeName 为属性名，nodeValue 为属性值。

JavaScript的DOM_节点类型的扩展的更多相关文章

  1. JavaScript的DOM_节点的增删改

    一.概述 DOM 不单单可以查找节点,也可以创建节点.复制节点.插入节点.删除节点和替换节点.  二.write()方法 write()方法可以把任意字符串插入到文档中去.会覆盖掉原来的html &l ...

  2. javascript之DOM（一节点类型Node）

    DOM(Document Object Model)是针对HTML和XML文档的一个API.DOM描述的是一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.起源于DHML,现为W3C的推 ...

  3. 【转】JavaScript获取节点类型、节点名称和节点值

    DOM节点信息包括节点类型(nodeType).节点名称(nodeName)和节点值(nodeValue). 节点类型 DOM节点中,每个节点都拥有不同的类型.W3C规范中常用的 DOM节点类型有以下 ...

  4. JavaScript判断对象类型及节点类型、节点名称和节点值

    一.JavaScript判断对象类型 1.可以使用typeof函数判断对象类型 function checkObject1(){ var str="str"; console.lo ...

  5. JavaScript的DOM_获取和操作层次节点

    一.层次节点的概述 节点的层次结构可以划分为:父节点与子节点.兄弟节点这两种.当我们获取其中一个元素节点的时候,就可以使用层次节点属性来获取它相关层次的节点. 二.childNodes 属性 chil ...

  6. javascript DOM中的节点层次和节点类型概述

    针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结 存在的问题请大家多多指正! 因为DOM这方面的对象方法操作性都特别强,但是逻辑很简单,所以就没有涉及到实际的 ...

  7. JavaScript常用节点类型

    一.常用节点类型: nodeType:节点类型 nodeName:节点名称 nodeValue:节点值 1.查看节点类型(控制台操作): 获取元素:var p = document.getElemen ...

  8. JavaScript快速查找节点

    我们在实际的开发中,经常要获取页面中某个html元素,动态更新元素的样式.内容属性等. 我们已经知道在JavaScript中提供下面的方法获取子.父.兄节点的方法: 常规 通过父节点获取子节点: pa ...

  9. 深入理解DOM节点类型第七篇——文档节点DOCUMENT

    × 目录 [1]特征 [2]快捷访问 [3]文档写入 前面的话 文档节点document,隶属于表示浏览器的window对象,它表示网页页面,又被称为根节点.本文将详细介绍文档节点document的内 ...

随机推荐

  1. KVC的特殊用法

    - (id)valueForKeyPath:(NSString *)keyPath方法的强大用法,举个例子: NSArray *array = @[@"name", @" ...

  2. js 打印指定页面部分打印

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  3. js confirm实现换行

    js中confirm或者alert不识别标签,所以要换行的话可以采用下面方式 \u000d 或者 \r: <script> var res=confirm(\"这是测试工作: \ ...

  4. sql 递归 STUFF

    select distinct fm_id, ,,'') AS SO_Nums from [dbo].[t_BADItems] its 表内一对多 的关系查询

  5. Spring学习笔记：Spring整合Mybatis（mybatis-spring.jar）（一：知识点回顾）

    一.知识点回顾 1.Mybatis环境搭建(DAO层的实现)(使用maven项目管理工具) 需要引入的依赖包: <!-- 单元测试junit --> <dependency> ...

  6. 快速了解RabbitMQ消息队列

    MQ 是什么?队列是什么,MQ 我们可以理解为消息队列,队列我们可以理解为管道.以管道的方式做消息传递. 场景: 1.其实我们在双11的时候,当我们凌晨大量的秒杀和抢购商品,然后去结算的时候,就会发现 ...

  7. Java 集合类常用方法

    Collection中的contains()方法和remove()方法. boolean contains(Object o);该方法是用来判断集合中是否包含某个元素,若包含,返回true,不包含返回 ...

  8. JavaScript(JS)计算某年某月的天数（月末）

    方法1 /** * 获取某年月的天数 * @param year 年 * @param month 月(0-11) * @returns {number} 天数 */ var getDaysOfMon ...

  9. Java泛型拾遗

    先上百度百科的解释 泛型是Java SE 1.5的新特性,泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数.这种参数类型可以用在类.接口和方法的创建中,分别称为泛型类.泛型接口.泛型方 ...

  10. thinkphp更新数据库的时候where('')为字符串

    if($user->where('phone='.$phone)->save($dataList)){} if($user->where(array('phone' =>$ph ...