zoukankan      html  css  js  c++  java
  • HTML DOM 和 XML DOM 的区别和联系

    上面的这篇博文讲了HTML、XML和Javascript之间的基本关系。而Javascript是利用DOM(包括HTML DOM和XML DOM)来操作HTML和XML中的内容。本篇博文则对这两种相似的DOM接口做一下分析。

    简单地总结一下 

    联系:
    HTML与XML共用了Core API(即DOM)。
    因此HTML DOM和XML DOM中所指的节点(node)、节点列表(nodeList)等所指的是同一对象。
     
     
     
    区别:
    只不过为了方便,HTML DOM的特性和方法并不是标准的DOM实现,而是专门针对HTML的同时也让一些DOM操作变得更加简便。
     
    HTML DOM基于元素的实现(Element-Based),而不是基于节点(Node-Based)的。
    比如在XML DOM中,元素节点的属性是一个以当前元素节点为父节点的属性节点(元素节点和属性节点可以利用节点的nodeType属性值区别,元素节点的nodeType值为1,属性节点的nodeType值为2)。
    而在HTML DOM中,元素节点的属性则就是属性,并不作为单独的节点来看待
     
    例如:获取某个元素节点的某个属性(比如 id)值
    XML DOM中: x = myelement.getAttribute(id)
    HTML DOM中: x = myelement.id
     
     
    上面说的是最主要的区别,下面来看几个比较特殊的区别:
    1. DOM搜索节点的方法 getElementsByTagName_r()getElementByID()
    前者即可以用于HTML DOM,也可以用于XML DOM;而后者只能用于HTML DOM。
     
    :一个细节,getElementsByTagName_r()方法中element是复数,而getElementByID()方法中的element则是单数。这是因为nodeName相同的节点可以有多个,而一个id(HTML中的节点属性)只能对应一个元素节点。
     
    2. 有两种特殊的节点属性来访问文档的根节点
    • document.documentElement
    • document.body
    前者即可以用于HTML DOM,也可以用于XML DOM;而后者只能用于HTML DOM。
    后者是对HTML页面的特殊扩展,提供了对<body>标签的直接访问。
     
     
     
    **************************************************************************************************
    最后说一下,讨论这个问题的本源。
    改变HTML的内容
    1. document.write()
    括号中的参数是要写入的字符串。根据自己实验的结果,我总结的经验是只能在<body>内部使用,且要将代码包含在<script type="text/javascript">...</script>中
    写入的内容对HTML其余部分没有影响,比如:
    <head>
    <body>
    <h1>this is a heading</h1>
    <script type="text/javascript">
    document.write("hello world")
    </script>
    </body>
    </head>
     
    这时候<script>标签内的操作相当于直接在页面中js代码的位置上增加了一句话
     
     
    2. innerHTML属性。几乎所有的HTML DOM中的元素都有该属性。它实际上是一个字符串,用来设置或获取位于对象起始和结束标签之间的HTML
    通常在<head>中的javascript代码中,和getElementById()方法结合使用。先使用getElementById()方法获得目标节点,然后使用innerHTML属性来获取或设置节点起始和结束标签之间的内容。
     
    例如:
    document.getElementByIdx_x_x('A1').innerHTML=xmlhttp.status;
    其中,A1是HTML中一个标签的id,该语句将该标签的内容设置为读取XML文件的状态。
     
     
     
    **************************************************************************************************
    最后讲一下DOM在不同浏览器中的差别
    所有现代浏览器都支持W3C DOM规范,但是它们之间是有差异的,主要表现在以下两点:
    • 加载XML的方式
    • 处理空白和换行的方法
    第一点之前已经讲过了,下面来看第二点。
     
    为了阅读方便,XML文件经常在节点之间含有换行或空格,下例:
    <book>
      <title>Harry Potter</title>
      <author>J K. Rowling</author>
      <year>2005</year>
      <price>29.99</price>
    </book>
    每行之间都有换行,每个子节点之间都有两个空格。
     
    Firefox及其他浏览器会把空格和换行作为文本节点来处理,而IE则会忽略这些换行和空格。
     
    比如,要是想得到第一个<book>元素的第一个子节点<title>的内容
     
    在IE中:
    txt = xmlDoc.documentElement.getElementsByTagName_r("book")[0].firstChild.firstChild.nodeValue;
     
    在Firefox等其他浏览器中
    x = xmlDoc.documentElement.getElementsByTagName_r("book")[0];
    y = x.firstChild;
    while(y.nodeType!=1) // 检查节点类型是否为1,即是否为元素节点
    {
      y=y.nextSibling; // 不是元素节点,则往后移一个同级节点
    }
    txt = y.firstChild.nodeValue;
     
  • 相关阅读:
    PCA算法---实验代码完整版(实验代码+数据集下载)
    ubuntu 系统 anaconda 虚拟环境下各种包的安装常用命令
    真实机下 ubuntu 18.04 安装GPU +CUDA+cuDNN 以及其版本选择(亲测非常实用)
    ubuntu 18.04/16.04/14.04 双硬盘分区方案
    如何制作 linux 系统 U盘启动盘
    pandas系列 read_excel() 和 to_excel()各参数详解
    pandas系列 read_csv 与 to_csv 方法各参数详解(全,中文版)
    pycharm 修改程序运行所需内存
    如何利用pandas 将excel文件与csv文件进行相互转化
    python读取文件时提示"UnicodeDecodeError: 'gbk' codec can't decode byte 0x80 in position 205: illegal multi
  • 原文地址:https://www.cnblogs.com/daban/p/2683082.html
Copyright © 2011-2022 走看看