js----DOM的三大节点及部分用法
DOM有三种节点：元素节点、属性节点、文本节点。
一、用nodeType可以检测节点的类型
| 节点类型 | nodeType属性值 |
| 元素节点 | 1 |
| 属性节点 | 2 |
| 文本节点 | 3 |
这样方便在js中对各个节点进行操作。
元素节点：html中的标签。
属性节点：html便签中的属性值。
文本节点：元素节点之间的文本。
二、用body的childNodes来测试
<body>/*第一个文本元素
*/<div></div>/*第二个文本元素
*/<div></div>/*第三个文本元素
*/<ul>
<li></li>
<li></li>
<li></li>
</ul>/*第四个文本元素
*/</body>
来看body的childNodes中各个节点的个数。
先说一下childNodes，这个属性用来获取任何一个元素的所有子元素，它是一个包含这个元素的全部子元素的数组。
用js测试：
window.onload = function (){
var oBody = document.getElementsByTagName('body')[0];
var aChild = oBody.childNodes;
alert(aChild.length);//
for(var i = 0; i < aChild.length; i++) {
alert(aChild[i].nodeType);//3 1 3 1 3 1 3
}
};
由此看来：
body的子元素有div、div、ul。
body的文本元素有四个，代码中注释出出来的，我故意将*/换了一行写出来，是想表明在<body>和<div>之间是一个文本节点。
有人会觉得疑惑，不是说元素节点之间就是文本节点吗？为什么像<div></div>之间的文本节点没有算进去呢？
对的，那个也算文本节点，但我们计算的是body的子节点，像<div></div>之间的那是<div>的子节点啦，并不是body的子节点。
三、用nodeValue来得到和设置一个节点的值
三大节点中，属性节点和文本节点都是可能有值的，但是元素节点是没有值的。
用node.nodeValue得到node的值，那么有一个问题，nodeValue和innerHTML有什么区别呢？
nodeValue获取的是节点的值，innerHTML是以字符串形式返回该节点的所有子节点及其值。可以看做是部分与大体的一个区别。
举个例子：
<body>
<div id="div1">
这是div的第一个子节点，是一个文本节点
<p>div的第二个子节点p，这是p的第一个文本节点</p>
</div>
</body>
我们用js来测试一下nodeValue和innerHTML的结果
window.onload = function (){
var oDiv = document.getElementById('div1');
var aChild = oDiv.childNodes;
alert(aChild[0].nodeValue);
alert(oDiv.innerHTML);
};
测试结果如下：
第一个alert弹出“这是div的第一个子节点，是一个文本节点”
第二个alert弹出“这是div的第一个子节点，是一个文本节点 <p>div的第二个子节点p，这是p的第一个文本节点</p>”
三、用nodeName来获取节点的
nodeName属性含有某个节点的名称。
对于元素节点，nodeName=标签名（返回的名称是大写的）。
对于文本节点，nodeName=#text。
对于属性节点，nodeName=属性名（返回的名称是大写的）。
使用方法：elemt.nodeName;
js----DOM的三大节点及部分用法的更多相关文章
- Javascript之DOM的三大节点及部分用法
DOM有三种节点:元素节点.属性节点.文本节点. 一.用nodeType可以检测节点的类型 节点类型 nodeType属性值 元素节点 1 属性节点 2 文本节点 3 这样方便在js中对各个节点进行操 ...
- js dom操作获取节点的一些方法
在复习javascript基础的时候,整理了一下js中获取节点的一些常用的方法,见代码: //js获取下一个兄弟节点 function getNextSibling(eleObj){ var next ...
- JS DOM操作（创建、遍历、获取、操作、删除节点）
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
- JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
- JS之获取子节点
在JS中获取子节点有以下几种方法: firstElementChild.firstChild.childNodes和children 我们通过一个例子来分析这几种方法的区别(获取div下的p标签) 输 ...
- js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题 频繁的与dom交互,是一件浪费时间与金钱的 ...
- JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
- JavaScript学习总结【5】、JS DOM
1.DOM 简介 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理 HTML 文档的标准方法.DOM 将 HTML 文档呈现为带有 ...
- DOM Style样式对象的详细用法
DOM Style样式对象的详细用法 HTML Style样式比较复杂,相应访问.修改方法也有所差异.参考相关资料,整理如下. 典型Html文件如下,有三种定义方式. <head> ...
随机推荐
- 1.7.3 Relevance-相关性
1. 相关性 相关性是一个查询响应满足用户搜索信息的一个度(程度). 查询响应的相关性主要依赖于上下文的查询.单个搜索应用程序可以通过用户的不同需求和期望被用来在不同的上下文.例如,气候数据的搜索引擎 ...
- solrj:org.apache.solr.common.util.NamedList.java
package org.apache.solr.common.util; import java.io.Serializable; import java.util.ArrayList; import ...
- [WinForm] 使用反射将业务对象绑定到窗体或控件容器
在WebForm中,可以使用反射将业务对象绑定到 ASP.NET 窗体控件.最近做Winform项目,也参考WebForm中的代码实现同样的功能. Winform没有提供类似WebForm中的 ...
- iOS 多线程讲解2
1.GCD其他方法 1.GCD应用 单例模式 static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ NSLog(@&qu ...
- 《MFC游戏开发》笔记三 游戏贴图与透明特效的实现
本系列文章由七十一雾央编写,转载请注明出处. 313239 作者:七十一雾央 新浪微博:http://weibo.com/1689160943/profile?rightmod=1&wvr=5 ...
- asp.net中Response对象鱼Request对象
在asp.net中Response与Request对象是两个常用的对象,虽然他们长得有点像,但是作用却是截然不同,我们来看一下他们他们都有哪些不同. 一.Response对象主要作用:像浏览器输出信息 ...
- VMware系统运维（四）SQL Server 2008 R2 新建数据库与ODBC数据
1.新建数据库,右击"新建数据库-." 2.设置数据库名,初始数据库大小,如果要配置数据库优化,可以考虑初始大小与日志大小,点击添加安装完成,即完成数据库新建. 3.ODBC数据源 ...
- BZOJ 3083: 遥远的国度 dfs序,树链剖分,倍增
今天再做一天树的题目,明天要开始专攻图论了.做图论十几天之后再把字符串搞搞,区域赛前再把计几看看. 3083: 遥远的国度 Time Limit: 10 Sec Memory Limit: 128 ...
- asp.net MVC EF Where 过滤条件怎么写
做.Net开发的肯定都知道.Net Sql语句有个SqlParameter 一般用来做过滤判断逻辑写,那么到了EF 了还有这样的写法嘛?答案肯定是有的了,这里我只是把最粗糙和简单的写法罗列一些,具体封 ...
- Jquery 格式化时间
我们常常会通过datetime得到时间,但是网页前台往往会显示不同的时间 如:2013-12-15 2013年12月23日 2013 12 15 等多种显示效果,这就需要我们把时间格式化一下. 下面是 ...