Html DOM树的结构和访问
创始人
2024-07-15 03:10:14
0

你对Html DOM树的概念是否了解,这里和大家分享一下,DOM(DocumentObjectModel)解析器将XML文档一次性解析,生成一个位于内存中的对象树用以描述该文档。

Html DOM树

1.Html DOM树

所有类型的XML解析器都要求处理对象是“格式良好”的XML文档,有些还能根据DTD或XMLSchema进行有效性验证,DOM(DocumentObjectModel)解析器将XML文档一次性解析,生成一个位于内存中的对象树用以描述该文档。

DOM是一种与平台和语言无关的接口,它允许程序和脚本动态访问和修改文档的内容、结构和类型。它定义了一系列的对象和方法对Html DOM树的节点进行各种随机操作:

◆Document对象:作为树的最高节点,Document对象是对整个文档进行操作的入口。

◆Element和Attr对象:这些节点对象都是文档某一部分的映射,节点的定级层次恰好反映了文档的结构。

◆Text对象:作为Element和Attr对象的子节点,Text对象表达了元素或属性的文本内容。Text节点不再包含任何子节点。

◆集合索引:DOM提供了几种集合索引方式,可以对节点按指定方式进行遍历。索引参数都是从0开始记数的。

Html DOM树中的所有节点都是从Node对象继承而来的。Node对象定义了一些最基本的属性和方法,利用这些方法可以实现对树的遍历,同时,根据属性还可以得知节点的名称、取值并判断其类型。
利用DOM,开发人员可以动态地创建XML、遍历文档、增加/删除/修改文档内容。DOM提供的API与编程语言无关,所以对一些DOM标准中没有明确定义的接口,不同解析器的实现方法也可能有所差别。为方便描述,本文的举例均采用MSXMLDOM方案并用VBScript编写代码。

2.Html DOM树的结构

Document对象建立之后,就可以与XML文档或数据岛联系在一起。数据岛的加载方法是将数据岛ID赋给Document对象: 

  1.  
  2. Setdoc=dsoDetails.XMLDocument  
  3.  

加载文档大体上分为三步:

1.使用CreateObject方法创建分析器实例;

2.设置async属性为False,禁止异步加载,这样当文档加载完毕,控制权才会返回给调用进程,如果想获取文档加载状态,可以读取readyState属性值;

3.使用load方法加载指定文档。

  1. Setdoc=CreateObject(“Microsoft.XMLDOM”)  
  2. doc.async=False 
  3. doc.load“Books.xml”  

XMLDOM还提供了一种loadXML的方法可以把XML字符串加载到Html DOM树中,使用时只要把XML字符串直接作为该方法的参数即可。#p#

3.Html DOM树的访问

在文档加载完毕之后就可以使用documentElement属性访问根元素: 

  1. SetrootNode=doc.documentElement  
  2.  

一旦建立了对Html DOM树中某个节点(例如根节点)的引用,就可以根据节点间的等级关系调用适当的方法进行遍历。
下面以books.xml为例说明各种方法的使用:

  1.  
  2.  
  3. TheGourmetMicrowave 
  4. 9.95 
  5. CharlotteM.Cooper 
  6. ShelleyB.Burke 
  7. ReginaP.Murphy 
  8.  
  9. Sushi,Anyone? 
  10. 14.99 
  11. StraightTalkAboutComputers
  12. 19.99 
  13. LarsPeterson 
  14.  
  15.  

 建立对第二个元素的引用:

 

  1. SettheNode=dsoBooks.XMLDocument.  
  2. documentElement.childNodes(1) 

◆根节点:theNode.ownerDocument返回Document节点,指向XML文档本身;
◆兄弟节点:theNode.previousSibling返回第1个元素,theNode.nextSibling返回第3个元素;
◆父节点:theNode.parentNode返回元素;
◆子节点:theNode.firstChild返回元素,theNode.lastChild返回<price>元素,theNode.childNodes返回子节点集合,包括Sushi下面的所有元素。节点记数从0开始,即theNode.childNodes(0)的结果与theNode.firstChild的结果是一样的。</p> <p><strong>获得节点的引用后,就可以读取节点的相关信息:</strong></p> <p>◆节点类型:theNode.nodeType,本例为1,Document对象类型为9,元素类型为1,属性类型为2;<br /> ◆节点名称:theNode.nodeName,本例为book;<br /> ◆节点值:theNode.nodeValue,本例为null,对于Attr节点,返回的是属性值,而对于Element节点,返回的是null。</p> <p>在MSXML中,对Node对象还提供了一些额外的方法和属性:</p> <p>◆nodeTypeString:用字符串的方式显示节点类型,如theNode.nodeTypeString的结果是“element”;<br /> ◆text:显示当前节点及其所有子节点的文本内容;<br /> ◆xml:获取XML文档数据,通常是从根元素开始的所有内容。#p#</p> <p><strong>4.XML格式的动态转换</strong></p> <p>通过学习XSL,我们已经能够使用样式单对XML文档进行转换。但这种过程是静态的,即在编写代码时,已经指定了作用在XML上的XSL文件,在程序运行过程中不能再做改变。而利用DOM,我们能够实现XML格式的动态转换,即在程序运行时,将XSL载入并对XML文档进行转换。</p> <p>把XSL载入DOM对象的步骤基本上与XML文档的载入过程是一样的(XSL本身就是XML文档): </p> <pre><ol class="dp-xml"><li class="alt">Setstylesheet=CreateObject(“Microsoft.XMLDOM”)  </li><li>stylesheet.async=False </li><li class="alt">stylesheet.load“TransformDetails.xsl” </li></ol></pre> <p>DOM提供了两个函数进行这种转换,作用对象可以是树中任何节点。这样就可以实现对Html DOM树的任意的部分进行格式转换。<br /> ◆transformNodeToObject方法:该方法需要两个参数,第一个参数指向XSL文件,第二个参数存放转换后的XML数据的节点。例如: </p> <pre><ol class="dp-xml"><li class="alt">SettargetNode=CreateObject(“Microsoft.XMLDOM”)  </li><li>srcNode.transformNodeToObjectstylesheet,targetNode  </li><li class="alt"> </li></ol></pre> <p>◆transformNode方法:该方法只需要一个参数指明XSL文件。如下例是将源节点转换为一个字符串变量str:<br />  </p> <pre><ol class="dp-xml"><li class="alt">str=srcNode.transformNode(stylesheet)  </li><li> </li></ol></pre> <p>【编辑推荐】</p> <ol> <li><u><font color="#0000ff">JavaScript DOM特性与应用详解</font></u></li> <li>W3C DOM模型用法详解</li> <li>JavaScript获取HTML DOM节点元素详解</li> <li>深入了解JavaScript HTML DOM对象</li> <li>解析HTML DOM Checkbox对象的属性和方法</li> </ol> <!--end::Text--> </div> <!--end::Description--> <div class="mt-5"> <!--关键词搜索--> </div> <div class="mt-5"> <p class="fc-show-prev-next"> <strong>上一篇:</strong><a href="/chengxu/65477.html">jQuery的运行机制和设计理念</a><br> </p> <p class="fc-show-prev-next"> <strong>下一篇:</strong><a href="/chengxu/65479.html">家庭无线网络安全设置7大技巧</a> </p> </div> <!--begin::Block--> <div class="d-flex flex-stack mb-2 mt-10"> <!--begin::Title--> <h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3> <!--end::Title--> </div> <div class="separator separator-dashed mb-9"></div> <!--end::Block--> <div class="row g-10"> </div> </div> <!--end::Table widget 14--> </div> <!--end::Col--> <!--begin::Col--> <div class="col-xl-4 mt-0"> <!--begin::Chart Widget 35--> <div class="card card-flush h-md-100"> <!--begin::Header--> <div class="card-header pt-5 "> <!--begin::Title--> <h3 class="card-title align-items-start flex-column"> <!--begin::Statistics--> <div class="d-flex align-items-center mb-2"> <!--begin::Currency--> <span class="fs-5 fw-bold text-gray-800 ">热门资讯</span> <!--end::Currency--> </div> <!--end::Statistics--> </h3> <!--end::Title--> </div> <!--end::Header--> <!--begin::Body--> <div class="card-body pt-3"> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/241137.html" class="text-dark fw-bold text-hover-primary fs-6">如何允许远程连接到MySQL数...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">[[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/61017.html" class="text-dark fw-bold text-hover-primary fs-6">如何利用交换机和端口设置来管理...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/119031.html" class="text-dark fw-bold text-hover-primary fs-6">施耐德电气数据中心整体解决方案...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://files.pic99.top/shayuweb/202407/da6c51fc268b.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/82595.html" class="text-dark fw-bold text-hover-primary fs-6">Windows恶意软件20年“...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://files.pic99.top/shayuweb/202409/eb2e03366045d9f.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/139440.html" class="text-dark fw-bold text-hover-primary fs-6">20个非常棒的扁平设计免费资源</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/27164.html" class="text-dark fw-bold text-hover-primary fs-6">2009 IBM动态架构新动力...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/225.html" class="text-dark fw-bold text-hover-primary fs-6">通过 XML 进行内容发布</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/130901.html" class="text-dark fw-bold text-hover-primary fs-6">德国电信门户网站可实时显示全球...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://files.pic99.top/shayuweb/202403/3888b00968de30e.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/884.html" class="text-dark fw-bold text-hover-primary fs-6">着眼MAC地址,解救无法享受D...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://files.pic99.top/shayuweb/202503/5fe82cca6c5ff78.jpg')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/chengxu/246646.html" class="text-dark fw-bold text-hover-primary fs-6">为啥国人偏爱 Mybatis,...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...</span> </div> <!--end::Title--> </div> </div> <!--end::Body--> </div> <!--end::Chart Widget 35--> </div> <!--end::Col--> </div> </div> <!--end::Content container--> </div> <!--end::Content--> </div> <!--end::Content wrapper--> <!--begin::Footer--> <div id="kt_app_footer" class="app-footer"> <!--begin::Footer container--> <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3"> <!--begin::Copyright--> <div class="text-dark order-2 order-md-1"> <span class="text-muted fw-semibold me-1">2025 ©</span> <a href="/" target="_blank" class="text-gray-800 text-hover-primary">鲨鱼网</a> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-gray-800 text-hover-primary"></a> <a href="http://spbjmm.com.shayuweb.com">上品网</a><a href="http://www.zzszq.net/">深知网</a><a href="http://www.taiyangwa.net/">太阳生活网</a><a href="http://baike.taiyangwa.net/">太阳百科网</a><a href="http://ypkjmy.com.shayuweb.com/">一品科技</a><a href="http://www.yuansudz.com/news/">元素网</a><a href="http://www.xn--i6qw12a.com/">帛典网</a><a href="http://xldmm.com.shayuweb.com/">星链岛</a> </div> <!--end::Copyright--> <!--begin::Menu--> <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1"> <li class="menu-item"> <a href="/news/" target="_blank" class="menu-link px-2">科技资讯</a> </li> <li class="menu-item"> <a href="/chengxu/" target="_blank" class="menu-link px-2">程序开发</a> </li> <li class="menu-item"> <a href="/sitemap.xml" target="_blank" class="menu-link px-2">sitemap</a> </li> </ul> <!--end::Menu--> </div> <!--end::Footer container--> </div> <!--end::Footer--> </div> <!--end:::Main--> </div> <!--end::Wrapper--> </div> <!--end::Page--> </div> <!--end::App--> <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true"> <!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg--> <span class="svg-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect> <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path> </svg> </span> <!--end::Svg Icon--> </div> <!--begin::Javascript--> <script>var hostUrl = "/static/default/pc/";</script> <!--begin::Global Javascript Bundle(mandatory for all pages)--> <script src="/static/default/pc/plugins/global/plugins.bundle.js"></script> <script src="/static/default/pc/js/scripts.bundle.js"></script> <!--end::Global Javascript Bundle--> <!--end::Javascript--> </body> <!--end::Body--> </html>