DOM

文章
/
理解计算机 ... javascript
/ DOM
返回文章列表

DOM

理解计算机/web/javascript

get DOM object

CSS selector

  1. select for first matching element

    TEXT
    1
    document.querySelector('<CSS selector>')

  2. select for all matching element

    TEXT
    1
    document.querySelectorAll('<CSS selector>')

    there are pseudo array

    have length and index

    not have function such as push(),pop()

Other method

  1. select for matching ID

    TEXT
    1
    document.getElementById('<ID name>')

  2. select for all matching Tag

    TEXT
    1
    document.getElementByTagName('<element name>')

  3. select for all matching class

    TEXT
    1
    document.getElementClassName('<class name>')

access

  1. content

    • TEXT
      1
      <DOM>.innerText='<text>'

      only recognize text,do not parse tags

    • TEXT
      1
      <DOM>.innerHTML='<html>'

  2. attribute

    TEXT
    1
    <DOM>.<attribute> = '<value>'

  3. style

    multiple words named with small humps

    ​background-color​ use backgroundColor​

    TEXT
    1
    <DOM>.style.<style> ='<value>'

  4. class

    TEXT
    1
    <element>.className = '<class name>'

  5. classlist

    • add

      TEXT
      1
      <element>.classList.add('<class name>')

    • remove

      TEXT
      1
      <element>.classList.remove('<class name>')

    • swich

      TEXT
      1
      <element>.classList.toggle('<class name>')

    • find

      TEXT
      1
      <element>.classList.contains('<class name>')

‍

custom attribute

name

TEXT
1
data-<name>

dataset

TEXT
1
<DOM>.dataset.<name>