zoukankan      html  css  js  c++  java
  • DOM常用方法总结

      DOM(Document Object Model:文档对象模型)为javascript中的一部分,它为访问和修改html文档或xml文档提供了一些编程接口,DOM以对象的形式来描述文档中的内容,以树形结构来管理这些对象,并提供了一些方法来得到这些对象并对其进行修改。

      获取元素对象方法:

        1.document.getElementById() :返回对拥有指定 id 的第一个对象的引用。

        2.document.getElementsByName():返回带有指定 名称 的对象集合。

        3.document.getElementsByTagName():返回带有指定 标签名 的对象集合。

      上述三个方法是经常用到的获取Element 元素对象 的方法,DOM由节点组成,而所有节点都需要获取元素对象后用DOM提供的特定方法获取,因此这些方法是使用DOM进行编程的入口,在DOM中每个东西都是 节点:

    • 文档本身就是一个文档对象
    • 所有 HTML 元素都是元素节点
    • 所有 HTML 属性都是属性节点
    • 插入到 HTML 元素文本是文本节点
    • 注释是注释节点

      获得节点方法:

        1.element.getAttributeNode():获得该节点的属性节点。

        2.element.firstChild:获得该节点第一个子节点。

        3.element.lastChild:获得该节点的最后一个子节点。

        3.element.parentNode():获得该节点的父节点。

        4.element.childNodes():返回该节点的子节点数组(由于空格也会被当做文本节点被返回。所以该方法常用element.getElementsByTagName()代替)。

        5.element.nextSibling:返回该节点的下一个兄弟节点。
        6.element.previousSibling:返回该节点的上一个兄弟节点。

      节点常用属性:

        1.element.nodeName:其内容是给定节点的名字。
           如果是元素节点,nodeName返回这个元素的名称(标签名)。
           如果是属性节点,nodeName返回这个属性的名称(属性名)。
           如果是文本节点,nodeName返回一个内容为#text 的字符串。
        2.element.nodeType:返回一个整数,这个数值代表着给定节点的类型。
          Node.ELEMENT_NODE     ---1    -- 元素节点
          Node.ATTRIBUTE_NODE  ---2    -- 属性节点
          Node.TEXT_NODE             ---3    -- 文本节点
        3.element.nodeValue:返回给定节点的当前值(字符串)。
          如果给定节点是一个属性节点,返回值是这个属性的值。
          如果给定节点是一个文本节点,返回值是这个文本节点内容。  
          如果给定节点是一个元素节点,返回值是 null。
       操作节点常用方法:
        1.element.appendChild():在该节点所有子节点的最后加入一个子节点。
        2.element.insertBefore(new,old):在该节点的指定子节点前加入一个子节点。
        3.element.removeChild():删除该节点的指定子节点。
        4.element.replaceChild(new,old):替换该节点的指定子节点。
        5.element.cloneNode(boolean):复制指定节点并返回,参数为true时复制子节点,默认为false。
      innerHTML属性不是W3C推荐标准,但由于其操作的方便性,大多数主流浏览器都支持这个属性,通过此属性可以很方便的获取或写入元素的文本信息,可以调用该属性直接获得元素的文本内容,也可以通过赋值字符串的方式将指定的HTML文本写入调用该属性的元素。
  • 相关阅读:
    2014 Super Training #7 C Diablo III --背包问题(DP)
    2014 Super Training #7 E Calculate the Function --矩阵+线段树
    2014 Super Training #7 B Continuous Login --二分
    2014 Super Training #10 G Nostop --矩阵快速幂
    2014 Super Training #10 D 花生的序列 --DP
    2014 Super Training #10 C Shadow --SPFA/随便搞/DFS
    2014 Super Training #6 F Search in the Wiki --集合取交+暴力
    2014 Super Training #6 G Trim the Nails --状态压缩+BFS
    2014 Super Training #9 F A Simple Tree Problem --DFS+线段树
    2014 Super Training #8 G Grouping --Tarjan求强连通分量
  • 原文地址:https://www.cnblogs.com/RedHatPhenix/p/5506310.html
Copyright © 2011-2022 走看看