JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)
利用节点间的层次关系获取节点：
上一节讲了3中获取的方式：
* ※※一、绝对获取，获取元素的3种方式：—Element
* 1、getElementById(): 通过标签中的id属性值获来取该标签对象
* 2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合
* 3、getElementsByTagName(): 通过标签名来获取该标签对象集合
现在来看看相对获取的方式：
※※二、相对获取(利用节点之间的层次关系)，获取节点：—Node
1、父节点：parentNode–属性
2、子节点：childNodes–集合
3、上一个兄弟节点：previousSibling–属性
4、下一个兄弟节点：nextSibling–属性
5、使用以上属性时，要小心空白符节点(#Text)的存在。对于表格，还要注意有一个隐含的父节点。
*/
演示代码：
<html>
<head>
<title>Dom模型演示3---利用节点间的层次关系获取节点</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/*
* ※※一、绝对获取，获取元素的3种方式：---Element
* 1、getElementById(): 通过标签中的id属性值获来取该标签对象
* 2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合
* 3、getElementsByTagName(): 通过标签名来获取该标签对象集合
※※二、相对获取(利用节点之间的层次关系)，获取节点：---Node
1、父节点：parentNode--属性
2、子节点：childNodes--集合
3、上一个兄弟节点：previousSibling--属性
4、下一个兄弟节点：nextSibling--属性
5、使用以上属性时，要小心空白符节点(#Text)的存在。对于表格，还要注意<tr>有一个隐含的父节点<tbody>。
*/
//通过节点间的层次关系来获取节点
function getNodeByLevel() {
var tabNode = document.getElementById("table1");
//获取父节点
var node = tabNode.parentNode;
//alert(node.nodeName);//BODY,如果是IE6则是：TBODY
//alert( tabNode.parentNode.parentNode.nodeName);//HTML
//获取子节点
/*
使用childNodes时，需注意几点：
1，<table>标签下还隐藏一个<tbody>标签，<tbody>下面才是<tr>
2,空白符(空格或换行符)是被看成是一个文本节点的。例如，如果<table>和<tr>之间有换行或空格，则<table>的第一个孩子节点nodeName是：#text
3, 上面的<tbody>和#text节点是兄弟关系
*/
//需求：显示出表格中的所有姓名
var children = tabNode.childNodes;
//alert(children[0].nodeName);//#text
//alert(children[1].nodeName);//<tbody>
var trNodes = children[1].childNodes;
alert(trNodes.length);
var str="";
for(var x=0;x<trNodes.length;x++){
//用卫条件把<tr>与<td>之间的空白符过滤掉
if(trNodes[x].nodeType==3){
continue;
}
//注意，trNodes[x].childNodes[0]是空白符即#text节点，trNodes[x].childNodes[1]才是<td>节点
//str=str+trNodes[x].childNodes[1].innerText+" ";
//上面是偷懒写法，如果想写得兼容性好些，应该还用for循环遍历strNodes[x]的所有孩子节点且过滤掉#text节点，获取第一个非空白子节点的innerText
for(var i=0;i<trNodes[x].childNodes.length;i++){
if(trNodes[x].childNodes[i].nodeType==3){
continue;
}
str=str+trNodes[x].childNodes[i].innerText+" ";
break;
}
}
alert(str);
//获取兄弟节点
//上一个
var node = tabNode.previousSibling;
alert(node.nodeName);//#text
node = node.previousSibling;
alert(node.nodeName);//BR
//下一个
var node = tabNode.nextSibling;
alert(node.nodeName);//#text
node = node.nextSibling;
alert(node.nodeName);//HR
}
</script>
</head>
<body>
<div id="divId1">div区域1中的文字</div>
<br/>
<table id="table1">
<tr>
<td>Jack</td>
<td>20</td>
</tr>
<tr>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
<tr>
<td>罗斯</td>
<td>22</td>
</tr>
</table>
<hr />
<input type="button" value="获取元素" onclick="getNodeByLevel()" />
</body>
</html>
部分演示结果：
节点的增、删、改操作–查有6种，在前面已经讲过
演示代码：
<html>
<head>
<title>Dom模型演示4---节点的增、删、改操作--查有6种，在前面已经讲过</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div{
border: #0000ff solid 1px;
width: 200px;
padding: 30px;/*内补丁*/
margin: 10px;/*外补丁*/
}
#div1{ background-color:#00ccff; }/*设置或检索对象的背景颜色。*/
#div2{ background-color:#ffccff; }
#div3{ background-color:#ffff00; }
#div4{ background-color:#00cc00; }
</style>
</head>
<body>
<div id="div1"> </div>
<div id="div2"> div区域2中的文字 </div>
<div id="div3"> div区域3中的文字 </div>
<div id="div4"> div区域4中的文字 </div>
<hr/>
<input type="button" value="添加一个文本节点" onclick="creataAndadd1()" >
<input type="button" value="添加一个按钮节点" onclick="creataAndadd2()" >
<input type="button" value="第三种添加方式" onclick="creataAndadd3()" >
<br/>
<input type="button" value="删除节点" onclick="delNode()" />
<br/>
<input type="button" value="移动替换节点" onclick="updateNode1()" />
<input type="button" value="克隆替换节点" onclick="updateNode2()" />
<script type="text/javascript">
//添加一个文本节点
function creataAndadd1(){
//createTextNode 从指定值中创建文本字符串。
//创建一个文本节点
var oTextNode = document.createTextNode("新添加的文本内容");
//获取div1节点
var oDivNode1 = document.getElementById("div1");
//让div1节点把oTextNode节点添加为孩子
oDivNode1.appendChild(oTextNode);
//appendChild 给对象追加一个子元素。
}
//添加一个按钮节点---基于对象,dom
function creataAndadd2(){
//创建一个按钮节点
var oBtnNode = document.createElement("input");
//createElement 为指定标签创建一个元素的实例。
oBtnNode.type="button";
oBtnNode.value="一个按钮";
//获取div1节点
var oDivNode1 = document.getElementById("div1");
//让div1节点把oBtnNode节点添加为孩子
oDivNode1.appendChild(oBtnNode);
}
//第3种添加节点的方式---html的方式
function creataAndadd3(){
//获取div1节点
var oDivNode1 = document.getElementById("div1");
//innerHTML 设置或获取位于对象起始和结束标签内的 HTML。
//添加文本节点
oDivNode1.innerHTML = "湖南城院";//只赋一个
//oDivNode1.innerHTML +="湖南城院";//追加
//继续添加按钮
//oDivNode1.innerHTML = "<input type='button' value='按钮a'/> ";
oDivNode1.innerHTML += "<input type='button' value='按钮a'/> ";
//继续添加链接
oDivNode1.innerHTML += "<a href='http://www.baidu.com'/>百度一下</a>";
}
//删除节点
function delNode(){
//获取div2节点
var oDivNode2 = document.getElementById("div2");
//oDivNode2.removeNode();//只删当前节点-removeNode 从文档层次中删除对象。
//360-8.1浏览器中无效-IE支持
//oDivNode2.removeNode(true);//删当前节点及子节点--子树-
//360-8.1浏览器中无效-IE支持
//※removeNode()方法不建议使用，因为这种删除不彻底!---建议使用父节点来删除
//因为-自己删除自己，怎么可能删除干净嘛
oDivNode2.parentNode.removeChild(oDivNode2);//都支持
//removeChild 从元素上删除子结点。
}
//修改节点1---移动替换
function updateNode1(){
var oDivNode1 = document.getElementById("div1");
var oDivNode3 = document.getElementById("div3");
//oDivNode1.replaceNode(oDivNode3);//自己替换，
//不建议-360-8.1浏览器中无效-IE支持
//replaceNode 用其它元素替换对象。
oDivNode1.parentNode.replaceChild(oDivNode3,oDivNode1);
//replaceChild 用新的子元素替换已有的子元素。
}
//修改节点2---克隆替换
function updateNode2(){
var oDivNode1 = document.getElementById("div1");
var oDivNode3 = document.getElementById("div3");
//var oDivNode3Clone = oDivNode3.cloneNode();//不包含子节点的克隆
//cloneNode 从文档层次中复制对对象的引用。
var oDivNode3Clone = oDivNode3.cloneNode(true);//包含子节点的克隆
oDivNode1.parentNode.replaceChild(oDivNode3Clone, oDivNode1);
}
</script>
</body>
</html>
演示结果：
一开始：
点第一个按钮：
再点第二个按钮：
再点第三个按钮：
再点第四个按钮：
点第五个按钮：
点第六个按钮;
JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)的更多相关文章
- SparkGraphx计算指定节点的N度关系节点
直接上代码: package horizon.graphx.util import java.security.InvalidParameterException import horizon.gra ...
- Linux 网络编程（IO模型）
针对linux 操作系统的5类IO模型,阻塞式.非阻塞式.多路复用.信号驱动和异步IO进行整理,参考<linux网络编程>及相关网络资料. 阻塞模式 在socket编程(如下图)中调用如下 ...
- Unix 网络编程 I/O 模型 第六章
前提,也是重点是, 当接收收据.或者读取数据时,分两步 1 等待数据准备好. 2 从内核拷贝数据到进程. 对于一个network IO 即 socket(这里我们以read举例),它会涉及到两个系统对 ...
- 网络编程基础--IO模型
一 IO模型介绍: 背景 是 Linux环境下 的 network IO , Third Edition: The Sockets Networking ”,.2节“I/O Models ”,Stev ...
- d3力导图绘制节点间多条关系平行线的方法
之前用d3做了多条线之间的绘图是曲线表示的,现在产品要求改成平行线的样式,经过在网上的调研和自己的尝试,实践出一个可用的方法,分享给大家,先展示下结果: 事先声明,本方法是在以下参考网站上进行的结合和 ...
- Django（十）模型：django模型类对数据库的：增/删/改/查、自关联、管理器、元选项（指定表名）
一.插入.更新和删除 调用一个模型类对象的save方法的时候就可以实现对模型类对应数据表的插入和更新. 调用一个模型类对象的delete方法的时候就可以实现对模型类对应数据表数据的删除. 二.自关联 ...
- Python网络编程（OSI模型、网络协议、TCP）
前言: 什么是网络? 网络是由节点和连线构成,表示诸多对象及其相互联系. 在数学上,网络是一种图,一般认为专指加权图. 网络除了数学定义外,还有具体的物理含义,即网络是从某种相同类 型的实际问题中抽象 ...
- JavaScript的事件、DOM模型、事件流模型以及内置对象详解（三）
JS中的事件 JS中的事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresize ...
- Javascript高性能编程-提高Dom访问速度
在浏览器中对于Dom的操作和普通的脚本的操作处于两个不同的dll中,两个dll的交互是比较耗时的,优化对Dom的操作可以提高脚本的执行速度.下面是对如何优化的一些总结: 将需要多次操作的节点存储在一个 ...
随机推荐
- caffe源码阅读(3)-Datalayer
DataLayer是把数据从文件导入到网络的层,从网络定义prototxt文件可以看一下数据层定义 layer { name: "data" type: "Data&qu ...
- Plugin 'FEDERATED' is disabled 或 1067错误 启动错误与“服务 mysql 意外停止”解决方法
MYSQL启动报1067错误,系统日志中是“服务 mysql 意外停止” Mysql日志中则是:“Plugin 'FEDERATED' is disabled” 网我在网上找到解决方案:1.在MY.I ...
- 记录一次mount问题
linux centos 6.5 _64 oracle 11.2g 今天接到一个客户电话说重启了服务器,数据库没有重启来,看了数据库的报错 没有找到control文件的路径,数据库启动到了 unmo ...
- CentOS6.5下docker的安装及遇到的问题和简单使用
Docker是一个开源的应用容器引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.利用Linux的LXC.AUFS.Go语言.cgroup实现了资源的独立,可以很轻松的实现文件.资 ...
- vim 配置文件 ，高亮+自动缩进+行号+折叠+优化
vim 配置文件 ,高亮+自动缩进+行号+折叠+优化 将一下代码copy到 用户目录下 新建文件为 .vimrc保存即可生效: 如果想所有用户生效 请修改 /etc/vimrc (建议先cp一份)& ...
- ECMAScript一元操作符
在ECMAScript中提供了一元操作符进行简单的运算,一元操作符是ECMAScript中最简单的操作符,它只能对一个值进行操作. 一元操作符有两种类型,一种是递增和递减操作符,一种是一元加和一元减操 ...
- MarkDown教程
MarkDown笔记 在线编辑器其他教程 [1.标题] 标题1 标题1=== 标题2 标题2--- 标题3 1 2 3 4 5 6 7 7 #1 ##2 ###3 ####4 #####5 ##### ...
- bounds的深入研究
一.bounds的深入研究 1>frame:是以父控件的左上角为原点,描述的是一块区域的可视范围, bounds:是以自己内容左上角为原点,描述的是可视范围在内容范围显示的区域 2> ...
- c# 之 New新知
本人从事.NET工作已经一段时间,毕业之前一直想着做C++的,后来因为各种原因(跟学校导师相关),走向了.NET之路,从而时不时补一下.net的基础知识,因为自己的.NET知识还不是很扎实.近期每天早 ...
- C语言2048
这段时间google上有个小游戏挺火的,我也很喜欢,业余时间做个C语言版的. 老规矩先上干货: http://files.cnblogs.com/GhostZCH/2048.rar (.c & ...