Dom解析Html文档中的元素

Dom解析Html文档中的元素

一、理论

Dom我们并不陌生,之前我写过一篇XML的解析方法,里面有一种解析方法叫Dom4j,其实Dom4j和Dom的区别就是版本高了点、功能更强了一点,其实本质是一样的,都是用来解析文档。DOM: DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。有一点很重要,DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言,

D:文档 – html 文档 或 xml 文档

O:对象 – document 对象的属性和方法

M:模型

DOM 是针对xml(html)的基于树的API。

DOM树:节点(node)的层次。

DOM 把一个文档表示为一棵家谱树(父,子,兄弟)

DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

DOM 规定:(1)整个文档是一个文档节点 (2)每个 HTML 标签是一个元素节点 (3)包含在 HTML 元素中的文本是文本节点 (4)每一个 HTML 属性是一个属性节点 (5)注释属于注释节点 

二、举例

举例说明dom的用法:

Code:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  2. <html>   
  3.   <head>   
  4.     <title>Dome04.html</title>   
  5.        
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">   
  7.     <meta http-equiv="description" content="this is my page">   
  8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
  9.        
  10.     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->   
  11.     <script type="text/javascript">   
  12.  window.onload = function(){     
  13. //获得html的标签   
  14.     var aa=document.documentElement;   
  15.     //获得html的名字,应该输出BOBY   
  16.     alert(aa.nodeName);   
  17.     //获得html的类型,应该输出的是1   
  18.     alert(aa.nodeType);   
  19.     //获得html的值,应该输出的是null   
  20.     alert(aa.nodeValue);   
  21.     //判断html是否有子节点,应该输出的是true   
  22.     alert(aa.hasChildNodes());   
  23.     //获得body标签   
  24.     var bb=document.body;   
  25.     //获得body的类型,应该是1   
  26.     alert(bb.nodeType);   
  27.     //获得h1的对象   
  28.     var h1=aa.lastChild;   
  29.     //输出h1中的名字,应该是h1   
  30.     alert(h1.nodeName);   
  31.     //输出h1中的值,应该是null,因为标签是元素节点  元素节点的nodeValue值是null   
  32.     alert(h1.nodeValue);   
  33.     //输出h1中的值, 通过innerText获取元素节点的内容===>去掉标签的内容,通过innerHtml获取元素节点的内容===>原样内容 是什么就是什么   
  34.     alert(h1.innerText)   
  35.        
  36.     //另一种方法输出h1的值      
  37.     var zhi = h1.lastNode;   
  38.     //输出zhi的值   
  39.     alert(zhi.nodeValue);      
  40.     }   
  41.     </script>   
  42.        
  43.   </head>   
  44.      
  45.   <body>   
  46.     <h1>你好!</h1>   
  47.   </body>   
  48. </html>   
  49.   
  50.       

 

你可能感兴趣的:(html,xml,function,null,文档,语言)