关于javascript: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