zoukankan      html  css  js  c++  java
  • js DOM Element属性和方法整理----转载

    节点操作,属性

    1. childNodes、children

    这两个属性获取到的子节点会根据浏览器的不同而不同的,所以一定要判断下nodeType是否为1。

    childNodes获取到的是NodeList

    children获取到的是HTMLCollection

    NodeList and HTMLCollection

    他们都提供了name(Number index)方法用来索引元素,可以直接用[index]来引用;

    他们的区别在于NodeList没有提供namedItem(String name)方法

    HTMLCollect提供了这个方法,可以根据id或者name属性来获取集合的内部元素。

    但是不同的浏览器对这些方法的实现有区别,所以最好就直接用[index]来索引。

     

    2. firstChild lastChild firstElementChild lastElementChild

    firstChild和lastChild获取到的元素也要判断下nodeType才可以使用

    firstElementChild和lastElementChild可以直接获取到Element类型的节点,IE9+,ff,chrome,safari,opera支持

     

    3. nextSibling previousSibling nextElementSibling previousElementSibling

    同上

    4. parentNode

    可以是 Element、Document或DocumentFragment类型

     

    5. nodeType nodeName nodeValue tagName

    nodeType属性返回一个整数,根据节点类型的不同而有不同的值

    nodeTypeNamed ConstantnodeNamenodeValue
    1ELEMENT_NODE标签名null
    2ATTRIBUTE_NODE属性名属性值
    3TEXT_NODE#text节点文本
    4CDATA_SECTION_NODE#cdata-section节点文本
    5ENTITY_REFERENCE_NODE 实体引用名null
    6ENTITY_NODE实体名null
    7PROCESSING_INSTRUCTION_NODE -- --
    8COMMENT_NODE#comment注释文本
    9DOCUMENT_NODE#documentnull
    10DOCUMENT_TYPE_NODE doctype的内容null
    11DOCUMENT_FRAGMENT_NODE#document-fragmentnull
    12NOTATION_NODE null

     

    IE9+等浏览器有NODE.ELEMENT_NODE等定义

     

    对于Element节点来说,nodeName与tagName是一样的,返回全大写的标签名

    其他类型的节点有nodeName而没有tagName

     

    6. innerHTML outerHTML

     

    节点操作,方法

    1. insertBefore

    2. appendChild

    3. removeChild

    4. replaceChild

    5. insertAdjacentHTML

    6. hasChildNodes

    cloneNode

     

    选择器

    7. getElementById getElementsByName getElementsByTagName getElementsByClassName 

    querySelector querySelectorAll

    属性

    7. attributes

    8.  hasAttribute getAttribute setAttribute removeAttribute hasAttributes

    位置,尺寸

    clientHeight clientWidth clientLeft clientTop

    offsetHeight offsetWidth offsetLeft offsetTop

    offsetParent

    scrollHeight scrollWidth scrollLeft scrollTop

    getBoundingClientRect()

    getClientRects()

  • 相关阅读:
    win10 ubuntu 双系统启动顺序设置
    关于memset的使用
    POJ 2533 最小上升子序列
    Did Pong Lie? (差分系统 判负环)
    HDU 5828 Rikka with Sequence(线段树 开根号)
    SCU
    北邮校赛 I. Beautiful Array(DP)
    北邮校赛 H. Black-white Tree (猜的)
    北邮校赛 F. Gabriel's Pocket Money(树状数组)
    HDU 5862 Counting Intersections(离散化 + 树状数组)
  • 原文地址:https://www.cnblogs.com/demoworld/p/4983081.html
Copyright © 2011-2022 走看看