• javascript高级程序设计---DOM


      DOM是文档对象模型的简称,DOM的基本思想是把结构化文档解析成一系列的节点,由这些节点组成数装的DOM树,所有的这些节点和最终的树状结构都有统一的对外接口,达到使用编程语言操作文档的目的,DOM可以理解为XML文档、SVG文档、HTML文档的编程接口API。DOM不属于javascript但是可以通过javascript操作DOM。

    节点的概念:

           DOM的最小组成单位叫节点(node),一个文档的树形结构(DOM树),就是由各种不同的类型的节点组成。

           对于HTML文档,节点主要有一下六种类型:

           Document节点:文档节点,指整个文档(window.document)。

           DocumentType:文档类型节点,指文档的类型,比如<!DOCTYPE html>

           Element:元素节点,HTML元素,比如<body>、<p>。

           Attribute:属性节点,HTML元素的属性,比如:class = “right”。

           Text:文本节点,HTML文档中出现的文本。

           DocumentFragment:文档碎片节点,文档的片段。

      Node接口在javascript中是作为Node类型来实现的,除了IE所有浏览器都可以访问到这个类型,javascript中所有的节点类型都是继承自node类型,因此所有的节点类型都共享这相同的基本属性和方法。

    节点的属性:

    nodeType属性:返回节点的常数值  

    类型                               nodeName                     nodeType
    DOCUMENT_NODE                                       #document                               9
    ELEMENT_NODE                                          大写的HTML元素名                       1
    ATTRIBUTE_NODE                                       等同于Attr.name                         2
    TEXT_NODE                                                #text                                        3
    DOCUMENT_FRAGMENT_NODE                      #document-fragment                 11
    DOCUMENT_TYPE_NODE                               等同于DocumentType.name         10

      

    下列属性返回当前节点的相关节点

      ownerDocument

      返回当前节点所在的文档对象,即document对象

    var  doc = nod.ownerDoctype;
    doc === document              //true
    

      nextSibling

      返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点,则返回null,注意,该属性包括文本节点,节点后有空格,返回文本节点,内容为空格。

      previoussibling
      返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点,则返回null。同样,前面有空格,返回一个内容为空的文本节点。

      parentNode
      返回当前节点的父节点。对于一个节点来说,它的父节点只可能是三种类型:element节点、document节点和documentfragment节点。

      parentElement
      返回当前节点的父Element节点。如果当前节点没有父节点,或者父节点类型不是Element节点,则返回null。


    下列属性返回当前内容
      textContent
      属性返回当前节点和它的所有后代节点的文本内容。

    //<div id="divA">This is <span>some</span> text</div>
    
    document.getElementById("divA").textContent           This is some text
    

      该属性可读写,可自动对HTML标签转义。

    document.getElementById('foo').textContent = '<p>GoodBye!</p>'

      自动解释为文本<p>而不会当作标签处理,对于Text节点和Comment节点,该属性的值与nodeValue属性相同

      nodeValue
      返回或设置当前节点的值,格式为字符串。但是,该属性只对Text节点、Comment节点、XML文档的CDATA节点有效,其他类型的节点一律返回null。

    下列返回当前节点的子节点
      childNodes
      返回一个NodeList集合,成员包括当前节点的所有子节点。除了HTML元素节点,该属性返回的还包括Text节点和Comment节点。

      如果当前节点不包括任何子节点,则返回一个空的NodeList集合。由于NodeList对象是一个动态集合,一旦子节点发生变化,立刻会反映在返回结果之中。

    var ulElementChildNodes = document.querySelector('ul').childNodes;

      firstNode
      返回当前节点的第一个子节点,如果当前节点没有子节点,则返回null。注意,除了HTML元素子节点,该属性还包括文本节点和评论节点。

      lastChild
      返回当前节点的最后一个子节点,如果当前节点没有子节点,则返回null。
      baseURI
      返回一个字符串,由当前网页的协议、域名和所在的目录组成,表示当前网页的绝对路径。如果无法取到这个值,则返回null。

      该属性不仅document对象有(document.baseURI),元素节点也有(element.baseURI)。通常情况下,它们的值是相同的。

    Node节点的方法

      appendChild()
      接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点。如果参数节点是文档中现有的其他节点,appendChild方法会将其从原来的位置,移动到新位置。

    var p = document.createElement("p");
    document.body.appendChild(p);

      hasChildNodes
      方法返回一个布尔值,表示当前节点是否有子节点。
      方法与节点操作有关

      cloneNode()
      cloneNode方法用于克隆一个节点。它接受一个布尔值作为参数,表示是否同时克隆子节点,默认是false,即不克隆子节点。

      insertBefore
      方法用于将某个节点插入当前节点的指定位置。它接受两个参数,第一个参数是所要插入的节点,第二个参数是当前节点的一个子节点,新的节点将插在这个节点的前面。

      该方法返回被插入的新节点。如果insertBefore方法的第二个参数为null,则新节点将插在当前节点的最后位置,即变成最后一个子节点。

      removeChild
      接受一个子节点作为参数,用于从当前节点移除该节点。它返回被移除的节点。

      replaceChild
      用于将一个新的节点,替换当前节点的某一个子节点。它接受两个参数,第一个参数是用来替换的新节点,第二个参数将要被替换走的子节点。它返回被替换走的那个节点。


    下面方法用于节点的互相比较。
      contains
      接受一个节点作为参数,返回一个布尔值,表示参数节点是否为当前节点的后代节点。

      compareDocumentPosition
      与contains方法完全一致,返回一个7个比特位的二进制值,表示参数节点与当前节点的关系。

    二进制值 数值 含义
    000000 0 两个节点相同
    000001 1 两个节点不在同一个文档(即有一个节点不在当前文档)
    000010 2 参数节点在当前节点的前面
    000100 4 参数节点在当前节点的后面
    001000 8 参数节点包含当前节点
    010000 16 当前节点包含参数节点
    100000 32 浏览器的私有用途

      可以使用比特位运算符检查结果

      isEqualNode
      返回一个布尔值,用于检查两个节点是否相等。所谓相等的节点,指的是两个节点的类型相同、属性相同、子节点相同。

      normailize
      用于清理当前节点内部的所有Text节点。它会去除空的文本节点,并且将毗邻的文本节点合并成一个。

  • 相关阅读:
    css sprite的实现
    python的range()函数使用方法
    Codeforces Round #260 (Div. 1) 455 A. Boredom (DP)
    n个整数全排列的递归实现(C++)
    AngularJS进阶(三十一)AngularJS项目开发技巧之获取模态对话框中的组件ID
    Swift扩展(Extension)
    leetcode 88 Merge Sorted Array
    Unity3D摄像机尾随人物
    mybatis 高级映射和spring整合之与Spring整合(6)
    mybatis 高级映射和spring整合之查询缓存(5)
  • 原文地址:https://www.cnblogs.com/yangxunwu1992/p/4802342.html
Copyright © 2020-2023  润新知