`

js处理节点

    博客分类:
  • html
阅读更多


注意大小写一定不能弄错.

属性:

1Attributes 存储节点的属性列表(只读)
2childNodes 存储节点的子节点列表(只读)
3dataType 返回此节点的数据类型
4Definition 以DTD或XML模式给出的节点的定义(只读)
5Doctype 指定文档类型节点(只读)
6documentElement 返回文档的根元素(可读写)
7firstChild 返回当前节点的第一个子节点(只读)
8Implementation 返回XMLDOMImplementation对象
9lastChild 返回当前节点最后一个子节点(只读)
10nextSibling 返回当前节点的下一个兄弟节点(只读)
11nodeName 返回节点的名字(只读)
12nodeType 返回节点的类型(只读)
13nodeTypedValue 存储节点值(可读写)
14nodeValue 返回节点的文本(可读写)
15ownerDocument 返回包含此节点的根文档(只读)
16parentNode 返回父节点(只读)
17Parsed 返回此节点及其子节点是否已经被解析(只读)
18Prefix 返回名称空间前缀(只读)
19preserveWhiteSpace 指定是否保留空白(可读写)
20previousSibling 返回此节点的前一个兄弟节点(只读)
21Text 返回此节点及其后代的文本内容(可读写)
22url 返回最近载入的XML文档的URL(只读)
23Xml 返回节点及其后代的XML表示(只读)

方法:

1appendChild 为当前节点添加一个新的子节点,放在最后的子节点后
2cloneNode 返回当前节点的拷贝
3createAttribute 创建新的属性
4createCDATASection 创建包括给定数据的CDATA段
5createComment 创建一个注释节点
6createDocumentFragment 创建DocumentFragment对象
7createElement 创建一个元素节点
8createEntityReference 创建EntityReference对象
9createNode 创建给定类型,名字和命名空间的节点
10createPorcessingInstruction 创建操作指令节点
11createTextNode 创建包括给定数据的文本节点
12getElementsByTagName 返回指定名字的元素集合
13hasChildNodes 返回当前节点是否有子节点
14insertBefore 在指定节点前插入子节点
15Load 导入指定位置的XML文档
16loadXML 导入指定字符串的XML文档
17removeChild 从子结点列表中删除指定的子节点
18replaceChild 从子节点列表中替换指定的子节点
19Save 把XML文件存到指定节点
20selectNodes 对节点进行指定的匹配,并返回匹配节点列表
21selectSingleNode 对节点进行指定的匹配,并返回第一个匹配节点
22transformNode 使用指定的样式表对节点及其后代进行转换
23transformNodeToObject 使用指定的样式表将节点及其后代转换为对象


*********************************


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>

分享到:
评论

相关推荐

    ARCGIS JS API 4.9 节点编辑

    ARCGIS JS API 4.9 是Esri公司提供的JavaScript版本的GIS开发接口,它允许开发者在网页上创建交互式的地图应用。这个API版本聚焦于地图的动态编辑和交互功能,其中“节点编辑”是一个重要的组成部分,尤其适用于地理...

    JS_操作节点.doc

    在"JS_操作节点.doc"中提到的是一些关键的节点属性和方法,它们构成了DOM操作的基础。 1. **Attributes**:这是一个只读属性,它存储了节点的所有属性,如HTML元素的`id`、`class`等。可以通过`element.attributes`...

    dtree不选中子节点处理

    在源码层面,我们需要找到处理节点选中逻辑的部分,这通常涉及到对`selected`属性的修改。当用户点击一个节点时,我们需要检查该节点是否应被选中,如果是父节点,我们可以检查一个配置选项(如`selectChildren`),...

    javascript为节点设置样式

    6. **批量处理节点:** 如果需要对多个节点进行相同的操作,可以使用`querySelectorAll`获取所有匹配的选择器的元素集合,然后遍历这个集合执行操作。例如,如果想改变所有类名为'item'的元素的背景色,可以这样做...

    d3.js插件 拓扑图 动态增加、删除节点

    d3.js是一个强大的JavaScript库,专为创建数据驱动的文档而设计,尤其擅长制作交互式和复杂的可视化图表。本篇文章将深入探讨如何利用d3.js插件构建动态拓扑图,并实现节点的动态增加与删除功能。 拓扑图是一种图形...

    js\vue版 工作流 节点 连线

    开发者可能会使用Vue的数据模型和生命周期钩子来处理节点的状态变化。 4. **连线(Connection)**:连线用于连接工作流中的节点,表示任务之间的流转路径。在Vue.js中,连线可能由自定义SVG图形或HTML元素实现,...

    百万节点javascript树

    综上所述,"百万节点javascript树"项目涉及到了JavaScript数据结构、内存管理、DOM操作优化、事件处理、算法应用、并行计算以及状态管理等多个方面,这些都是构建高性能大型应用的关键技术。通过学习和实践这些知识...

    JSTree(js写的树形菜单,支持加载10000节点以上)

    **JSTree:高效处理大数据量的JavaScript树形菜单组件** 在Web开发中,树形菜单是一种常见的数据展示形式,用于组织和展示层次结构的数据。JSTree是一款基于JavaScript的开源库,专为构建功能丰富的交互式树形菜单...

    javascript 拷贝节点cloneNode()使用介绍.docx

    - **JS深度拷贝Object/Array实例分析**:除了DOM节点外,JavaScript中还有许多其他类型的对象(如Object和Array),它们也可以进行深拷贝或浅拷贝。这些操作在处理复杂的数据结构时非常重要。 - **JavaScript数组深...

    时间线js 根据时间进度 显示节点位置

    在本案例中,“时间线js 根据时间进度 显示节点位置”表明我们正在处理一个JavaScript实现的时间线组件,它能够动态更新,以反映时间的流逝和进度变化,并且能够在时间线上定位各个关键节点。 首先,我们需要理解...

    纯js的树形菜单(添加删除节点)

    总的来说,实现"纯js的树形菜单(添加删除节点)"涉及到JavaScript基础、DOM操作、jQuery库的使用,以及事件处理等多方面技能。通过这样的练习,开发者可以提升对Web前端开发的理解,尤其是动态数据展示和交互设计的...

    解决XML节点删除后会留下一个空节点的问题

    问题的关键在于,许多XML解析器和库在处理节点删除时,可能不会立即从DOM(Document Object Model)树中物理地移除它们。DOM是一种将XML文档转换为内存中树形结构的模型,便于程序操作。删除节点时,如果只是简单地...

    asp.net treeview控件动态加载数据,选中父节点和子节点处理

    ### ASP.NET TreeView 控件动态加载数据与选中父节点及子节点处理 在ASP.NET Web应用程序中,TreeView 控件是一种非常有用的功能组件,它能够帮助开发者构建出类似目录结构或者层级关系的数据展示界面。本篇文章将...

    JavaScript节点知识

    JavaScript中的节点知识主要涉及到DOM(文档对象模型)和XMLHttpRequest对象的使用,这些是Web开发中的基础组件,用于处理和操作HTML、XML文档以及实现异步数据交换。 首先,DOMDocument对象是DOM中的核心,它代表...

    JS添加多个子节点方法综合案例.zip

    本综合案例通过"JS添加多个子节点方法综合案例.zip"中的四个文件——style.css(样式表)、我的足迹.html(HTML页面)、data.js(数据存储)、index.js(主要的JavaScript逻辑)展示了如何实现这一功能。下面将详细...

    详细讲解JS节点知识

    DOM节点主要分为几大类:元素节点(Element Node)、属性节点(Attribute Node)、文本节点(Text Node)、注释节点(Comment Node)以及处理指令节点(Processing Instruction Node)等。每个节点都有特定的属性和...

    JS做的树形菜单,自定义添加节点

    总之,"JS做的树形菜单,自定义添加节点"项目展示了JavaScript在创建动态、交互式用户界面方面的强大能力。通过理解DOM操作、事件处理、递归以及可能的CSS技巧,开发者可以创建出高效、可定制的树形菜单,满足各种...

    javascript获取节点

    `core.js`可能是自定义的核心功能脚本,可能包含了对原生JavaScript节点操作的封装或与jQuery配合使用的功能。 学习JavaScript获取节点和使用jQuery,不仅可以提高工作效率,还能帮助开发者编写出更兼容、更可维护...

    GoJs关系图谱动态添加节点图片头像等实例

    例如,你可以监听用户的某个操作(如点击按钮),然后在事件处理函数中创建新节点,将其添加到图谱,并将相应的数据添加到模型。 此外,如果需要修改已有节点(例如,更新头像或文本),你可以直接操作模型数据,...

    Js中节点的遍历和操作

    这展示了如何结合DOM操作与事件处理实现交互功能。 总之,JavaScript提供了一系列的方法来遍历和操作HTML文档中的节点,这使得我们可以动态地改变网页内容、响应用户交互和实现复杂的功能。了解并熟练运用这些方法...

Global site tag (gtag.js) - Google Analytics