iehyou
- 浏览: 135148 次
- 性别:
- 来自: 杭州
-
文章分类
最新评论
-
522823979：
JXL POI 导出excel 包括图片 -
贝塔ZQ：
实现导出excel文件和图片，感觉用poi和jxl代码量好多， ...
JXL POI 导出excel 包括图片 -
bmpbhg：
和你的类似，不过我这边报的是
org.dom4j.Docume ...
Servlet 接受解析HTTP请求XML数据,返回XML -
Wuaner：
引用Non Field Validators排在前面的先执行 ...
struts2 内建效验器 -
timelion：
请将正式简历发送至
timelion@163.com
找工作中...放上简历,求推荐
JavaScript节点操作DOMDocument属性和方法 2009-04-14 16:12 注意大小写一定不能弄错.
属性:
1 Attributes 存储节点的属性列表(只读)
2 childNodes 存储节点的子节点列表(只读)
3 dataType 返回此节点的数据类型
4 Definition 以DTD或XML模式给出的节点的定义(只读)
5 Doctype 指定文档类型节点(只读)
6 documentElement 返回文档的根元素(可读写)
7 firstChild 返回当前节点的第一个子节点(只读)
8 Implementation 返回XMLDOMImplementation对象
9 lastChild 返回当前节点最后一个子节点(只读)
10 nextSibling 返回当前节点的下一个兄弟节点(只读)
11 nodeName 返回节点的名字(只读)
12 nodeType 返回节点的类型(只读)
13 nodeTypedValue 存储节点值(可读写)
14 nodeValue 返回节点的文本(可读写)
15 ownerDocument 返回包含此节点的根文档(只读)
16 parentNode 返回父节点(只读)
17 Parsed 返回此节点及其子节点是否已经被解析(只读)
18 Prefix 返回名称空间前缀(只读)
19 preserveWhiteSpace 指定是否保留空白(可读写)
20 previousSibling 返回此节点的前一个兄弟节点(只读)
21 Text 返回此节点及其后代的文本内容(可读写)
22 url 返回最近载入的XML文档的URL(只读)
23 Xml 返回节点及其后代的XML表示(只读)
方法:
1 appendChild 为当前节点添加一个新的子节点,放在最后的子节点后
2 cloneNode 返回当前节点的拷贝
3 createAttribute 创建新的属性
4 createCDATASection 创建包括给定数据的CDATA段
5 createComment 创建一个注释节点
6 createDocumentFragment 创建DocumentFragment对象
7 createElement 创建一个元素节点
8 createEntityReference 创建EntityReference对象
9 createNode 创建给定类型,名字和命名空间的节点
10 createPorcessingInstruction 创建操作指令节点
11 createTextNode 创建包括给定数据的文本节点
12 getElementsByTagName 返回指定名字的元素集合
13 hasChildNodes 返回当前节点是否有子节点
14 insertBefore 在指定节点前插入子节点
15 Load 导入指定位置的XML文档
16 loadXML 导入指定字符串的XML文档
17 removeChild 从子结点列表中删除指定的子节点
18 replaceChild 从子节点列表中替换指定的子节点
19 Save 把XML文件存到指定节点
20 selectNodes 对节点进行指定的匹配,并返回匹配节点列表
21 selectSingleNode 对节点进行指定的匹配,并返回第一个匹配节点
22 transformNode 使用指定的样式表对节点及其后代进行转换
23 transformNodeToObject 使用指定的样式表将节点及其后代转换为对象
*********************************
DOM(文档对象模型)
DOM(文档对象模型)概念的推出,这个API使HTML如虎添翼,但是有些学DHTML的朋友还是有些困挠,只是因为目前的手册的书写不太科学,是按字母
来分的,不便查阅.其实DOM中最关键是要掌握节点与节点之间的关系(between node andnode),想学习DHTML中的DOM千万不要从头到尾地看遍所
有的属性和方法,你有三国时张松的"过目不忘"的本领吗?没有吧,那就听我分析一下：
其实DOM教给我们的就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子
目录……
根节点：
DOM把层次中的每一个对象都称之为节点（NODE），以HTML超文本标记语言为例：整个文档的一个根就是<html>,在DOM中可以使用
document.documentElement来访问它，它就是整个节点树的根节点（ROOT）
子节点：
一般意义上的节点，根节点以下最大子节点就是主文档区<body>了，要访问到body标签，在脚本中应该写：
document.body
body区以内所有的文本及HTML标签都是文档的节点，分别称为文本节点、元素节点（或者叫标签节点），大家知道HTML说到底只是文本而矣，
不论怎么样的网页必然由这两个节点组成，也只能由这两个节点组成
节点之间的关系：
节点之间的关系也是DOM中最重要的一个关节，如何正确地引用到节点对象，一定要清楚节点树各个节点的相互描述方式，在DHTML里，
Javascript脚本就用了各个节点对象的一整套方法和属性去描述另外的节点对象。
节点的绝对引用：
返回文档的根节点
document.documentElement
返回当前文档中被击活的标签节点
document.activeElement
返回鼠标移出的源节点
event.fromElement
返回鼠标移入的源节点
event.toElement
返回激活事件的源节点
event.srcElement
节点的相对引用：(设当前对节点为node)
返回父节点
node.parentNode
node.parentElement
返回子节点集合（包含文本节点及标签节点）
node.childNodes
返回子标签节点集合
node.children
返回子文本节点集合
node.textNodes
返回第一个子节点
node.firstChild
返回最后一个子节点
node.lastChild
返回同属下一个节点
node.nextSibling
返回同属上一个节点
node.previousSibling
节点的各种操作：(设当前的节点为node)
新增标签节点句柄：
document.createElement(sNode) //参数为要新添的节点标签名，例：newnode=document.createElement("div");
1、添加节点：
追加子节点：
node.appendChild(oNode) //oNode为生新增的节点句柄,例：node.appendChild(newnode)
应用标签节点
node.applyElment(oNode,sWhere)//oNode为生新增的节点句柄,sWhere有两个值：outside / inside，加在当前节点外面还是里面
插入节点
inode.insertBefore()
node.insertAdjacentElement()
node.replaceAdjacentText()
2、修改节点：
删除节点
node.remove()
node.removeChild()
node.removeNode()
替换节点
node.replaceChild()
node.replaceNode()
node.swapNode()
2、复制节点：
返回复制复制节点引用
node.cloneNode(bAll)//bAll为布尔值，true / false 是否克隆该节点所有子节点
3、节点信息
是否包含某节点
node.contains()
是否有子节点
node.hasChildNodes()
*******************************************************
下面为javascript操作xml
<script language="JavaScript">
<!--
var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM")
//加载文档
//doc.load("b.xml");
//创建文件头
var p = doc.createProcessingInstruction("xml","version='1.0' encoding='gb2312'");
//添加文件头
doc.appendChild(p);
//用于直接加载时获得根接点
//var root = doc.documentElement;
//两种方式创建根接点
// var root = doc.createElement("students");
var root = doc.createNode(1,"students","");
//创建子接点
var n = doc.createNode(1,"ttyp","");
//指定子接点文本
//n.text = " this is a test";
//创建孙接点
var o = doc.createElement("sex");
o.text = "男"; //指定其文本
//创建属性
var r = doc.createAttribute("id");
r.value="test";
//添加属性
n.setAttributeNode(r);
//创建第二个属性
var r1 = doc.createAttribute("class");
r1.value="tt";
//添加属性
n.setAttributeNode(r1);
//删除第二个属性
n.removeAttribute("class");
//添加孙接点
n.appendChild(o);
//添加文本接点
n.appendChild(doc.createTextNode("this is a text node."));
//添加注释
n.appendChild(doc.createComment("this is a comment\n"));
//添加子接点
root.appendChild(n);
//复制接点
var m = n.cloneNode(true);
root.appendChild(m);
//删除接点
root.removeChild(root.childNodes(0));
//创建数据段
var c = doc.createCDATASection("this is a cdata");
c.text = "hi,cdata";
//添加数据段
root.appendChild(c);
//添加根接点
doc.appendChild(root);
//查找接点
var a = doc.getElementsByTagName("ttyp");
//var a = doc.selectNodes("//ttyp");
//显示改接点的属性
for(var i= 0;i<a.length;i++)
{
alert(a[i].xml);
for(var j=0;j<a[i].attributes.length;j++)
{
alert(a[i].attributes[j].name);
}
}
//修改节点,利用XPATH定位节点
var b = doc.selectSingleNode("//ttyp/sex");
b.text = "女";
//alert(doc.xml);
//XML保存（需要在服务端，客户端用FSO）
//doc.save();
//查看根接点XML
if(n)
{
alert(n.ownerDocument.xml);
}
//-->
</script>
属性:
1 Attributes 存储节点的属性列表(只读)
2 childNodes 存储节点的子节点列表(只读)
3 dataType 返回此节点的数据类型
4 Definition 以DTD或XML模式给出的节点的定义(只读)
5 Doctype 指定文档类型节点(只读)
6 documentElement 返回文档的根元素(可读写)
7 firstChild 返回当前节点的第一个子节点(只读)
8 Implementation 返回XMLDOMImplementation对象
9 lastChild 返回当前节点最后一个子节点(只读)
10 nextSibling 返回当前节点的下一个兄弟节点(只读)
11 nodeName 返回节点的名字(只读)
12 nodeType 返回节点的类型(只读)
13 nodeTypedValue 存储节点值(可读写)
14 nodeValue 返回节点的文本(可读写)
15 ownerDocument 返回包含此节点的根文档(只读)
16 parentNode 返回父节点(只读)
17 Parsed 返回此节点及其子节点是否已经被解析(只读)
18 Prefix 返回名称空间前缀(只读)
19 preserveWhiteSpace 指定是否保留空白(可读写)
20 previousSibling 返回此节点的前一个兄弟节点(只读)
21 Text 返回此节点及其后代的文本内容(可读写)
22 url 返回最近载入的XML文档的URL(只读)
23 Xml 返回节点及其后代的XML表示(只读)
方法:
1 appendChild 为当前节点添加一个新的子节点,放在最后的子节点后
2 cloneNode 返回当前节点的拷贝
3 createAttribute 创建新的属性
4 createCDATASection 创建包括给定数据的CDATA段
5 createComment 创建一个注释节点
6 createDocumentFragment 创建DocumentFragment对象
7 createElement 创建一个元素节点
8 createEntityReference 创建EntityReference对象
9 createNode 创建给定类型,名字和命名空间的节点
10 createPorcessingInstruction 创建操作指令节点
11 createTextNode 创建包括给定数据的文本节点
12 getElementsByTagName 返回指定名字的元素集合
13 hasChildNodes 返回当前节点是否有子节点
14 insertBefore 在指定节点前插入子节点
15 Load 导入指定位置的XML文档
16 loadXML 导入指定字符串的XML文档
17 removeChild 从子结点列表中删除指定的子节点
18 replaceChild 从子节点列表中替换指定的子节点
19 Save 把XML文件存到指定节点
20 selectNodes 对节点进行指定的匹配,并返回匹配节点列表
21 selectSingleNode 对节点进行指定的匹配,并返回第一个匹配节点
22 transformNode 使用指定的样式表对节点及其后代进行转换
23 transformNodeToObject 使用指定的样式表将节点及其后代转换为对象
*********************************
DOM(文档对象模型)
DOM(文档对象模型)概念的推出,这个API使HTML如虎添翼,但是有些学DHTML的朋友还是有些困挠,只是因为目前的手册的书写不太科学,是按字母
来分的,不便查阅.其实DOM中最关键是要掌握节点与节点之间的关系(between node andnode),想学习DHTML中的DOM千万不要从头到尾地看遍所
有的属性和方法,你有三国时张松的"过目不忘"的本领吗?没有吧,那就听我分析一下：
其实DOM教给我们的就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子
目录……
根节点：
DOM把层次中的每一个对象都称之为节点（NODE），以HTML超文本标记语言为例：整个文档的一个根就是<html>,在DOM中可以使用
document.documentElement来访问它，它就是整个节点树的根节点（ROOT）
子节点：
一般意义上的节点，根节点以下最大子节点就是主文档区<body>了，要访问到body标签，在脚本中应该写：
document.body
body区以内所有的文本及HTML标签都是文档的节点，分别称为文本节点、元素节点（或者叫标签节点），大家知道HTML说到底只是文本而矣，
不论怎么样的网页必然由这两个节点组成，也只能由这两个节点组成
节点之间的关系：
节点之间的关系也是DOM中最重要的一个关节，如何正确地引用到节点对象，一定要清楚节点树各个节点的相互描述方式，在DHTML里，
Javascript脚本就用了各个节点对象的一整套方法和属性去描述另外的节点对象。
节点的绝对引用：
返回文档的根节点
document.documentElement
返回当前文档中被击活的标签节点
document.activeElement
返回鼠标移出的源节点
event.fromElement
返回鼠标移入的源节点
event.toElement
返回激活事件的源节点
event.srcElement
节点的相对引用：(设当前对节点为node)
返回父节点
node.parentNode
node.parentElement
返回子节点集合（包含文本节点及标签节点）
node.childNodes
返回子标签节点集合
node.children
返回子文本节点集合
node.textNodes
返回第一个子节点
node.firstChild
返回最后一个子节点
node.lastChild
返回同属下一个节点
node.nextSibling
返回同属上一个节点
node.previousSibling
节点的各种操作：(设当前的节点为node)
新增标签节点句柄：
document.createElement(sNode) //参数为要新添的节点标签名，例：newnode=document.createElement("div");
1、添加节点：
追加子节点：
node.appendChild(oNode) //oNode为生新增的节点句柄,例：node.appendChild(newnode)
应用标签节点
node.applyElment(oNode,sWhere)//oNode为生新增的节点句柄,sWhere有两个值：outside / inside，加在当前节点外面还是里面
插入节点
inode.insertBefore()
node.insertAdjacentElement()
node.replaceAdjacentText()
2、修改节点：
删除节点
node.remove()
node.removeChild()
node.removeNode()
替换节点
node.replaceChild()
node.replaceNode()
node.swapNode()
2、复制节点：
返回复制复制节点引用
node.cloneNode(bAll)//bAll为布尔值，true / false 是否克隆该节点所有子节点
3、节点信息
是否包含某节点
node.contains()
是否有子节点
node.hasChildNodes()
*******************************************************
下面为javascript操作xml
<script language="JavaScript">
<!--
var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM")
//加载文档
//doc.load("b.xml");
//创建文件头
var p = doc.createProcessingInstruction("xml","version='1.0' encoding='gb2312'");
//添加文件头
doc.appendChild(p);
//用于直接加载时获得根接点
//var root = doc.documentElement;
//两种方式创建根接点
// var root = doc.createElement("students");
var root = doc.createNode(1,"students","");
//创建子接点
var n = doc.createNode(1,"ttyp","");
//指定子接点文本
//n.text = " this is a test";
//创建孙接点
var o = doc.createElement("sex");
o.text = "男"; //指定其文本
//创建属性
var r = doc.createAttribute("id");
r.value="test";
//添加属性
n.setAttributeNode(r);
//创建第二个属性
var r1 = doc.createAttribute("class");
r1.value="tt";
//添加属性
n.setAttributeNode(r1);
//删除第二个属性
n.removeAttribute("class");
//添加孙接点
n.appendChild(o);
//添加文本接点
n.appendChild(doc.createTextNode("this is a text node."));
//添加注释
n.appendChild(doc.createComment("this is a comment\n"));
//添加子接点
root.appendChild(n);
//复制接点
var m = n.cloneNode(true);
root.appendChild(m);
//删除接点
root.removeChild(root.childNodes(0));
//创建数据段
var c = doc.createCDATASection("this is a cdata");
c.text = "hi,cdata";
//添加数据段
root.appendChild(c);
//添加根接点
doc.appendChild(root);
//查找接点
var a = doc.getElementsByTagName("ttyp");
//var a = doc.selectNodes("//ttyp");
//显示改接点的属性
for(var i= 0;i<a.length;i++)
{
alert(a[i].xml);
for(var j=0;j<a[i].attributes.length;j++)
{
alert(a[i].attributes[j].name);
}
}
//修改节点,利用XPATH定位节点
var b = doc.selectSingleNode("//ttyp/sex");
b.text = "女";
//alert(doc.xml);
//XML保存（需要在服务端，客户端用FSO）
//doc.save();
//查看根接点XML
if(n)
{
alert(n.ownerDocument.xml);
}
//-->
</script>
分享到：
发表评论
-
基于wp_poll开发满意度调查
2010-12-03 10:23 1138最近换了公司,试用期给公司改造内部网. 试用wordpress ... -
png图片透明ie6解决
2010-11-17 16:31 933// 图片透明 function setPng(img, ... -
Jquery 应用收集
2010-07-14 09:49 17901.结合时间控件WdatePicker使用,根据radio值不 ... -
原生AJAX 实现级联select
2010-02-22 15:15 4106由于是在客户上的框架上做开发,因为是比较老的框架,ajax框架 ... -
CSS知识
2010-01-07 15:01 793虽然我不是美工，也不专门去学CSS，但是项目中遇到的一些技巧还 ... -
HTML
2009-12-04 14:54 8591.标签map-- 定义图像点击区域的集合 map 标签 m ... -
JS函数收集--001
2009-11-30 09:52 920记录下开发过程中常用到的JS问题 1. 直接获取对性属性， ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第十四章--在JSP里使用FCF
2009-11-25 16:05 2033前面我们讲的例子里，都是采用HTML或JavaScript来显 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第十三章--间断数据的处理
2009-11-25 16:00 1556有时候我们的数据并不是连续的，例如我们有一个反映每个月销售额的 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第十二章--FCF中的特殊字符
2009-11-25 15:52 1670在FCF里，如果要在图形里用到一些特殊的字符，你就要对它进行编 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第十一章--FCF中的基本数字格式
2009-11-25 15:51 1886在我们的报表里，经常要对数值进行一些格式化，如小数位，千分位等 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第十章--FCF中的下钻
2009-11-25 15:46 1533在我们开发图形报表时，你可能会遇到这样的需求：用户要求点击柱状 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第九章--动态改变图形的类型和数据
2009-11-25 15:44 3245在前面的章节里，我们已经了解了图形的基本使用方法以及图形XML ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第八章--FusionCharts Free和组合图XML
2009-11-25 15:42 2936本章我们来看看什么是组合图形，以及它的XML是怎么写的。 什 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第七章--FusionCharts Free和XML
2009-11-25 15:40 2485FusionCharts使用XML来创建和控制图形。 数据类 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第六章--FusionCharts Free图形的基本元素
2009-11-25 15:38 2482在我们了解了FCF的各种使用方法以后，我们就会发现，其实我们要 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第五章--FusionCharts Free使用dataXML加载数据
2009-11-25 15:34 1959在前面的例子里，我们使用的数据都是一个单独的XML文件，它可以 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第四章--FusionCharts Free使用JavaScript加载图形
2009-11-25 15:32 2200在上篇文章里，我们做 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第三章--FusionCharts Free我的第一个图形
2009-11-25 15:30 2730在介绍完了FCF的下载安装以后，现在，我们终于要开始创建我们的 ... -
[AJava]FusionCharts Free中文开发指南[使用文档教程]第一章--FusionCharts Free介绍
2009-11-25 15:28 2051FusionCharts是InfoSoft Global公司的 ...
相关推荐
javascript知识点汇总
**Vue.js** 是一款轻量级的前端JavaScript框架，用于构建用户界面。Vue.js的响应式系统使得数据模型和视图保持同步，非常适合构建动态的数据驱动应用。在这个项目中，Vue.js用于创建前端界面，展示知识图谱，处理...
JS知识大概
首先，**javascript知识总结.doc** 可能包含了JS的基础概念、语法结构以及常用API的概述。这部分内容可能涵盖以下几个方面： 1. **基础语法**：包括变量声明（var、let、const）、数据类型（原始类型、引用类型）、...
JavaScript 基础知识： 1. JavaScript 是网页的脚本语言，负责实现网页的交互效果。 2. JavaScript 的作用：实现网页上的特效效果，例如鼠标滑过弹出下拉菜单、鼠标滑过表格的背景颜色改变等。 总结： HTML、CSS ...
JavaScript，简称JS，是Web开发领域中不可或缺的脚本语言，尤其...这个JavaScript知识图谱覆盖了从基础到高级的广泛内容，通过深入学习和实践，你可以建立起坚实的JavaScript基础，为成为前端开发专家打下坚实的基础。
本项目结合了Neo4j数据库、SpringBoot后端框架、Vue.js前端库以及d3.js可视化库，构建了一个完整的知识图谱系统。以下是这些技术在知识图谱构建中的应用及其相关知识点的详细说明： **1. Neo4j - 图数据库** Neo4j...
Js知识点回顾脑图(一).xmind
系统的解读javascript知识结构体系，结构体系明确，对于知识的回顾与查找较有帮助。
知识图谱是一种结构化的知识表达形式，它以图形的方式组织和存储了大量实体（如人、地点、事件等）及其相互关系。在知识图谱中，实体作为节点，实体之间的各种语义关联则通过边进行连接，形成了一个庞大的数据网络。...
该文档为JavaScript技术专家根据自己多年研发经验整理而成的JavaScript知识图谱。
JavaScript的运算符知识图谱，有助于你更好的理解JavaScript运算符
threejs源码(threejs知识点：1.模型分析)threejs源码(threejs知识点：1.模型分析)threejs源码(threejs知识点：1.模型分析)threejs源码(threejs知识点：1.模型分析)threejs源码(threejs知识点：1.模型分析)
javascript 知识点图解 JavaScript 数据类型 、JavaScript 变量、Javascript 运算符、JavaScript 数组、JavaScript 函数基础、DOM 基本操作、Window 对象、JavaScript 字符串函数、正则表达式
Vue.js是一款轻量级的JavaScript框架，它以其易用性、可维护性和组件化特性在前端开发中广受欢迎。而D3.js（Data-Driven Documents）是一个强大的数据可视化库，能够创建各种复杂的图表和图形，特别适合构建动态和...
以下是对JavaScript知识点的深入解析： 1. **基础语法**：JavaScript的基础包括变量（var、let、const）、数据类型（原始类型：number、string、boolean、null、undefined、symbol；引用类型：object、array、...
集齐javascript知识点，生动形象图片展示，全面javascript思维导图
本思维导图将深入探讨JS的基础知识点，帮助初学者构建全面的JavaScript知识体系。 1. 变量与数据类型： JavaScript有六种基本数据类型：Undefined、Null、Boolean、Number、String和Symbol（ES6新增），以及一种...
超详细JavaScript知识点梳理总结树，大纲清晰明确，涵盖所有JS基础知识点，范围广且详细，超适合前端小白基础入门，你值得拥有！
js实现知识图谱可视化，可移植性强，效果良好，我是用在了Django框架下，对于知识图谱查询结果的输出，也可以用在spring框架下。