JavaScript的DOM_获取和操作层次节点
一、层次节点的概述
节点的层次结构可以划分为：父节点与子节点、兄弟节点这两种。当我们获取其中一个元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点。
二、childNodes 属性
childeNodes 属性可以获取某一个元素节点的所有子节点，这些子节点包含元素子节点和文本子节点。
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById('box');
alert(box.childNodes);//[object NodeList]返回的是一个数组，数组里面是当前元素节点所有的子节点列表
alert(box.childNodes.length); //3 获取子节点的个数
//3个子节点为：测试Div<em>倾斜</em>结尾
//第一个子节点为：测试Div，称为文本节点
//第二个子节点为：<em>倾斜</em>,称为元素节点
//第三个子节点为：结尾 ，称为文本节点 alert(box.childNodes[0]); //结果是：[object Text]表示一个文本节点对象
alert(box.childNodes[0].nodeType); //结果是：3 表示文本节点
alert(box.childNodes[0].nodeValue); //获取文本节点的文本内容
alert(box.childNodes[0].innerHTML); //当前本身就是文本，不能再获取里面的文本所以是undefined
alert(box.childNodes[0].nodeName);// #text 文本节点没有标签名 }
</script>
</head>
<body>
<div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">测试Div<em>倾斜</em>结尾</div>
</body>
通过判断节点类型来获取不同的输出
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById('box');
for (var i = 0; i < box.childNodes.length; i ++) { if (box.childNodes[i].nodeType === 1) { //判断是元素节点，输出元素标签名
alert('元素节点：' + box.childNodes[i].nodeName); } else if (box.childNodes[i].nodeType === 3) { //判断是文本节点，输出文本内容
alert('文本节点：' + box.childNodes[i].nodeValue);
}
}
};
</script>
</head>
<body>
<div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">测试Div<em>倾斜</em>结尾</div>
</body>
在获取到文本节点的时候，是无法使用 innerHTML 这个属性输出文本内容的。这个非标准的属性必须在获取元素节点的时候，才能输出里面包含的文本
<script type="text/javascript">
window.onload = function () {
var pox = document.getElementById('pox');
alert(pox);
//pox.innerHTML='测试<strong>Pox</strong>';
pox.nodeValue = '测试Pox';//没有报错，但没有赋值成功
//pox.childNodes[0].nodeValue = '测试Pox';
pox.childNodes[0].nodeValue = '测试<strong>Pox</strong>';
}
</script>
</head>
<body>
<div id="box" title="标题" style="color:#F00;" bbb="aaa">测试Div<em>倾斜</em>结尾</div>
<div id="pox">1</div>
</body>
三、firstChild 和 lastChild 属性
firstChild 用于获取当前元素节点的第一个子节点，相当于 childNodes[0]
lastChild 用于获取当前元素节点的最后一个子节点，相当于 childNodes[box.childNodes.length - 1]
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById('box');
alert(box.childNodes[0].nodeValue); //获取第一个子节点
alert(box.childNodes[box.childNodes.length-1].nodeValue);//获取最后一个子节点 //上面的方法比较烦可以使用下面的额方法
alert(box.firstChild.nodeValue);//获取第一个子节点
alert(box.lastChild.nodeValue);//获取最后一个子节点 }
</script>
</head>
<body>
<div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">测试Div<em>倾斜</em>结尾</div>
<div id="pox">1</div>
</body>
四、ownerDocument 属性
ownerDocument 属性返回该节点的文档对象根节点，返回的对象相当于 document。
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById('box');
alert(box.ownerDocument); //[object HTMLDocument]//跟节点 文档对象
alert(box.document); //同上
alert(box.ownerDocument === document); //true，根节点
alert(box.ownerDocument.nodeName); //#document
alert(box.ownerDocument.nodeType); //类型返回的是9
}
</script>
</head>
<body>
<div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">测试Div<em>倾斜</em>结尾</div>
<div id="pox">1</div>
</body>
五、parentNode、previousSibling、nextSibling 属性
parentNode 属性返回该节点的父节点
previousSibling 属性返回该节点的前一个同级节点
nextSibling 属性返回该节点的后一个同级节点。
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById('box');
alert(box.parentNode.nodeName); //获取父节点的标签名 结果是body alert(box.lastChild.previousSibling); //获取前一个同级节点即最后一个节点（也就是（结尾）的上个节点（<em>倾斜</em>） 是一个元素节点） alert(box.firstChild.nextSibling); //获取后一个同级节点 （（即测试Div）这个节点的下个节点 （<em>倾斜</em>） 是一个元素节点） alert(box.firstChild.nextSibling.nodeName);//结果是em
}
</script>
</head>
<body>
<div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">测试Div<em>倾斜</em>结尾</div>
</body>
六、attributes 属性
attributes 属性返回该节点的属性节点集合。
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById('box');
alert(box.attributes); //NamedNodeMap 也是个集合数组 集合中保存着属性节点列表
alert(box.attributes.length); //属性节点的个数
alert(box.attributes[0]); //[object Attr]最后一个属性节点对象 0代表的是最后一个是从后往前搜索的
alert(box.attributes[0].nodeType); //2，节点类型
alert(box.attributes[0].nodeValue); //最后一个属性的属性值
alert(box.attributes[0].nodeName); //最后一个属性的属性名称
alert(box.attributes['title']); //[object Attr]，返回属性为 title 的节点
alert(box.attributes['title'].nodeValue);
alert(box.attributes.getNamedItem('title')); //同上
}
</script>
</head>
<body>
<div id="box" class="pox" title="标题" style="color:#F00;" bbb="aaa">测试Div<em>倾斜</em>结尾</div>
</body>
JavaScript的DOM_获取和操作层次节点的更多相关文章
- JavaScript的BOM、DOM操作、节点以及表格（二）
BOM操作 一.什么是BOM BOM(Browser Object Model)即浏览器对象模型. BOM提供了独立于内容 而与浏览器窗口进行交互的对象: BOM由一系列相关的对象构成 ...
- Javascript及Jquery获取元素节点以及添加和删除操作
用了javascript和jquery很久,把所有元素节点的操作总结了下,放在博客上作为记录. Javascript获取元素的主要方式有三种 1.document.getElementById('ma ...
- 第一百二十六节，JavaScript，XPath操作xml节点
第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...
- 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)
getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...
- JavaScript的DOM_节点的增删改
一.概述 DOM 不单单可以查找节点,也可以创建节点.复制节点.插入节点.删除节点和替换节点. 二.write()方法 write()方法可以把任意字符串插入到文档中去.会覆盖掉原来的html &l ...
- JavaScript之DOM操作，事件操作，节点操作
1,DOM操作 1.1 概念 所谓DOM,全称Document Object Model 文档对象模型,DOM是W3C(World Wide Web Consortuum )标准,同时也定义了访问诸 ...
- JavaScript操作DOM节点
DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...
- JavaScript的DOM_处理空白节点
一.空白节点产生的原因 在非 IE6,7,8 中,标准的 DOM 具有识别空白文本节点的功能. 在火狐浏览器等其他浏览器中是 7个,而 IE6,7,8 自动忽略了,如果要保持一致的子元素节点,需要手 ...
- JS-DOM ～ 02. 隐藏二维码、锁定、获取输入框焦点、for循环为文本赋值、筛选条件、全选和反选、属性的方法操作、节点的层次结构、nodeType
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- FocusBI:SSAS体系结构(原创)
关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. SSAS是微软BI组件系列中最核心的组件,商业智能的心脏所有的数据都从这里统一输出,它能把 ...
- freemarker实现通用布局的模板拆分与复用
原文:http://www.hawu.me/coding/733 一.基础页面布局 假设我们项目页面的通用布局如下图所示: 实现这样的布局的基本html代码如下: XHTML ...
- Java ee 之 html/css样式复习
内容: 1,html/css样式 2,模拟简书注册登陆页面 *重点: 1,width:auto;height:auto; 2,background-image:url(Q5.png);left top ...
- 常用工具说明--Maven使用说明
什么是Maven? 如今我们构建一个项目需要用到很多第三方的类库,如写一个使用Spring的Web项目就需要引入大量的jar包.一个项目Jar包的数量之多往往让我们瞠目结舌,并且Jar包之间的关系错综 ...
- nginx 代理转发 wcf接口
前言 以前对比过enginx和其他几个web服务器(IIS,Apache,lighttpd)的处理静态文件的能力,enginx是最好的,甚至超过其他的几倍. 虽说enginx官方声明在Windows上 ...
- 8、导航：Nav
1.导航视图 angular2 中的是视图是显示在<router-outlet></router-outlet>里的同时他要依赖于 directives:[ ROUTER_ ...
- PHP学习5——异常处理
主要内容: PHP错误类型 异常的产生 错误日志 日志信息记录到操作系统日志 异常处理 扩展异常处理类 PHP错误类型 语法错误 执行时错误 逻辑错误 异常的产生 如果安装了xampp之后,在php. ...
- C3P0数据库连接池的java实现
1.配置准备 导入jar包 c3p0-0.9.2-pre1.jar mchange-commons-0.2.jar 数据库驱动包,如:mysql-connector-java-5.1.28-bin.j ...
- java 并发(五)---AbstractQueuedSynchronizer（4）
问题 : rwl 的底层实现是什么,应用场景是什么 读写锁 ReentrantReadWriteLock 首先我们来了解一下 ReentrantReadWriteLock 的作用是什么?和 Reent ...
- 第2天：JavaScript基础（运算符、案例、循环、冒泡以及prompt提示输入框）
一元运算在前在后的区别 加加 var num1 = 10; //++在后面 先参与运算 再自加1 var sum1 = num1++ +10; console.log("sum1的值:&qu ...