节点操作
一、节点概念：
定义：
DOM树的每一个内容
类型：
1、元素节点：所有的标签、HTML是根节点
2、属性节点：所有属性比如href
3、所有文本
4、其他
二、节点操作：
相对定位，局部查找，减少全局查找的次数与浏览器负荷，提高性能
查找节点：
1、节点关系：父节点、子节点、兄弟节点
2、父节点查找：parentNode
//查找最近父节点，失败返回null
dom.parentNode
2、子节点查找：children 与childNode
1、childNode获取父元素的所有子节点，包括文本节点、注释节点、标签元素
2、children返回目标元素的子元素节点（标签）
3、返回值都是伪数组对象，失败为空数组
4、无法使用forEach
dom.childNode
dom.children
3、兄弟节点：next/previousElementSibing 属性
//两个对应children都返回标签元素，获取失败返回null
dom.nextElementSibing
dom.previousElementSibing
//对应childNode的返回所有节点中的对应元素，
dom.nextSibing
dom.previousSibing
//尽量避免利用元素关系进行定位
增加节点：
1、创建节点：document.createElement('标签')
let p = document.createElement('p')
//通过innerHTML插入相应位置，可以吗？
let divBox = document.querySelector('div')
div.innerHTML = `${p}`
//通过调用dom元素.createElement('p')可以吗？
//正常方式是：通过追加节点方法进行插入
上述问题答案
问题一：dom.innerHTML =
${ElementObject}，可以实现相同效果吗？答：不可以，由createElement创建的节点是一个HTMLParagraphElement对象，拥有属性与方法，只能通过innerHTML来取innerHTML的内容值。
问题二：可以通过调用dom元素.createElement('p')吗？
答：不可以，createElement属于DOM根对象方法，不存在于dom子对象中
2、追加节点:appendChild和insertBefore()
//appendChild方法追加
farther.appendChild(元素变量)
//innerBefore指定位置插入，前置
//当第二位置参数为undefined时，默认插入到最前
farther.insertBefore(元素变量，子元素)
3、复制节点：cloneNode(Boolean)
//克隆一个已有的元素节点
dom.cloneNode(boolean)
//Boolean为拷贝类型参数
dom.cloneNode(true) //深拷贝，连带子节点一起复制
dom.cloneNode(false) //浅拷贝，只拷贝父节点
//默认值为false
删除节点
dom.remove()移除自身
farther.removeChild(dom)
1、如不存在父子关系则删除不成功
2、删除节点根本区别于隐藏节点
3、必须通过父元素删除直接子元素
//非父子元素删除报错：
The node to be removed is not a child of this node.
//不能删除孙子等节点
替换节点
语法：node.replaceChild(newnode,oldnode)
//replaceChild() 方法可将某个子节点替换为另一个
//验证是深替换还是浅替换
三、时间对象
实例化：new
创建实例
//获得当前时间
let newDate = new Date()
//获取指定时间
let oldDate = new Date('1939-10-01')
时间格式：
//星期、月、日、年、时分秒、时区
Thu Jan 20 2022 15:21:02 GMT+0800
//Object类型
时间对象方法
//获取四位数年份
dataObject.getFullYear()
//获取月份,0~11
dataObject.getMonth()
//获取月份中的每一天，当天日期
dataObject.getDate()
//获取星期，0~6
dataObject.getDay()
//获取小时，0~23
dataObject.getHours()
//获取分钟，0~59
dataObject.getMinutes()
//获取秒,0~59
dataObject.getSeconds()
返回值都为number类型
时间戳
定义：
从1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
获取方法:
返回值均为 number
1、getTime（）
//实例化
let date = new Date()
//时间戳
console.log(date.getTime())
2、简写 +new Date()
console.log(+new Date())
3、Date.now()
console.log(Date.now())
//无需实例化
//只能获取当前时间戳，无法返回指定的时间戳
PS：
1、问题一：时间戳转24小时制
应用场景
倒计时、验证数据是否被修改、防止浏览器强制缓存
渲染步骤：
数据的渲染实现的步骤是什么样的，你有总结到渲染业务的规律吗？ 答案：前提需要数据与结构，1、获取数据数组对象；2、准备数据；3、遍历拼接：结构字符串--》遍历填充替换数据；4、定点插入结构
### 四、综合案列
微博发布
注意事项：
核心程序：
//时间处理函数
let timeChange = function () {
//获取当前时间
let mytime = new Date()
//处理时间格式
let year = mytime.getFullYear()
let month = mytime.getMonth() + 1
month = month > 10 ? month : '0' + month
let day = mytime.getDate()
day = day > 10 ? day : '0' + day
let hour = mytime.getHours()
hour = hour > 10 ? hour : '0' + hour
let minute = mytime.getMinutes()
minute = minute > 10 ? minute : '0' + minute
let second = mytime.getSeconds()
second = second > 10 ? second : '0' + second
//封装返回时间对象
let timeObj = {}
timeObj['CN_time'] = `${year}-${month}-${day} ${hour}:${minute}:${second}`
return timeObj
}
//发布函数
let send = function () {
//调用随机数
let rand = myRandom(0, dataArr.length - 1)
// console.log(rand);
//调用时间处理函数
let currentT = timeChange().CN_time
// console.log(currentT);
//定义结构
let li = document.createElement('li')
li.innerHTML = `
<div class="info">
<img class="userpic" src="${dataArr[rand].imgSrc}" />
<span class="username">${dataArr[rand].uname}</span>
<p class="send-time">发布于 ${currentT}</p>
</div>
<div class="content">${textDom.value}</div>
<span class="the_del">X</span>
`
//空输入检测
// console.log(textDom.value.length);
if (!textDom.value.length) {
console.log('空输入');
alert('不能发布空言论！')
} else {
//渲染页面
ul.insertBefore(li, ul.children[0])
}
//清除文本内容,如何清除回车键
textDom.value = null
// console.log(textDom.value, textDom.value.length);
//字数统计置零
textDom.nextElementSibling.children[0].innerText = `0`
//删除列表
//获取删除事件源
let deleteBtn = li.children[2]
console.log(deleteBtn);
//为事件源添加点击事件
deleteBtn.addEventListener('click', function () {
//获取父对象---li
let liDom = this.parentNode
// console.log(liDom);
//移除本对象
liDom.remove()
})
}
//add SEND Event
sendBtn.addEventListener('click', send)
//字数统计
textDom.addEventListener('input', function () {
//获取统计数元素资源
let CountDom = document.querySelector('.useCount')
// console.log(CountDom);
//获取文本框内字数
let count = this.value.length
//同步数值
CountDom.innerHTML = `${count}`
})
//确认键的检测，输入符在键盘抬起才完成input操作，所以回车键的输入会滞后
//解决方式：设置在keyup之后执行，或者添加input事件检测回车与空格的输入过滤trim
textDom.addEventListener('keyup', function (e) {
if (e.which == 13) {
// console.log(textDom.value,textDom.value.length);
//清除回车键
// textDom.value = textDom.value.substr(0,textDom.value.length-1)
// 手动触发按钮点击事件
sendBtn.click()
}
})function (e) {
问题及解决方式：
盒子移动，定时器+2d转换
注意事项:
1、定时器的作用：与内部if结构配合发挥for的循环效果
2、
核心程序：
//大事件
btnBig.addEventListener('click',function(){
// console.log(divBox.style.width);
console.log(divBox.style);
divBox.style.width = `${++count}00px`
})
//移动事件
btnMove.addEventListener('click',function(){
let interval = setInterval(()=>{
if(totalWidth<500){
// key<50
// key++
// console.log(key);
totalWidth += 10
divBox.style.transform = `translate(${totalWidth}px,0px)`
// divBox.style.marginLeft = `${totalWidth}px`
}else{
clearInterval(interval)
}
},100)
问题及解决方式：
五、重绘与回流
定义：
浏览器渲染页面的的过程
重绘：不影响元素在文档布局时的位置，只进行绘制（局部？）样式
回流：影响文档元素大小位置，其发生改变时，浏览器对整个文档进行重新渲染的过程
\
