乐趣区

关于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
退出移动版