WebAPI基础（三） WebAPI基础（三）

WebAPI基础（三）知识点

document.wirte( )
innerHTML 属性
document.createElement( )

document.wirte()
document.wirte() 文档写入功能，该功能比较有局限性，因为只能在 body 元素内添加内容，不能给其他元素添加内容，并且有覆盖页面 body 全部内容的风险，所以 document.wirte 可以打入冷宫。
innerHTML 属性
document.wirte 被打入冷宫后，有什么新宠呢 ? 可以用 innerHTML 实现，因为功能更强大。
/**
*innerHTML 属性
*
*修改：重新赋值就是修改
*语法：元素.innerHTML = '新节点内容';
*
*获取：不赋值是获取
*语法：元素.innerHTML
*
*增加：
*+= 累加(先获取，增加元素，再赋值)
*
* */
列表渲染
innerHTML 可用于根据数据渲染列表，列表渲染有三种写法
列表渲染1.0

列表渲染1.0 - 锐客网

左侧列表

?

以上写法在循环中有 3 个过程：
1. innerHTML 获取结构的内容
2. 在原内容上拼接上新的列表字符串
3. 把拼接好后的内容，添加到页面中
缺点：反复获取和修改页面的内容，非常影响性能。
列表渲染2.0
【WebAPI基础（三）】

列表渲染2.0 - 锐客网

?
左侧列表

?

这种写法把 innerHTML 添加到页面的操作减少到仅有一次，很大程度上提高了效率。
但是，字符串还是会反复的获取，拼接，修改。性能还可以做优化。
列表渲染3.0 *

列表渲染3.0 - 锐客网

?
左侧列表

?

创建空数组，相当于准备了个容器，新的字符串节点尽管往数组容器里添加。
数组添加操作，不需要像字符串那样反复获取和修改。所以数组添加的效率最高。
不过数组要去掉逗号再赋值。需要配合用 join() 方法。
document.createElement()
特别适合创建单个元素的场景：如发布一条新闻，发布一条微博，发布一条消息，发布一条朋友圈...
/**
*创建单个元素(标签)
*document.createElement('标签名');
*注意：创建的元素默认在内存中，需要配合其他方法才能添加到页面中。
*把元素添加到页面中的方法：
*后添加：
*父元素.appendChild(子元素);
*前添加：
*父元素.insertBefore(子元素, 位置);
* */

发布微博 - 锐客网

本来有的微博内容

查找元素
id名 / 标签名 / 类名查找
通过 id 名查找元素
/* 通过 id 名查找元素 */
document.getElementById()
查找成功：
返回一个元素
查找失败：
返回 null
通过标签名名查找元素
/* 通过标签名名查找元素 */
document.getElementsByTagName()
查找成功：
伪数组格式
查找失败：
返回空的伪数组
通过类名名查找元素
/* 通过类名名查找元素 */
document.getElementsByClassName()
查找成功：
伪数组格式
查找失败：
返回空的伪数组
关系查找
关系查找主要是：父子兄三大关系
父级关系（包裹）
.parentNode父节点
.parentElement父元素
子级关系（嵌套）
.childNodes子节点
.children子<元素>

文章图片

文章图片

兄弟关系（同级）
下一个：
.nextElementSibling下一个兄弟<元素>
.nextSibling下一个兄弟节点
?
上一个：
.previousElementSibling上一个兄弟<元素>
.previousSibling下一个兄弟节点
CSS 选择器语法查找
查找一个元素
查找到符合规则的第一个元素
*document.querySelector('选择器')
*返回值：
*成功：返回一个元素
*失败：返回 null
*
查找多个元素
查找到符合规则的所有元素
*document.querySelectorAll('选择器')
*返回值：
*成功：返回伪数组
*失败: 空的伪数组