DOM操作

DOM

一、获取标签

常用：

document.querySelector()
document.querySelectorAll()

根据节点获取：

父.children
父.firstElementChild
父.lastElementChild
标签.previousElementSubling
标签.nextElementSibling
子.parentElement

不常用：

document.getElementById() 
document.getElementsByTagName()
document.getElementsByClassName()
document.getElementsByName()

二、操作标签

创建标签：

document.createElement()

插入标签：

父.appendChild(子)
父.insertBefore(新, 旧)

替换标签：

父.replaceChild(新, 旧)

删除标签：

父.removeChild(子)

复制标签：

标签.cloneNode(true)

标签属性：

标签.getAttribute(属性名)
标签.setAttribute(属性名, 属性值)
标签.removeAttribute(属性名)

类名操作：

标签.className // 可以获取/可以赋值
标签.classList

classList的方法：

add()
remove()
has()
toggle()

内容操作：

标签.innerText
标签.innerHTML
表单标签.value

样式操作：

获取样式：

getComputedStyle(标签) // 获取到所有样式组成的对象

设置样式：

标签.style.css键 = css的值

获取标签名：

标签.tagName

获取标签大小：

包含边框的：

标签.offsetWidth
标签.offsetHeight

不包含边框的：

标签.clientWidth
标签.clientHeight

获取标签位置：

标签.offsetLeft
标签.offsetTop

获取标签边框厚度：

标签.clientLeft
标签.clientTop