1.Dom节点：
元素节点 （ div标签）；属性节点 （class属性）；文本节点 （标签里面的文字）
2.查找节点：
（1）父节点查找：
子元素.parentNode ； 返回最近一级的父节点 返回是dom元素 找不到返回为null
（2）子节点查找：
childNodes获得所有子节点、包括文本节点（空格、换行）、注释节点等 children （重点）:仅获得所有元素节点 ，不包含文本和注释节点 （更常用）;返回的还是一个伪数组 遍历不能用forEach
（3）兄弟关系查找：
下一个兄弟节点 nextElementSibling 属性
上一个兄弟节点previousElementSibling 属性
3.增加节点
（1）创建节点：document.createElement('标签名')
（2）追加节点 ：
父元素. appendChlid 插入到父元素的最后一个子元素
父元素.insertBefore插入到父元素中某个子元素的前面 child, refChild
4.删除节点
父元素.removeChild(要删除的元素)通过父元素删除直接子元素 element.remove():删除元素本身
5.克隆节点
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值 若为true，则代表克隆时会包含后代节点一起克隆 如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。 若为false，则代表克隆时不包含后代节点 如果括号参数为空或者为false,则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。 默认为false
发布微博案例
// 模拟数据，后期我们需要从这个数组中随机获取一个数据对象，做为发布微博的用户信息进行渲染，但是这个不是关键业务，我也可以固定写死
let dataArr = [....]
// 0.获取元素
let send = document.querySelector('#send')
let area = document.querySelector('#area')
let useCount = document.querySelector('#useCount')
// 1.实现微博的基本发布
// 绑定单击事件
send.addEventListener('click', function () {
// 1.1 收集用户发布输入的内容
let content = area.value.trim()
// 添加用户输入内容的判断
if (content.length == 0) {
alert('请输入内容')
return
}
// 1.2 创建一个li元素
let li = document.createElement('li')
// 1.3随机获取一个用户信息，作为渲染的数据来源
let index = parseInt(Math.random() * dataArr.length)
// 1.4将用户输入的内容添加给li
li.innerHTML = `<div class="info">
<img class="userpic" src="${dataArr[index].imgSrc}" />
<span class="username">${dataArr[index].uname}</span>
<p class="send-time">发布于${dataFormat()}</p>
</div>
<div class="content">${content}</div>
<span class="the_del">X</span>`
// 1.5将创建的li元素插入到指定的容器中
list.insertBefore(li, list.children[0])
// 4.1为删除按钮绑定事件
let the_del = document.querySelector('.the_del')
the_del.addEventListener('click', function () {
list.removeChild(li)
})
// 4.2发布之后，清空输入框
area.value = ''
})
// 2日期格式化，封装函数
let dataFormat = function () {
let date = new Date()
let year = date.getFullYear()
let month = date.getMonth() + 1
let day = date.getDate()
let hour = date.getHours()
let minute = date.getMinutes()
let second = date.getSeconds()
return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
// 3.监听用户内部长度
area.addEventListener('input', function () {
useCount.innerText = area.value.trim().length
})
\
