目标: 掌握节点(标签)的增删改查，具备编写微博发布案例的能力
节点操作
-
本质上针对标签本身的增删查
-
总结: 有明确的亲戚关系的时候, 使用查语法更加方便一些
-
查
-
返回的都是dom对象
-
查找父级: 子元素.parentNode
- 查找最近的父级元素，返回是dom元素
-
查找子集: 父元素.children
-
伪数组
- 遍历,不能使用forEach
-
-
兄弟
-
nextElementSibling
- 下一个兄弟元素
-
previousElementSibling
- 上一个兄弟元素
-
-
节点-增
-
创建新节点
-
let result = document.createElement(标签名称)
-
创建元素之后，还需要对元素设置内容和样式
- 内容设置：innerText innerHTML
- 属性设置： 元素.属性
-
-
追加节点
-
parent.appendChild(child)
- 将child的元素添加到parent元素里面去(最后面)
- append：追加，都是在最后面追加
-
parent.insertBofore(child, refChild)
-
将child元素添加到refChild的前面去
- ref：相对引用参照
-
如果refChild元素获取不到, 会默认以appendChild形式添加
-
一定要传递第二个参数，否则报错
-
-
追加的节点可以是新创建的 也可以是页面上已经存在 (移动)
-
-
克隆节点
-
模板元素.cloneNode(布尔值)
-
false: 浅拷贝
- 只拷贝元素结构
-
true: 深拷贝
- 拷贝元素结构及内容
-
用于需要创建一个复杂的标签
- 前提: 页面上有一个模板节点
-
-
删除节点
- parent.removeChild(child)：通过父元素删除直接子元素
- element.remove():删除元素本身
案例：
- 学成在线渲染案例
日期对象
-
-
获取日期对象
- new Date()
-
-
-
获取日期对象的每一个部分
- getFullYear()
- getMonth() + 1
- getDate()
- getHours()
- getMinutes()
- getSeconds()
-
-
-
补0函数的制作
- 将小于10的数值连上一个字符串的0
-
-
综合案例： 倒计时
综合案例-微博发布案例
-
发布微博
-
收集用户输入的内容
- 获取表单元素的value属性
-
创建元素
- document.createElement()
-
为元素设置内容
-
innerHtml
- 有网页结构
-
-
将元素插入到微博列表的最前面
- 父元素.insertBefore(你想插入的元素，位置参照元素)
-
-
监听用户输入内容的长度
- input事件监听输入内容的变化
-
日期格式的处理
- 日期api的使用
- 函数的封装
-
删除微博
-
通过父元素删除
- removeChild
- remove
-
直接删除当前微博
-
-
细节
-
如果没有输入内容，则不发布微博
-
发布之后清空输入框
-
数据的细节处理
- 随机获取数据对象进行渲染
-
面试题
- 重绘和回流
