<!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>
分享到：
相关推荐
从提供的信息来看，《JavaScript DOM编程艺术 第2版》是一本专注于JavaScript及其与DOM（文档对象模型）交互的书籍。DOM是网页的核心组成部分之一，它定义了如何通过JavaScript来访问和操作HTML文档中的元素。本书...
在这个"JavaScript-DOM实战案例"中，包含了两个主要的资源部分：`css`和`img`。 1. **CSS（Cascading Style Sheets）**： CSS是用于定义网页样式和布局的语言。在JavaScript中，我们可以通过DOM API来操作CSS样式...
它不仅提供了扎实的理论基础，还包含了大量实战经验，能够帮助读者提升JavaScript DOM编程能力，创作出更具活力和交互性的网页应用。通过学习这本书，你将能够更自如地操纵网页，赋予它们生命和活力。
总结来说，《JavaScript和jQuery实战手册》是Web开发者不可或缺的资源，它全面覆盖了JavaScript语言和jQuery库的基础与进阶内容，通过实例解析和实战指导，助力读者成为优秀的前端开发人员。下载提供的PDF版本，...
jQuery则是一个JavaScript库，简化了DOM操作、事件处理、动画效果和Ajax交互。jQuery的主要知识点包含： 1. 快速DOM选择：通过简洁的语法，如$("#id")、$(".class")，快速选取DOM元素。 2. DOM操作：添加、删除和...
《JavaScript和jQuery实战手册 原书第3版》是一本深入浅出的编程指南，专为想要掌握JavaScript和jQuery的开发者所设计。这本书详细介绍了这两种技术的核心概念、语法以及在实际开发中的应用，旨在帮助读者提升Web...
7. 网络协议与软件插件：虽然本标题中的标签中提到了“网络协议”和“软件/插件”，但它们并非直接与JavaScript DOM教学相关。网络协议是数据在网络中传输的规则，而软件/插件是指在浏览器中运行的辅助软件。尽管...
总的来说，《Javascript+DOM编程艺术（完整版）》是一本全面介绍JavaScript和DOM技术的书籍，它不仅详细讲解了基础知识，还分享了实战技巧和最佳实践，帮助开发者在遵循Web标准的同时，利用JavaScript和DOM技术来...
本书内容丰富，涵盖了大量的实践知识，旨在帮助读者理解JavaScript的核心概念，并能熟练运用DOM进行网页动态化操作。 首先，JavaScript是一种广泛应用于Web开发的脚本语言，它允许在浏览器端执行代码，为用户提供...
JavaScript DOM编程艺术是一本深入探讨JavaScript与DOM交互的权威指南，它涵盖了JavaScript在网页动态化、元素操作、事件处理以及Ajax通信等方面的核心技术。DOM（Document Object Model）是Web页面的一种结构化的...
在这个“【JavaScript】DOM实战练习之选项卡切换”的主题中，我们将深入探讨如何利用JavaScript实现一个常见的UI交互功能——选项卡切换。 选项卡切换是一种用户界面设计模式，它将大量信息组织成可切换的分块，以...
[Apress] JavaScript, DOM、Ajax 项目实战 (英文版) [Apress] Practical JavaScript, DOM Scripting and Ajax Projects (E-Book) ☆ 出版信息：☆ [作者信息] Frank Zammetti [出版机构] Apress [出版日期] ...
《JavaScript DOM 编程艺术》是一本深入探讨JavaScript与DOM（文档对象模型）交互的书籍。DOM是HTML和XML文档的结构化表示，通过JavaScript，我们可以利用DOM来动态地操作网页内容，实现丰富的用户交互效果。这本书...
《实用JavaScript、DOM脚本与Ajax项目》一书由弗兰克·扎梅蒂撰写，旨在通过实践案例教授读者高级JavaScript技术，以构建卓越的Web应用程序。本书涵盖了JavaScript的核心概念，DOM（文档对象模型）的深入理解以及...
2. 项目实战：项目实战是学习过程中的重要环节，它能将理论知识与实际应用相结合，提升开发者的问题解决能力和实践经验。 3. 模板：模板在编程中通常指的是预设的代码结构或设计模式，可以快速启动一个新项目，节省...
《最新炫目JavaScript动态网页特效实战精讲》是一本深入探讨如何使用JavaScript创造生动、吸引人的网页效果的教程。在当今互联网世界，JavaScript已经成为构建交互式网页应用不可或缺的一部分，无论你是初学者还是有...
总之，“JavaScript网页开发实战”是一本全面覆盖JavaScript基础与进阶的书籍，无论你是初学者还是有一定经验的开发者，都能从中受益，提升自己的JavaScript技能，从而在网页开发领域大展拳脚。通过学习和实践，你...
**JavaScript和DOM编程艺术简介** JavaScript，一种广泛应用于网页和网络应用的脚本语言，是构建动态、交互式网页的核心工具。DOM（Document Object Model）是HTML和XML文档的编程接口，它将网页内容结构化为一个可...