DOM(Document Object Model)
操作文档流相关的属性和方法
获取元素
- 非常规元素
- html:
document.documentElement - head:
document.head - body:
document.body
- 常规元素
- 根据元素 id 获取:
document.getElementById('id') - 根据元素 类名 获取:
document.getElementByClassName('类名') - 根据元素 标签名 获取:
document.getElementByTagName('标签名') - 根据 选择器 获取一个:
document.querySelector('选择器') - 根据 选择器 获取一组:
document.querySelectorAll('选择器')
操作元素样式
行内样式 和 非行内样式
- 获取元素行内样式:
element.style.样式名 - 获取元素非行内样式:
window.getComputedStyle(element).样式名 - 设置元素行内样式:
element.style.样式名 = 样式值
操作元素属性
- 操作原生属性
- 获取:
元素.属性名 - 设置:
元素.属性名 = 值
- 操作特殊的原生属性(checked/selected/...)
- 自定义属性操作
- 设置:
元素.setAttribute(key, value) - 获取:
元素.getAttribute(key) - 删除:
元素.removeAttribute(key)
- H5自定义属性
- 设置:
元素.dataset.key = value - 获取:
元素.dataset.key - 删除:
delete 元素.dataset.key
操作元素类名
- className
- 设置:
元素.className = 'value' - 获取:
元素.className - 追加:
元素.className += 'value'
- classList
- 添加:
元素.classList.add(类名) - 删除:
元素.classList.remove(类名) - 切换:
元素.classList.toggle(类名)
操作文本内容
- innerText
- 获取:
元素.innerText - 设置:
元素.innerText = 值
- innerHTML
- 获取:
元素.innerHTML - 设置:
元素.innerHTML
- value
- 获取:
表单元素.value - 设置:
表单元素.value = 值
获取元素尺寸
- offset 一套(内容+padding+border)
元素.offsetWidth元素.offsetHeight
- client 一套(内容+padding)
元素.clientWidth元素.clientHeight
获取元素偏移量
- offset 一套
- offsetParent
- offsetLeft
- offsetTop
- client 一套
- clientLeft(左边框)
- clientTop(上边框)
获取可视窗口尺寸
- BOM 级别的获取(包含滚动条在内的尺寸)
- window.innerWidth
- window.innerHeight
- DOM 级别的获取(不包含滚动条在内的尺寸)
- window.documentElement.clientWidth
- window.documentElement.clientHeight
DOM节点
获取节点
- childNodes
- children
- firstChild
- firstElementChild
- lastChild
- lastElementChild
- previousSibling
- previousElementSibling
- nextSibling
- nextElementSibling
- parentNode
- parentElement
- attributes
创建节点
document.createElement('标签名')document.createTextNode('文本内容')
插入节点
父节点.appendChild(子节点)父节点.insertBefore(要插入的子节点, 子节点)
删除节点
父节点.removeChild(要移除子节点)remove()
替换节点
父节点.replaceChild(换上节点, 换下节点)
克隆节点
节点.cloneNode(参数)
