JavaScript的DOM_节点类型的扩展
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_节点类型的扩展的更多相关文章
- JavaScript的DOM_节点的增删改
一.概述 DOM 不单单可以查找节点,也可以创建节点.复制节点.插入节点.删除节点和替换节点. 二.write()方法 write()方法可以把任意字符串插入到文档中去.会覆盖掉原来的html &l ...
- javascript之DOM（一节点类型Node）
DOM(Document Object Model)是针对HTML和XML文档的一个API.DOM描述的是一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.起源于DHML,现为W3C的推 ...
- 【转】JavaScript获取节点类型、节点名称和节点值
DOM节点信息包括节点类型(nodeType).节点名称(nodeName)和节点值(nodeValue). 节点类型 DOM节点中,每个节点都拥有不同的类型.W3C规范中常用的 DOM节点类型有以下 ...
- JavaScript判断对象类型及节点类型、节点名称和节点值
一.JavaScript判断对象类型 1.可以使用typeof函数判断对象类型 function checkObject1(){ var str="str"; console.lo ...
- JavaScript的DOM_获取和操作层次节点
一.层次节点的概述 节点的层次结构可以划分为:父节点与子节点.兄弟节点这两种.当我们获取其中一个元素节点的时候,就可以使用层次节点属性来获取它相关层次的节点. 二.childNodes 属性 chil ...
- javascript DOM中的节点层次和节点类型概述
针对JS高级程序设计这本书,主要是理解概念,大部分要点源自书内.写这个主要是当个笔记加总结 存在的问题请大家多多指正! 因为DOM这方面的对象方法操作性都特别强,但是逻辑很简单,所以就没有涉及到实际的 ...
- JavaScript常用节点类型
一.常用节点类型: nodeType:节点类型 nodeName:节点名称 nodeValue:节点值 1.查看节点类型(控制台操作): 获取元素:var p = document.getElemen ...
- JavaScript快速查找节点
我们在实际的开发中,经常要获取页面中某个html元素,动态更新元素的样式.内容属性等. 我们已经知道在JavaScript中提供下面的方法获取子.父.兄节点的方法: 常规 通过父节点获取子节点: pa ...
- 深入理解DOM节点类型第七篇——文档节点DOCUMENT
× 目录 [1]特征 [2]快捷访问 [3]文档写入 前面的话 文档节点document,隶属于表示浏览器的window对象,它表示网页页面,又被称为根节点.本文将详细介绍文档节点document的内 ...
随机推荐
- php根据IP获取所在省份-百度api接口
这里用的file_put_contents,你也可以用别的,直接怼代码: //拼接传递的参数 $getData = array( 'query' => '127.0.0.1', 'resourc ...
- 使用多说评论&加网分享
多说评论: <div data-thread-key=" class="ds-thread"></div><script>var du ...
- js密码强度校验
function AuthPasswd(string) { if(!string){ jQuery("#low").removeClass("org"); }) ...
- Java---工欲善其事必先利其器（准备篇）
Java API 1.7链接:http://pan.baidu.com/s/1cKUaKY 密码:116m Eclispse链接:http://pan.baidu.com/s/1mh6MoL6 密码: ...
- 紫书第5章 C++STL
例题 例题5-1 大理石在哪儿(Where is the Marble?,Uva 10474) 主要是熟悉一下sort和lower_bound的用法 关于lower_bound: http://blo ...
- docker 容器启动并自启动redis
centos7.5 背景:每次开机后都要自动启动redis,也就是宿主机开机,启动容器,然后启动redis 按照网上的做法是:修改redis.conf ,修改redis的启动脚本(utils/...s ...
- 给tomcat7w.exe改名字
在平常使用tomcat的过程中,经常会在自己的电脑上安装两个tomcat,而且使用tomcat的tomcat7w.exe界面比较方便,即 但是两个tomcat的名字一样,也只能启动一个tomcat. ...
- MobileWeb 适配总结
开门见山,本篇将总结一下 MobileWeb 的适配方法,即我们常说的H5页面.手机页面.WAP页.webview页面等等. 本篇讨论的页面指专门针对手机设备设计的页面,并非兼容全设备的响应式布局. ...
- 关于display:inline-block布局导致错位问题分析
移动端设计稿需求是这样的,如下图: 未知的几个头像从左至右并行居中排列. 一般可能直接使用float,但是设计图要求头像排列始终是居中的,于是想到要让它们成为行内元素,然后可使用的方法有flex bo ...
- 无法远程访问Mysql的解决方案
现在在很多的互联网公司对于mysql数据库的使用已经是不可阻挡的趋势了,所以经常我们在项目开始的时候就会做的事情就是找一台Linux服务器,到上面去安装个mysql,然后在开始我们的数据表的导入工作, ...