DOM-节点操作
节点操作
-
本质上针对标签本身的增删查
-
总结: 有明确的亲戚关系的时候, 使用查语法更加方便一些
-
查
-
返回的都是dom对象
-
查找父级:
子元素.parentNode- 查找最近的父级元素，返回是dom元素
-
查找子集:
父元素.children-
伪数组
-
遍历,不能使用
forEach
-
-
查找兄弟：
-
nextElementSibling- 下一个兄弟元素
-
previousElementSibling- 上一个兄弟元素
-
-
节点-增
-
创建新节点
-
写法：
let result = document.createElement(标签名称) -
创建元素之后，还需要对元素设置内容和样式
- 内容设置：
innerTextinnerHTML - 属性设置： 元素.属性
- 内容设置：
-
-
追加节点
-
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
-
直接删除当前微博
-
-
细节
-
如果没有输入内容，则不发布微博
-
发布之后清空输入框
-
数据的细节处理
- 随机获取数据对象进行渲染
-
<script>
// 模拟数据，后期我们需要从这个数组中随机获取一个数据对象，做为发布微博的用户信息进行渲染，但是这个不是关键业务，我也可以固定写死
let dataArr = [
{ uname: '司马懿', imgSrc: './images/9.5/01.jpg' },
{ uname: '女娲', imgSrc: './images/9.5/02.jpg' },
{ uname: '百里守约', imgSrc: './images/9.5/03.jpg' },
{ uname: '亚瑟', imgSrc: './images/9.5/04.jpg' },
{ uname: '虞姬', imgSrc: './images/9.5/05.jpg' },
{ uname: '张良', imgSrc: './images/9.5/06.jpg' },
{ uname: '安其拉', imgSrc: './images/9.5/07.jpg' },
{ uname: '李白', imgSrc: './images/9.5/08.jpg' },
{ uname: '阿珂', imgSrc: './images/9.5/09.jpg' },
{ uname: '墨子', imgSrc: './images/9.5/10.jpg' },
{ uname: '鲁班', imgSrc: './images/9.5/11.jpg' },
{ uname: '嬴政', imgSrc: './images/9.5/12.jpg' },
{ uname: '孙膑', imgSrc: './images/9.5/13.jpg' },
{ uname: '周瑜', imgSrc: './images/9.5/14.jpg' },
{ uname: '老夫子', imgSrc: './images/9.5/15.jpg' },
{ uname: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
{ uname: '扁鹊', imgSrc: './images/9.5/17.jpg' },
{ uname: '马可波罗', imgSrc: './images/9.5/18.jpg' },
{ uname: '露娜', imgSrc: './images/9.5/19.jpg' },
{ uname: '孙悟空', imgSrc: './images/9.5/20.jpg' },
{ uname: '黄忠', imgSrc: './images/9.5/21.jpg' },
{ uname: '百里玄策', imgSrc: './images/9.5/22.jpg' }
]
// 1.获取元素
let send = document.querySelector('#send') // 发布按钮
let area = document.querySelector('#area') // 文本域
let useCount = document.querySelector('#useCount') // 数字展示
let list = document.querySelector('#list') // 列表结构
area.focus()
// 2.实现微博的基本发布
send.addEventListener('click', function() {
// 2.1 收集用户输入的内容
let content = area.value.trim()
// 添加用户输入内容的判断
if (content.length == 0) {
alert('不要乱搞嘛')
return
}
// 2.2 创建一个li元素
let li = document.createElement('li')
// 2.3 随机获取一个用户信息，做为渲染的数据来源
let index = parseInt(Math.random() * dataArr.length)
// 2.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">发布于 ${dateFormat()}</p>
</div>
<div class="content">${content}</div>
<span class="the_del">X</span>`
// 2.5 将创建的li元素插入到指定的容器中
list.insertBefore(li, list.children[0])
// 为删除按钮绑定事件
let the_del = document.querySelector('.the_del')
the_del.addEventListener('click', function() {
// the_del.parentNode.remove()
// list.removeChild(li)
list.removeChild(the_del.parentNode)
})
// 发布之后，清空输入框
area.value = ''
})
// 3.添加输入框内容变化的监听
area.addEventListener('input', function() {
// area.value = area.value.trim()
useCount.innerText = area.value.trim().length
})
// 封装一个函数，用于日期格式化
let dateFormat = 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}`
}
</script>
