js DOM的基本操作

1. 根据id名称获取
   • document.getElementById('')
2. 根据类名获取
   • document.getElementsByClassName('')
3. 根据标签名获取
   • document.getElementsByTagName('')
4. 根据选择器获取满足的第一个
   • document.querySelector('')
5. 根据选择器获取一组
   • document.querySelectorAll('')
6. 操作元素内容
   • 操作元素文本内容
     • 获取 : 元素.innerText
     • 设置 : 元素.innerText='新内容'
   • 操作元素超文本内容
     • 获取 : 元素.innerHTMl
     • 设置 : 元素.innerHTML = '超文本新内容'
7. 操作元素属性
   • 原生属性
     • 获取 : 元素.属性名
     • 设置 : 元素.属性名 = '属性值'
   • 自定义属性
     • 获取 : 元素.getAttribute('属性名')
     • 设置 : 元素.setAttribute('属性名','属性值')
     • 删除 : 元素.removeAttribute('属性名')
8. 操作元素类名
   • 获取 : 元素.className
   • 设置 : 元素.className = '新类名'
9. 操作元素行内样式
   • 获取 : 元素.style.样式名
   • 设置 : 元素.style.样式名 = '样式值'
10. 获取元素非行内样式
    • 获取 : window.getComputedStyle(元素).样式名
11. 节点操作
    • 创建节点 : document.createElement('标签名称')
    • 插入节点 :
      • 父节点.appendChild(子节点)
      • 父节点.insertBefore(要插入的子节点,哪个子节点的前面)
    • 删除节点:
      • 删除子节点: 父节点.removeChild(子节点)
      • 删除自己: 节点.remove()
    • 替换节点:
      • 父节点.replaceChild(换上节点,换下节点)
    • 克隆节点:
      • 节点.cloneNode(是否克隆后代节点(布尔值))
12. 获取元素尺寸
    • 获取元素 内容 + padding + border区域尺寸
      • 元素.offsetHeight
      • 元素.offsetWidth
        -获取元素 内容 + padding 区域的尺寸
      • 元素.clientHeight
      • 元素.clientWidth