1.复习
7种数据结构：number、string、symbol、bool、null、undefined、object
5种falsy值：0、‘’、NaN、undefined、null
2.JS
网页其实是一棵树，JS要如何操作这个库呢？
通过document，浏览器往window上加一个document
JS用document操作网页，这就是Document Object Model（文档对象模型）
3.获取元素，也叫标签
1.window.idxxx或者直接idxxx
2.document.getElementById('idxxx')
3.document.getElementsByTagName('div')[0]
4.document.getElementsByClassName('red')[0]
5.document.querySelector('#idxxx')
6.document.querySelectorAll('div')[0]
特定元素：
1.body:document.body
2.head:document.head
3.html:document.documentElement
4.窗口：window
5.获取所有元素：document.all
这个是就六个falsy值
4.获取的元素
获取的元素是一个对象，以div举例：
先是自身属性：className、id、style等
第一层原型：HTMLDivElement.protoype 所有div的共有属性
第二层原型: HTMLElement.prototype 所有HTML元素的共有属性
第三层原型：Element.prototype 所有HTML和xml的共有属性
第四层原型：Node.prototype 所有节点属性 ，节点包括便签文本注释
第五层原型：eventTarget.prototype 里面有最重要的函数属性addEventListener
最后一层就是Object.prototype
5.节点的增删改查
1.增
（1）创建一个标签节点
let div = document.createElement('div') // 创建一个 div 标签
let ul = document.createElement('ul') // 创建一个 ul 标签
console.log(ul) // <ul> </ul>
（3）在标签中插入文本
let div = document.createElement('div')
let text= document.creatTextNode('你好')
div.appendChild(text)
或者
div.innerText('你好')
或者
div.textContent('你好')
appendChild后面只能插入对象，div.appendChild('你好'）报错
（4）插入页面
document.body.appendChild(div)
创建好的标签，默认在JS线程里面
（5）
let div = document.createElement('div')
test1.appendChild(div)
test2.appendChild(div)
div会在test2中，要想两个里面都有，复制一下
div1=div.cloneNode(true) //后面加个true是深拷贝
test1.appendChild(div1)
test2.appendChild(div)
2.删
两种方法：
parentNode.removeChild(childNode)（老方法）
div.parentNode.removeChild(div)//先找到父亲，然后在删除自己
childNode.remove()div.remove()//自己删除自己
删除后还可以再回来
div.remove();
document.body.appentChild(div)
这个删除只是在页面上删除了，还在JS内存中
永久删除：
div.remove();
div = null
删除后让他等于空，div和那个内存没有了联系，内存就被垃圾回收了
3.改
1.写标准属性
（1）改class：
div.className = "red";//原有的class被覆盖
（2）改class：
div.classList.add('red') //不会覆盖原有的class
（3）改style：
div.style.width = '20px'//css中有‘-’的在这换成驼峰命名法
2.读标准属性
div.classList
div.getAttribute('class')
3.事件处理函数
div.onclick默认是null，
js把一个函数赋值给他，点击的时候，浏览器就会调用这个函数
fn.call(div,event)
div 被当做this，event包含点击事件的所有信息
div.addEventListener//升级版
4.改文本内容
div.innerText = 'xxx'
或者
div.textContext = ‘xxx’
5.改html内容
div.innerHTML = '<h1>标题</h1>'
6.改标签
div.innerHTML = ''
div.appendChild(div2)
先清空在赋值
7.改爸爸parentNode
newParentNode.appentChild(div)
直接在新节点加进去就行
4.查
1.查爸爸
node.parentNode
或
node.parentElement
2.查yeye
node.parentNode.parentNode
3.查子代
node.childrem
node.childNodes;//用这个查有空格回车
4.查兄弟姐妹
node.parentNode.children
5.查孩子
node.firstChild
node.lastChild
6.查兄弟
node.previousSibing
node.nextSibing
6.JS的操作是跨线程的
浏览器分为渲染引擎和JS引擎
JS引擎只能操作JS
渲染引擎只能操作页面
跨线程通信
