当前位置: 代码迷 >> 综合 >> 10.js DOM API
  详细解决方案

10.js DOM API

热度:7   发布时间:2023-09-19 16:15:54.0

document.name(form的name).submit  提交form表单

DOM 是一棵树(tree)

树上有 Node

Node 分为 Document(html)、Element(元素)和 Text(文本),以及其他不重要的。

Node 的接口

  1. 属性

    childNodes,firstChild,innerText,lastChild,nextSibling,nodeName(svg是小写,其它大写),nodeType,nodeValue,outerText,ownerDocument,parentElement,parentNode,previousSibling,textContent

    妈的记不住。
    如果记不住就背下以下单词:

    • child / children / parent
    • node
    • first / last
    • next / previous
    • sibling / siblings
    • type
    • value / text / content
    • inner / outer
    • element
      然后互相组合
  2. 方法(如果一个属性是函数,那么这个属性就也叫做方法;换言之,方法是函数属性)

  • appendChild()
  • cloneNode()
  • contains()
  • hasChildNodes()
  • insertBefore()
  • isEqualNode()
  • isSameNode()
  • removeChild()
  • replaceChild()
  • normalize() // 常规化
  1. 搞清楚英文单词的意思就知道用法
  2. 如果发现知道英文后依然不明白用法,看 MDN 的例子即可,如 normalize

DOM APi 无外乎「增删改查」

Document 接口

属性

  • body
  • characterSet
  • childElementCount
  • children
  • doctype
  • documentElement
  • domain
  • fullscreen
  • head
  • hidden
  • images
  • links
  • location
  • onxxxxxxxxx
  • origin
  • plugins
  • readyState
  • referrer
  • scripts
  • scrollingElement
  • styleSheets
  • title
  • visibilityState

方法:

  • close()
  • createDocumentFragment()
  • createElement()
  • createTextNode()
  • execCommand()
  • exitFullscreen()
  • getElementById()
  • getElementsByClassName()
  • getElementsByName()
  • getElementsByTagName()
  • getSelection()
  • hasFocus()
  • open()
  • querySelector()
  • querySelectorAll()
  • registerElement()
  • write()
  • writeln()

Element 的接口

DOM API 反人类

  1. 获取元素

以前之后 document.getElementById, document.getElementsByTagName, document.getElementsByClassName
太反人类,于是有了 jQuery
后来 DOM API 终于抄袭 jQuery 提供了 document.querySelector 和 document.querySelectorAll
但是依然没有 jQuery 好用,因为「不一致」

  1. 获取下一个元素

  2. 获取兄弟们

  相关解决方案