JavaScript操作XML/HTML比较常用的对象属性集锦

节点对象属性

childNodes—返回节点到子节点的节点列表

firstChild—返回节点的首个子节点。
lastChild—返回节点的最后一个子节点。

nextSibling—返回节点之后紧跟的同级节点。

nodeName—返回节点的名字,根据其类型。
nodeType—返回节点的类型。
nodeValue—设置或返回节点的值,根据其类型。

ownerDocument—返回节点的根元素(document对象)。

parentNode—返回节点的父节点。

previousSibling—返回节点之前紧跟的同级节点。

text—返回节点及其后代的文本(IE独有)。

xml—返回节点及其后代的XML(IE独有)。

节点对象的方法

appendChild()—向节点的子节点列表的结尾添加新的子节点。

cloneNode()—复制节点。

hasChildNodes()—判断当前节点是否拥有子节点。

insertBefore()—在指定的子节点前插入新的子节点。

normalize()—合并相邻的Text节点并删除空的Text节点。

removeChild()—删除(并返回)当前节点的指定子节点。

replaceChild()—用新节点替换一个子节点。

IE6独有

selectNodes()—用一个XPath表达式查询选择节点。

selectSingleNode()—查找和XPath查询匹配的一个节点。

transformNode()—使用XSLT把一个节点转换为一个字符串。

transformNodeToObject()—使用XSLT把一个节点转换成为一个文档。

NodeList对象

length –返回节点列表中的节点数目。

item()—返回节点列表中处于指定的索引号的节点。

例如:

Javascript代码

xmlDoc = loadXMLDoc(“books.xml”);
var x = xmlDoc.getElementsByTagName(“title”);
document.write(“title element:” + x.length); 

输出:title element:4

Javascript代码

var y = xmlDoc.documentElement.childNodes;
document.write(y.item(0).nodeName); 

输出:book

NamedNodeMap对象

length—返回列表中节点数目。

getNamedItem()—返回指定的节点。(通过名称)

item()—返回处于指定索引号的节点。

removeNamedItem()—删除指定的节点(根据名称)。

例如:

Javascript代码

xmlDoc = loadXMLDoc(“books.xml”);
var x = xmlDoc.getElementsByTagName(“book”);
document.write(x.item(0).attributes.length); 

输出:1

Javascript代码

document.write(x.item(0).attributes.getNamedItem(“category”); 

输出:COOKING

Javascript代码

x.item(0).attributes.removeNamedItem(“category”); 

删除第一个book元素的category属性

Document对象代表整个XML文档。

Document对象的属性。

async—规定XML文件的下载是否应当被同步处理。

childNodes—返回属于文档的子节点的节点列表。

doctype—返回与文档相关的文档类型声明。

documentElement—返回文档的子节点。

firstChild—返回文档的首个子节点。

implementation—返回处理该文档的DOMImplementation对象。(IE没有)

lastChild—返回文档的最后一个子节点。

nodeType—返回节点类型。

nodeName—依据节点的类型返回其名称。

nodeValue—依据节点的类型返回其值。

text—返回节点及其后代的文本(IE独有)。

xml—返回节点及其后代的XML(IE独有)。

Document对象的方法

createAttribute(att_name)—创建拥有指定名称的属性节点,并返回新的属性对象。
createCDATASection(data)—创建CDATA区段节点。
createComment(data)—创建注释节点。
createDocumentFragment—创建空的DocumentFragment对象,并返回此对象。
createElement(node_name)—创建元素节点。
createEntityReference(name)—创建EntityReference对象,并返回此对象。(IE独有)
createTextNode(data)—创建文本节点。
getElementById(elementid)—查找具有指定的唯一ID的元素。
getElementsByTagName(node_name)—返回所有具有指定名称的元素节点。

例如:

Javascript代码

var xmlDoc = loadXMLDoc("book.xml");
xmlDoc.async = false;
var book = xmlDoc.getElementsByTagName("book");
var newtext1="Special Offer & Book Sale";
var newCDATA=xmlDoc.createCDATASection(newtext1);
book[0].appendChild(newCDATA);
var newtext2="Revised September 2006";
var newComment=xmlDoc.createComment(newtext2);
book[0].appendChild(newComment);
var var newel=xmlDoc.createElement('edition');
var newtext3=xmlDoc.createTextNode('First');
newel.appendChild(newtext3);
book[0].appendChild(newel);
document.write("<xmp>" + xmlDoc.xml + "</xmp>"); 

Element 对象的属性
attributes—返回元素的属性的NamedNodeMap
childNodes—返回元素的子节点的NodeList
firstChild—返回元素的首个子节点。
lastChild—返回元素的最后一个子节点。
nextSibling—返回元素之后紧跟的节点。
nodeName—返回节点的名称。
nodeType—返回元素的类型。
ownerDocument—返回元素所属的根元素(document对象)。
parentNode—返回元素的父节点。
previousSibling—返回元素之前紧跟的节点。
tagName—返回元素的名称。
text—返回节点及其后代的文本。(IE-only)
xml—返回节点及其后代得XML。(IE-only)

Element对象的方法

appendChild(node)—向节点的子节点列表末尾添加新的子节点。
cloneNode(true)—克隆节点。
getAttribute(att_name)—返回属性的值。
getAttributeNode(att_name)—以 Attribute 对象返回属性节点。
getElementsByTagName(node_name)—找到具有指定标签名的子孙元素。
hasAttribute(att_name)—返回元素是否拥有指定的属性。
hasAttributes()—返回元素是否拥有属性。
hasChildNodes()—返回元素是否拥有子节点。
insertBefore(new_node,existing_node)—在已有的子节点之前插入一新的子节点。
removeAttribute(att_name)—删除指定的属性。
removeAttributeNode(att_node)—删除指定的属性节点。
removeChild(node)—删除子节点。
replaceChild(new_node,old_node)—替换子节点。
setAttribute(name,value)—添加新的属性或者改变属性的值。
setAttribute(att_node)—添加新的属性。

Javascript代码

x=xmlDoc.getElementsByTagName('book');
for(i=0;i<x.length;i++)
{
attnode=x.item(i).getAttributeNode("category");
document.write(attnode.name);
document.write(" = ");
document.write(attnode.value);
document.write("<br />");
}
for(i=0;i<x.length;i++){
document.write(x[i].getAttribute('category'));
document.write("<br />");
}
xmlDoc=loadXMLDoc("/example/xdom/books.xml");
x=xmlDoc.getElementsByTagName('book');
document.write(x[0].getAttribute('category'));
document.write("<br />");
x[0].removeAttribute('category');
document.write(x[0].getAttribute('category'));
var attnode = x[1].getAttributeNode("category");
var y = x[1].removeAttributeNode(attnode);
document.write("<xmp>" + xmlDoc.xml + "</xmp>");
function get_lastchild(n)
{
 x = n.lastChild;
 while(x.noteType!=1){
  x = x.previousSibling;
 }
 return x;
}
function get_firstChild(n){
 x = n.firstChild;
 whild(x.nodeType!=1){
 x=x.nextSibling;
 }
 return x;
}
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("book")[0];
deleted_node=x.removeChild(get_lastchild(x));
document.write("Node removed: " + deleted_node.nodeName); 

Attr对象

Attr 对象表示 Element 对象的属性。

name—返回属性的名称。

nodeName—返回节点的名称,依据其类型

nodeType—返回节点的类型。

nodeValue—设置或返回节点的值,依据其类型

ownerDocument—返回属性所属的根元素(document对象)。

specified—如果属性值被设置在文档中,则返回 true,如果其默认值被设置在 DTD/Schema 中,则返回 false。

value—设置或返回属性的值。

text—返回属性的文本。IE-only。

xml—返回属性的 XML。IE-only。

Text对象的属性

data—设置或返回元素或属性的文本。

length—返回元素或属性的文本长度。

Text对象的方法

appendData(string)—向节点追加数据。

deleteData(start,length)—从节点删除数据。

insertData(start,string)— 向节点中插入数据。

replaceData(start,length,string)—替换节点中的数据。

replaceData(offset)— 把一个 Text 节点分割成两个。

substringData(start,length)— 从节点提取数据。

关于JavaScript操作XML/HTML比较常用的对象属性集锦的全部叙述就到此结束了,更多内容请登陆我们官网了解更多,谢谢。

(0)

相关推荐

  • Javascript 读取操作Sql中的Xml字段

    在一个项目当中,我们需要把数据库中的Xml字段中的信息表现在页面中,如果用Sql进行操作,读取.这样的话,必然导致太复杂,于是我想到了,如果把Xml字段先读出来,然后用Js去操作,这样岂不是简单了许多,于是网上查找了一些资料.实现了JS读Xml字段信息的方法. 首先我们在页面中放一个TextBox 用来放Xml字段.切记:不可用Label,因为万一Xml字段信息中有""这种符号时,页面会产生Js错误. 接下去,就是重点了.付JS代码: function createXml(str){

  • js操作XML文件的实现方法兼容IE与FireFox

    最近项目中用到了xml,需求是用户安装产品时先把一系列的数据保存到xml文件中,当执行到最后一步时才写入数据库,这样最大限度的减少了数据库的访问,于是不得不纠结在各浏览器的兼容性的问题(悲哀啊....) 进入正文 下面是一个xml文件 (createInstal.xml) <?xml version="1.0" encoding="utf-8"?> <info> <Item> <id descrption="级别&

  • JavaScript操作XML文件之XML读取方法

    本文实例讲述了JavaScript操作XML文件之XML读取方法.分享给大家供大家参考.具体分析如下: 假设我们现在要读取下面的 info.xml 文件 <?xml version="1.0" encoding="gb2312"?> <root> <data id="1"> <name>ceun</name> <age>21</age> </data>

  • JS操作XML实例总结(加载与解析XML文件、字符串)

    本文实例讲述了JS操作XML的方法.分享给大家供大家参考,具体如下: 我的xml文件Login.xml如下. <?xml version="1.0" encoding="utf-8" ?> <Login> <Character> <C Text="热血" Value="0"></C> <C Text="弱气" Value="1&qu

  • JSP针对XML文件操作技巧实例分析

    本文实例讲述了JSP针对XML文件操作技巧.分享给大家供大家参考,具体如下: XML(Extensible Markup   Language)可扩展标记语言,这个基础知识在早些已经学习过.而这篇教程为什么把它放在J2EE下边呢,因为他也是J2EE的13规范之一,虽然XML是W3C万维网组织联盟指定的,并做了规范,所以说也是一种规范,我们也必须按照规范来,和JDBC,Servlet,Jsp,Ejb等一样的. 前边的文章已经介绍了XML的一些基础知识,主要是用来存储,传输数据的,但是这些数据我们怎

  • JavaScript操作XML/HTML比较常用的对象属性集锦

    节点对象属性 childNodes-返回节点到子节点的节点列表 firstChild-返回节点的首个子节点. lastChild-返回节点的最后一个子节点. nextSibling-返回节点之后紧跟的同级节点. nodeName-返回节点的名字,根据其类型. nodeType-返回节点的类型. nodeValue-设置或返回节点的值,根据其类型. ownerDocument-返回节点的根元素(document对象). parentNode-返回节点的父节点. previousSibling-返回

  • JavaScript操作XML 使用百度RSS作为新闻源示例

    js操作xml源,作为页面的动态新闻 参考JS源码如下(存为rss.js文件): 复制代码 代码如下: var main = document.getElementById("content").getElementsByTagName("DIV"); /* * 当前目录下面有一个名为xml的子文件夹,下面引用的源保存在目录下. * 下面每一行的冒号前面是文件名,后面是xml源地址(可以从源址下载得到xml文件,下载后保存为对应文件名) * 可以在下面的地址上单击右

  • javascript操作xml(增删改查)例子代码hta版

    包括了stu.hta(是HTML应用程序);      stu.xml 注意下面的HTML代码必须保存为后缀名为hta否则当对XML文件进行操作(增删改)的时候就会提示没有权限!! 文件stu.hta代码如下: 复制代码 代码如下: <html> <head> <title> 数据岛的显示 </title> <style type="text/css"> #findPanel { position:absolute; widt

  • JavaScript操作XML实例代码(获取新闻标题并分页,并分页)

    具体内容我没有做测试.仅供参考 代码 复制代码 代码如下: <?xml version="1.0" encoding="gb2312"?> <NEWS> <New id="1" name="测试新闻1" time="2010-2-18"> <NBody>新闻测试1新闻测试1</NBody> </New> <New id="

  • 用javascript操作xml

    文中尽量用上所有的操作和属性,以做示范 复制代码 代码如下: <script language="JavaScript">  <!--  var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM") //加载文档  //doc.load("b.xml"); //创建文件头  var p 

  • javascript 操作cookies及正确使用cookies的属性

    一.从写 cookie 说起. var the_date = new Date("December 31, 2020"); var expiresDate = the_date.toGMTString(); document.cookie = "userDefineCSS=" + escape(title) + "; expires=" + expiresDate; 第一句是日期对象: 第二句将日期格式转换成 GMT 格式:编者者: GMT 即格

  • 基于JavaScript操作DOM常用的API小结

    前言 DOM(Document Object Model)即文档对象模型,针对 HTML 和 XML 文档的 API(应用程序接口).DOM 描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM 脱胎于 Netscape 及微软公司创始的 DHTML(动态 HTML),但现在它已经成为表现和操作页面标记的真正跨平台.语言中立的方式. 阅读目录 基本概念 节点创建型api 页面修改型API 节点查询型API 节点关系型api 元素属性型api 元素样式型api 总结 文本整

  • JS操作XML中DTD介绍及使用方法分析

    本文实例讲述了JS操作XML中DTD介绍及使用方法.分享给大家供大家参考,具体如下: 什么是DTD,为什么需要DTD? DTD为英文Document Type Definition,中文意思为"文档类型定义".DTD肩负着两重任务:一方面它帮助你编写合法的代码,另一方面它让浏览器正确地显示器代码. 一个HTML文档的基本结构可分为两个主要部分: <html> <head> 头部信息 </head> <body> 可视内容 </bod

  • 解决vue数组中对象属性变化页面不渲染问题

    做checkbox多选功能的时候遇到了一个坑,逻辑怎么看都对,但是就是有bug,最后发现数组那里值变了页面勾选没有重新渲染. 换了关键词搜索找到了相关方法. 其实之前读文档教程的时候看到过这里,但是只有真的使用之后才会有最直接的感触. 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 你打开控制台,然后用前面例子的 items 数

随机推荐