JAVASCRIPT中使用DOM操作XML文档

简介:          在 DOM 眼中, HTML 跟 XML 一样是一种树形结构的文档,  是根( root )节点,  、  、  是  的子( children )节点,互相之间是兄弟( sibling )节点;  下面才是子节点  、  、  等等。
< 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 .xml);
         for ( var  j = 0 ;j < a.attributes.length;j ++ )
          {
            alert(a.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 > 

    在 DOM 眼中, HTML 跟 XML 一样是一种树形结构的文档, <html> 是根( root )节点, <head> 、 <title > 、 <body> 是 <html> 的子( children )节点,互相之间是兄弟( sibling )节点; <body> 下面才是子节点 <table> 、 <span> 、 <p> 等等。如下图: 
 
    这个是不是跟 XML 的结构有点相似呢。不同的是, HTML 文档的树形主要包含表示元素、标记的节点和表示文本串的节点。 
 HTML 文档的节点 
DOM 下, HTML 文档各个节点被视为各种类型的 Node 对象。每个 Node 对象都有自己的属性和方法,利用这些属性和方法可以遍历整个文档树。由于 HTML 文档的复杂性, DOM 定义了 nodeType 来表示节点的类型。这里列出 Node 常用的几种节点类型: 

接口 
 nodeType 常量 
 nodeType 值 
 备注 
 
Element 
 Node.ELEMENT_NODE 
 1 
 元素节点 
 
Text 
 Node.TEXT_NODE 
 3 
 文本节点 
 
Document 
 Node.DOCUMENT_NODE 
 9 
 document 
 
Comment 
 Node.COMMENT_NODE 
 8 
 注释的文本 
 
DocumentFragment 
 Node.DOCUMENT_FRAGMENT_NODE 
 11 
 document 片断 
 
Attr 
 Node.ATTRIBUTE_NODE 
 2 
 节点属性 
 
DOM 树的根节点是个 Document 对象,该对象的 documentElement 属性引用表示文档根元素的 Element 对象(对于 HTML 文档,这个就是 <html> 标记)。 Javascript 操作 HTML 文档的时候, document 即指向整个文档, <body> 、 <table> 等节点类型即为 Element 。 Comment 类型的节点则是指文档的注释。具体节点类型的含义,请参考《 Javascript 权威指南》,在此不赘述。 
Document 定义的方法大多数是生产型方法,主要用于创建可以插入文档中的各种类型的节点。常用的 Document 方法有: 

方法 
 描述 
 
createAttribute() 
 用指定的名字创建新的 Attr 节点。 
 
createComment() 
 用指定的字符串创建新的 Comment 节点。 
 
createElement() 
 用指定的标记名创建新的 Element 节点。 
 
createTextNode() 
 用指定的文本创建新的 TextNode 节点。 
 
getElementById() 
 返回文档中具有指定 id 属性的 Element 节点。 
 
getElementsByTagName() 
 返回文档中具有指定标记名的所有 Element 节点。 
 
对于 Element 节点,可以通过调用 getAttribute() 、 setAttribute() 、 removeAttribute() 方法来查询、设置或者删除一个 Element 节点的性质,比如 <table> 标记的 border 属性。下面列出 Element 常用的属性: 

属性      描述 
tagName  元素的标记名称,比如 <p> 元素为 
 
目录
相关文章
|
22天前
|
XML 数据采集 存储
使用Java和XPath在XML文档中精准定位数据
在数据驱动的时代,从复杂结构中精确提取信息至关重要。XML被广泛用于数据存储与传输,而XPath则能高效地在这些文档中导航和提取数据。本文深入探讨如何使用Java和XPath精准定位XML文档中的数据,并通过小红书的实际案例进行分析。首先介绍了XML及其挑战,接着阐述了XPath的优势。然后,提出从大型XML文档中自动提取特定产品信息的需求,并通过代理IP技术、设置Cookie和User-Agent以及多线程技术来解决实际网络环境下的数据抓取问题。最后,提供了一个Java示例代码,演示如何集成这些技术以高效地从XML源中抓取数据。
使用Java和XPath在XML文档中精准定位数据
|
1天前
|
JavaScript 前端开发 UED
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
让 HTML 向 Vue.js 华丽转身:如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js
|
1月前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
12 1
js之DOM 文档对象模型
|
12天前
|
JavaScript 前端开发
JavaScript 与 DOM 交互
【9月更文挑战第01天】
14 2
|
18天前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
38 1
|
22天前
|
JSON JavaScript 前端开发
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
JS的无限可能: 前端 精妙DOM技巧至Node.js的服务端
|
1月前
|
XML JavaScript 前端开发
JavaScript中的DOM解析器DOMParser api的讲解
`DOMParser`能将XML或HTML源码字符串解析成DOM `Document`。通过`new DOMParser()`创建实例,使用`.parseFromString(string, type)`方法进行解析,其中`string`为待解析的字符串,`type`指定解析类型如`text/html`或`text/xml`等,返回一个`Document`对象。例如,可解析包含`&lt;p&gt;666&lt;/p&gt;`的字符串并获取其文本内容`666`。
71 1
|
29天前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
|
1月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
23 0
|
编解码 JavaScript 前端开发
盘点JavaScript中那些进阶操作知识(下篇)
盘点JavaScript中那些进阶操作知识(下篇)
173 0