JS — DOM

DOM: document object model 文档对象模型，提供系列的属性和方法，让我们在js中操作页面的元素

获取元素的属性和方法

• document.getElementById
• [context].getElementsByTagName
• [context].getElementsByClassName
• document.getElementsByName
• [context].querySelector
• [context].querySelectorAll

• document
• document.documentElement
• document.body
• document.head
• childNodes
• children
• parentNode
• firstChild / firstElementChild
• lastChild / lastElementChild
• previousSibling / previousElementSibling
• nextSibling / nextElementSibling

DOM的增删改操作

• document.createElement([tag-name])
• document.createTextNode([text-content])
• 字符串拼接（模板字符串），然后结余innerHTML / innerText存放到容器中
• [parent].appendChild([new-element])
• [parent].insertBefore([new-element], [element])
• [element].cloneNode([true/false])
• [parent].removeChild([element])

设置自定义属性

• [element].xxx = xxx
• delete [element].xxx
• [element].setAttribute(‘xxx’, xxx)
• [element].removeAttribute(‘xxx’)

获取元素样式和操作样式

修改元素样式

• [element].style.xxx = xxx (行内样式)
• [element].className = xxx (样式类)

获取元素样式

• [element].style.xxx

JS盒子模型属性

基于一些属性和方法，让我们能够获取当前元素的样式信息，例如：clientWidth、offsetWidth

• client //不包含border
  • width/height
  • top/left
• offset //包含border
  • width/height
  • top/left //距离父参照物的值
  • parent
• scroll //包含超出的部分
  • width/height //获取真实宽度、高度
  • top/left //只有这两个可读写属性，其余都是只读属性

方法： window.getComputedStyle([element], [])/[element].currentStyle