<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test2</title>
<link href="css/cssDom.css"/>
<script src="js/DOM节点操作.js"></script>
<script type=text/javascript>
//节点操作 如下几块
//1节点获得那几种方式 getElementById getElementsByTagName getElementsByName
//2节点的操作，增删改
//3属性的操作，增删改
//4文本的操作，增删改
//再者注意这些方法是父节点调(像带child都是父节点调用此方法,反之parent就是子类调用，属性是元素节点的中属性，所以调用当前元素节点调用此方法了)，还是子节点调用，这个要注意
window.onload=function(){
//获得两个父节点
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
//获得oDiv1下面的子节点
var oDiv1CNodes=oDiv1.childNodes;
console.info(removeWhiteNode(oDiv1,oDiv1CNodes));//已得到想要的
//上述获得值不是所要的，清除空节点
//思路：若是节点类型为3，判断文本节点的值,若为空清除掉
function removeWhiteNode(parentNode,childNodes){
for(var i=0;i<childNodes.length;i++){
if(childNodes[i].nodeType==3 && (/^\s+$/g).test(childNodes[i].nodeValue)){
parentNode.removeChild(childNodes[i]);
}
}
return childNodes;
}
//兄弟节点的访问 previousSibling nextSibling //调用的方法当然是兄弟节点
console.info(oDiv1CNodes[1].previousSibling.innerHTML);//前一个
console.info(oDiv1CNodes[1].nextSibling.innerHTML);//后一个
console.info(oDiv1CNodes[1].previousSibling.parentNode);//前一个-->父亲节点
//以上都是查询节点及其内容，简单,下面开始节点具体的操作
//添加一个节点 节点属性经及属性值,节点的内容
var addDiv=document.createElement('div');//创建一个元素节点 div
var addTextNode1=document.createTextNode('旬阳xxxxxxxxxx');
//addDiv.setAttribute('id','div4');//这种方式添加属性id
addDiv.setAttribute('xxxxx','神马xxxxxxx');//这样添加在这个节点类是看不到的，而id,className就可以看到
//addDiv.appendChild(addTextNode1);
//document.body.appendChild(addTextNode1);
addDiv.appendChild(addTextNode1);
oDiv1.appendChild(addDiv);
//addDiv.appendChild(addTextNode1);
console.info(oDiv1);//添加成功
console.info(oDiv1CNodes);
console.info(oDiv1CNodes[3].innerHTML="XXX");//这个地方的innerHTML地覆盖上面旬阳xxxxxxxxxx的值，想看变化，得debug
oDiv1CNodes[3].setAttribute('id','div4');//这种方式也可以
//console.info(oDiv1CNodes[3].setAtt);
console.info(oDiv1CNodes[3].getAttribute('xxxxx')); //可以获得
oDiv1CNodes[3].removeAttribute('xxxxx');
console.info(oDiv1CNodes[3].getAttribute('xxxxx'));//null
//创建文本节点
//第一种
var addTextNode=document.createTextNode('人生两件大事,一件是能找到一个能在这个悲惨的世界安生立命的工作，另一个就是一个幸福美满的家庭，前者是基础，后者则需用一生去证明');
oDiv1CNodes[3].appendChild(addTextNode);//而此种用法不会覆盖，与innerHTML的用法形成对比
//第二种 如添加属性一样，这样写addDiv.setAttribute('xxxxx','神马xxxxxxx');
//替换与复制节点
oDiv1.replaceChild(oDiv1CNodes[3].cloneNode(true),oDiv1CNodes[1]);
//下面对文本节点进行操作
//首先看下整个节点
console.info(oDiv1CNodes);
console.info(oDiv1CNodes.length);
console.info(oDiv1CNodes[1].childNodes);//下面有两个text 文本
console.info(oDiv1CNodes[1].childNodes[0].insertData(2,'我是插进来的'));
console.info(oDiv1CNodes[1].childNodes[0].appendData('我是添加到最后位置'));
console.info(oDiv1CNodes[1].childNodes[0].deleteData(17,1));//从第17个位置删除一个文字
console.info(oDiv1CNodes[1].childNodes[0].replaceData(1,1,'替代x'));//从第一个文字替代1个文字，替代内容为'替代x'
console.info(oDiv1CNodes[1].childNodes);
//oDiv1CNodes[1].childNodes[0].splitData(4);//将原来的文本节点再分成两个节点
//console.info(oDiv1CNodes[1].childNodes[0].substring(1,2));//从第一个位置，返回两个节点
console.info(oDiv1CNodes[1].childNodes[0].hasOwnProperty('splitData'));
console.info(oDiv1CNodes[1].childNodes[0].isPrototypeOf('splitData'));
//是真是不支持这两个方法???
//若这块清楚的，欢迎指出
console.info(oDiv1CNodes[1].childNodes);
};
</script>
<style>
#div1{
width:100px auto;
background:#CC3
}
#div2{
width:100px auto;
background:#C99;
}
</style>
</head>
<body>
<div id='div1'>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</div>
<div id='div2'>
<div>div6</div>
<div>div7</div>
<div>div8</div>
</div>
</body>
</html>
分享到：
相关推荐
DOM实战案例的css和img资源
[Apress] JavaScript, DOM、Ajax 项目实战 (英文版) [Apress] Practical JavaScript, DOM Scripting and Ajax Projects (E-Book) ☆ 出版信息：☆ [作者信息] Frank Zammetti [出版机构] Apress [出版日期] ...
JavaScript 很容易学习。 JavaScript是世界上最流行的脚本语言，因为你在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑都是由JavaScript驱动的。 简单地说，JavaScript是一种运行在...
JavaScript+DOM编程艺术上第一个小项目练习，实现点击不同链接可以在同页面转换不同图片和文字。
实例：选项卡切换
网页开发手记.HTML.CSS.JavaScript实战详解内容简介：《网页开发手记：HTML CSS Javaｓｃｒｉｐｔ实战详解》，本书学习的三大技术是web标准的主要组成部分，并且在javaｓｃｒｉｐｔ部分以实例方式介绍了dom的知识。...
书籍通常通过丰富的案例和实战演练，帮助读者更好地理解和掌握JavaScript。在线课程则提供了灵活的学习方式，让学习者可以根据自己的时间和进度进行学习。 此外，JavaScript的社区非常活跃，拥有大量的开发者、博主...
本书是一部讲述 JavaScript实战项目开发的精彩著作，由两部分组成。第一部分讨论一般性的 JavaScript主题，包括 JavaScript的简史、好的编码习惯、调试技巧和工具等；第.
js逆向实战之DOM事件断点调试
web开发必备，含：ajax实战中文版.pdf，CSS中文手册.chm、Div+CSS 布局.pdf，DOM文档.chm、HTML基础.chm、xml手册.chm，正则表达式.CHM，JS宝典.chm
JavaScript专题一_构建自己的JS库 JavaScript专题二_JavaScript常见问题 ...JavaScript专题三_JavaScript面向对象实战 JavaScript专题四_DOM上 JavaScript专题四_DOM下 JavaScript专题四：DOM实践 所有课程源码..
第三部分 Ajax:与Web服务器通信 327 第11章 初识Ajax 327 11.1 什么是Ajax 328 11.2 Ajax基础知识 329 11.2.1 拼图块 329 11.2.2 和Web服务器通信 331 11.3 Ajax的jQuery方式 334 11.3.1 使用load( )函数 335 11.3.2...
此次将长期的思考、感悟，多年的系统开发、设计和团队管理经验，以及深入分析众多项目实战的宝贵成果和盘托出，力求将编程思想与具体实践融为一体，提炼出适合于广大读者快速理解和彻底掌握.NET软件开发的最佳学习...
Native 有更好的人机交互体验 1. 更丰富细腻的动画效果 2. 更精准的⼿势识别 3. 原⽣控件有更好的体验 4. 更合适的线程模型 ...在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染等。
教程内容：JavaScript编程基础；BOM&DOM编程；JavaScript交互特效案例实战；JavaScript深入；JavaScript面向对象编程。 教程资料：视频；全套代码。
第11章 学以致用:JavaScript网站设计实战 11.1 案例背景介绍 11.2 页面视觉效果设计 11.3 CSS 11.4 颜色 11.5 XHTML文档 11.6 JavaScript脚本 11.7 小结 11.8 下章简介 第12章 展望DOM脚本...
全书的内容比较广泛，只要是实战中用得到的东西都有涉及（核心语法、标准库、DOM、浏览器模型、外部代码库、开发工具等等）。全书的难度为中级， 比较适合对JavaScript已经有所了解、想进一步深入学习的读者，英语中...
010306_使用JavaScript操作DOM 010401_Tomcat服务器的安装及配置 020501_注释及Scriptlet 020502_page指令 020503_包含指令 020504_跳转指令 020505_实例操作：用户登陆程序实现（JSP + JDBC实现） 020601_内置对象...
jd的实战，通过css3+html5，JavaScript的运用，实现京东的首页布局和动态的一下效果
《React开发实战 介绍如何成功构建日益复杂的前端应用程序与接口，深入分析React库，并详述React生态系统中的其他工具与库，从而指导你创建完整的复杂应用程序。 你将全面学习React的用法以及React生态系统中的其他...