zoukankan      html  css  js  c++  java
  • JavaScritpt的DOM初探之Node(一)

    DOM(文档对象模型)是针对HTML和XML文档的一个API。

    DOM描绘了一个层次化的节点树。同意开发者加入,移除和改动页面的某一部分。DOM脱胎于微软公司的DHTLM(动态HTML),可是如今它已经成为表现和操作页面标记的真正跨平台,语言中立的方式。

    JavaScript和DOM通常被视为一个单一的实体,由于JavaScript是最常见的用于此目的(与web上的内容交互)。 使用DOM API訪问、遍历和操作HTML和XML文档。

    典型的DOM的基本轮廓层次结构(简化)

    这里有一个关于DOM的一些值得注意的事情:

    • 窗体对象作为全局对象,您仅仅需键入“窗体”訪问它。

      在这个对象的全部运行JavaScript代码。 像全部对象的属性和方法。

      • 属性是一个变量存储在一个对象。

        网页上创建的全部变量authomatically成为窗体对象的属性。

      • 一个方法是存储在一个对象的函数。 以来全部的功能都存储在窗体对象(至少)下他们都能够称为“方法”。
    • DOM创建一个hierarcy相应于每一个web文档的结构。

      这样的层次结构是由节点。 有几种不同类型的DOM节点,最重要的是“元素”,“文本”和“文档”。

      • 一个“元素”节点表示一个元素在一个页面。 假设你有一个段落元素(“< p >”),那么它能够通过訪问DOM节点。
      • “文本”节点表示一个页面内全部文本(元素)。

        所以假设你的段落的文本能够直接通过DOM訪问。

      • 文档的节点代表整个文档。

        (这是DOM层次/树的根节点)。

      • 还要注意,元素属性是DOM节点本身。
    • 每一个布局引擎实现DOM标准略有不同。 比如,火狐使用web浏览器壁虎布局引擎,有一个非常好的实现(尽管不是全然内联与W3C规范)Internet Explorer,它使用三叉戟布局引擎闻名车和不完整的实现,导致web开发社区内的多痛苦!
    Node类型:

    dom1级定义了一个NODE接口。该接口将由DOM中的全部节点类型实现。这个Node接口在javaScript中是作为node类型实现的,除了IE之外。在其它全部浏览器中都能够訪问到这个类型。javaScript中的全部节点都继承自NODE类型,因此全部节点类型都共享着同样的基本属性和方法。

    每一个节点都有一个nodeType属性。用于表明节点的类型。节点类型由在node类型中定义的下列12个数值常量来表示,不论什么节点类型必居其一:

    Node.ELEMENT_NODE(1);
    Node.ATTRIBUTE_NODE(2);
    Node.TEXT_NODE(3);
    Node.CDATA_SECTION_NODE(4);
    Node.CDATA_REFERENCE_NODE(5);
    Node.ENTITY_NODE(6);
    Node.PROCESSING_INSTRUCTION_NODE(7);
    Node.COMMENT_NODE(8);
    Node.DOCUMENT_NODE(9);
    NODE.DOCUMENT_TYPE_NODE(10);
    Node.DOCUMENT_FRAGMENT_NODE(11);
    Node.NOTATION_NODE(12)

    通过比較上面这些常量。能够非常easy地确定节点的类型,比如:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=gbk">
    <title>test for javascript</title>
    </head>
    <body>
    <p id="a">漫步人生路!</p>
    <p>
    <script type="text/javascript">
      var someNode=document.getElementById('a');
    	alert(someNode.nodeType);
    </script>
    </body>
    </html>

    要了解Node节点的信息能够使用nodeName和nodeValue这两个属性:

    <script type="text/javascript">
      var someNode=document.getElementById('a');
    	alert(someNode.nodeType);
    	alert(someNode.nodeName); //是元素的标签名 <p>
    	alert(someNode.nodeValue); //要坚持node是不是一个元素仅仅要看nodeValue的值为null就能够了
    </script>


  • 相关阅读:
    ASCII码表
    DropDownListSelectedByValue();替代SelectedValue=string
    得到str1在str2中出现的次数 GetCountInStr(string str1,string str2)
    Framework 1.1 和 2.0(Bate)兼容性(2)
    服务没有及时响应启动或控制请求
    LoadControl加载控件要注意的两点
    ADO.Net Entity Framework之EDM应注意
    扩展CheckBoxFieldPro
    对Url的QueryString操作的两个函数
    MS SQL的日志
  • 原文地址:https://www.cnblogs.com/wzzkaifa/p/7225212.html
Copyright © 2011-2022 走看看