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


Posted in Javascript onOctober 30, 2015

节点对象属性

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比较常用的对象属性集锦的全部叙述就到此结束了,更多内容请登陆三水点靠木官网了解更多,谢谢。

Javascript 相关文章推荐
JavaScript 编程引入命名空间的方法
Jun 29 Javascript
javascript getElementsByTagName
Jan 31 Javascript
js对象的比较
Feb 26 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 #Javascript
jQuery+Ajax实现无刷新分页
Oct 30 #Javascript
JavaScript中的定时器之Item23的合理使用
Oct 30 #Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 #Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 #Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 #Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 #Javascript
You might like
虫族 Zerg 历史背景
2020/03/14 星际争霸
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
理解AngularJs指令
2015/12/10 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
21行Python代码实现拼写检查器
2016/01/25 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
土木工程专业推荐信
2014/02/19 职场文书
三年级评语大全
2014/04/23 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
给客户的感谢信
2015/01/21 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
贷款收入证明范本
2015/06/12 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js