跳到主要内容

DOM操作

概念​

DOM（文档对象模型），用一个逻辑树表示一个HTML文档，树上的每一个分支代表一个节点，DOM api就是用来操作这些节点的接口

获取元素​

  • document.getElementById()
  • document.getElementsByTagName()
  • document.getElementsByClassName()
  • document.getElementsByName()
  • document.querySelector()
  • document.querySelectorAll()
  • document.getSelection(): 返回一个Selection对象，表示用户选择的文本范围或光标的当前位置

获取元素大小、位置​

  • $el.getBoundingClientRect(): 元素的大小，以及相对视图窗口的位置

元素属性​

  • $el.hasClass('类名')
  • $el.className: class属性值
  • $el.classList: 所有类名数组
    • $el.classList.contains('类名'): 是否包含类名
  • $el.getAttribute('属性名')

插入元素​

  • $el.append($child): $el末尾添加$child，可传入多个节点或字符串
  • $el.appendChild($child): $el末尾添加$child，只能传入一个节点
  • $el.prepend($child): $el第一个子节点前添加$child
  • 其他：
    • node.insertBefore()

插入文本​

删除元素​

  • $el.removeChild($child): 使用$child.parentNode.removeChild($child)

修改元素​

  • $el.innerHTML = '';
  • $el.classList: 所有类名数组
    • $el.classList.add('类名')
    • $el.classList.remove('类名')
  • $el.style.width = '100px';
  • $el.style.cssText = 'width: 100px; height: 100px; position: absolute'

是否聚焦​

hasFocus()