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. Bootstrap使用模态框modal实现表单提交弹出框

    Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等.如果 ...

  2. Codeforces 156B Suspects——————【逻辑判断】

    Suspects Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit St ...

  3. Config 代码片段

    class Config { private static Config _instance = null; public static Config Instance { get { if (_in ...

  4. 超时重试(一)ajax

    我们使用jquery的ajax,超时重试可以采用两种方式,一种是配置ajax的timeout的参数,另一种就是以setTimeout定时器的方式实现: 1)timeout参数配置方式 var xhr ...

  5. Java API 之 正则表达式

    一.基本概念 在项目中我们经常性做的一件事是“匹配”字符串 比如: 1.我们要验证用户输入的手机号是否合法? 2.验证设置的密码是否符合规则? 3.或者替换指定字符串中的一些内容. 这么一看,似乎正则 ...

  6. .net项目常用的库

    1.单元测试框架 Microsoft.VisualStudio.QualityTools.UnitTestFramework.dll 2.Entity Framework 框架

  7. WHILE (Transact-SQL)

    ---循环 declare @n int declare @rowcount int declare @name varchar(50) create table #temp ( id int ide ...

  8. base64的编码解码的一些坑

    1. //编码 value = base64encode(utf16to8(src)) //解码 value = utf8to16(base64decode(src)) 这里:base64编码之前先转 ...

  9. 在IIS中浏览网站时出现：无法打开登录所请求的数据库 "***"，登录失败

    在IIS中发布Web应用程序后,浏览网站时出现无法打开登录所请求的数据库 "***",登录失败错误,如下图所示: 解决办法:打开系统Web.Config配置文件,查看数据库连接串是 ...

  10. JAVA的静态方法，静态变量，静态类。

    静态变量和静态方法都属于静态对象,它与非静态对象的差别需要做个说明. (1)Java静态对象和非静态对象有什么区别? 比对如下: 静态对象                                ...