DOM和BOM

DOM对象是文档（document）对象，页面中每一个元素（Element）抽象为一个个对象，

BOM是浏览器对象, navigator、location、history等对象

document对象

Document节点表示的整个载入的网页，它的实例是全局的document对象，它是DOM的入口，可以从document访问任意节点

• html元素：document.documentElement
• body元素：document.body
• head元素：document.head
• 文档声明：document.doctype

// 节点之间的导航
// 获取节点的导航
var bodyEl = document.body
// 1.1 获取body所有子节点
console.log(bodyEl.childNodes)
// 1.2 获取body的第一个子节点
var firstChild = bodyEl.firstChild
// 1.3 获取body中的注释
console.log(firstChild.nextSibling)
// 1.4 获取body的父节点
console.log(bodyEl.parentNode)

DOM继承关系图

节点导航

• parentNode
• previousSibling
• nextSibling
• childNodes
• firstChild
• lastChild

元素之间导航

• children
• firstElementChild
• lastElementChild
• parentElement
• previousElementSibling
• nextElementSibling

childeNodes与children的区别：childeNodes获取所有节点（注释、文本、换行.....）,children获取所有子元素。

form表单

• document.forms
• document.forms[0].elements
• document.forms[0].elements.nameArg

获取元素的方法

nodeType节点类型

data/innerHTML/textContent/outerHTML

• data/nodeValue 针对非元素节点获取文本内容
• innerHTML box中的元素开始结束标签都会拿到
• textContent 只会获取文本内容
• outerHTML box本身都会拿到

hidden

if (boxEl.hidden === false) {
	boxEl.hidden = true
} else {
    boxEl.hidden = false
}

boxEl.hidden = !boxEl.hidden

attribute

• 方法
  • el.hasAttribute(name):
  • el.getAttribute(name):
  • el.setAttribute(name,value)
  • el.removeAttribute(name)
  • attributes
• 大小写不敏感
• 值总是字符串类型
• 标准的attribute，会在DOM对象上创建property，可以通过el.attr 获取

className/style/classList

// className
boxEl.className = 'xx aa'

// style
boxEl.style.color = 'res'
boxEl.style.fontSize = '14px'

boxEl.style.cssText = 'color:res;font-size:14px' // 会覆盖
// 读取style
console.log(boxEL.style.fontSize)
console.log(getComputedStyle(boxEL).xxx)


// classList
/*
el.classList.add(class)
el.classList.remove(class)
el.classList.toggle(class): 如果存在则移除，如果不存在则添加
el.classList.contains(class): 检查给定类，返回true/false
*/

data-*/dataset

<h1 data-name="aa"></h1>
<script>
var h = document.querySelector("h1")
console.log(h.dataset.name) // aa
</script>