一、DOM
1、定义
DOM是文档对象模型，是将文档作为一个对象，这个对象主要定义了处理网页内容的方法和接口
2、核心
DOM的核心是Document对象
二、BOM
1、定义
BOM是浏览器对象模型，是将浏览器当做一个对象，这个对象主要定义了和浏览器进行交互的方法和对象
2、核心
BOM和核心是Window对象，Window具有双重身份，就是通过js访问浏览器的一个接口，也是一个全局对象
3、子对象
有 location 对象、navigator 对象、screen 对象等子对象
并且Document对象是Window对象的子对象
三、DOM相关的操作
一、获取DOM节点总结
getElementById()
getElementsByClassName()
getElementsByTagName()
querySelectorAll()
querySelector()
1、id
// 按照 id 查询
var imooc = document.getElementById('imooc') // 查询到 id 为 imooc 的元素
2、class
// 按照类名查询
var moocList = document.getElementsByClassName('mooc') // 查询到类名为 mooc 的集合
3、tags
// 按照标签名查询
var pList = document.getElementsByTagName('p') // 查询到标签为 p 的集合
4、所有nodelist
// 按照 css 选择器查询
var pList = document.querySelectorAll('.mooc') // 查询到类名为 mooc 的集合
5、一个nodelist
// 按照 css 选择器查询
var pList = document.querySelector('.mooc') // 查询到一个类名为 mooc 的集合
二、代码展示
1、创建节点
<body>
<div id="container">
<h1 id="title">我是标题</h1>
</div>
</body>
// 要求添加一个有内容的 span 节点到 id 为 title 的节点后面
<script>
// 父元素
let container = document.getElementById('container')
//创建span
let targetSpan = document.createElement('span')
// span 内容
targetSpan.innerHTML = 'hello world'
//添加节点
container.appendChild(targetSpan)
</script>
2、删除节点
// 删除指定的 DOM 节点
// 父元素
let container = document.getElementById('container')
//目标节点
let targetH1 = document.getElementById('title')
// 删除节点
container.removeChild(targetH1)
3、修改节点
<body>
<div id="container">
<h1 id="title">我是标题</h1>
<p id="content">我是内容</p>
</div>
</body>
// 现在需要调换 title 和 content 的位置，可以考虑 insertBefore 或者 appendChild
let container = document.getElementById('container')
let title = document.getElementById('title')
let content = document.getElementById('content')
container.insertBefore(content, title)
