WebAPI基础（三）知识点
- document.wirte( )
- innerHTML 属性
- document.createElement( )
document.wirte()
document.wirte() 文档写入功能，该功能比较有局限性，因为只能在 body 元素内添加内容，不能给其他元素添加内容，并且有覆盖页面 body 全部内容的风险，所以 document.wirte 可以打入冷宫。
innerHTML 属性
document.wirte 被打入冷宫后，有什么新宠呢 ? 可以用 innerHTML 实现，因为功能更强大。
/**
* innerHTML 属性
*
* 修改：重新赋值就是修改
* 语法：元素.innerHTML = '新节点内容';
*
* 获取： 不赋值是获取
* 语法：元素.innerHTML
*
* 增加：
* += 累加(先获取，增加元素，再赋值)
*
* */
列表渲染
innerHTML 可用于根据数据渲染列表，列表渲染有三种写法
列表渲染1.0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表渲染1.0</title>
</head>
<body>
<h1>左侧列表</h1>
<ul id="catList">
</ul>
</body>
</html>
<script>
var listArr = [
"家用电器",
"手机 / 运营商 / 数码",
"电脑 / 办公",
"家居 / 家具 / 家装 / 厨具",
"男装 / 女装 / 童装 / 内衣",
"美妆 / 个护清洁 / 宠物",
"女鞋 / 箱包 / 钟表 / 珠宝",
"男鞋 / 运动 / 户外",
"房产 / 汽车 / 汽车用品",
"母婴 / 玩具乐器",
"食品 / 酒类 / 生鲜 / 特产",
"艺术 / 礼品鲜花 / 农资绿植",
"医药保健 / 计生情趣",
"图书 / 文娱 / 电子书",
"机票 / 酒店 / 旅游 / 生活",
"理财 / 众筹 / 白条 / 保险",
"安装 / 维修 / 清洗保养",
"工业品"
];
/* 查找 ul 盒子 */
var catList = document.getElementById('catList');
/* for 循环遍历数据 */
for (var i = 0; i < listArr.length; i++) {
/* 在遍历到每个成员的时候，把数据放到 <li> 标签内部，并添加到 ul 内容中 */
catList.innerHTML = catList.innerHTML + '<li>' + listArr[i] + '</li>';
}
</script>
以上写法在循环中有 3 个过程：
1. innerHTML 获取结构的内容
2. 在原内容上拼接上新的列表字符串
3. 把拼接好后的内容，添加到页面中
缺点：反复获取和修改页面的内容，非常影响性能。
列表渲染2.0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表渲染2.0</title>
</head>
<body>
<h1>左侧列表</h1>
<ul id="catList">
</ul>
</body>
</html>
<script>
var listArr = [
"家用电器",
"手机 / 运营商 / 数码",
"电脑 / 办公",
"家居 / 家具 / 家装 / 厨具",
"男装 / 女装 / 童装 / 内衣",
"美妆 / 个护清洁 / 宠物",
"女鞋 / 箱包 / 钟表 / 珠宝",
"男鞋 / 运动 / 户外",
"房产 / 汽车 / 汽车用品",
"母婴 / 玩具乐器",
"食品 / 酒类 / 生鲜 / 特产",
"艺术 / 礼品鲜花 / 农资绿植",
"医药保健 / 计生情趣",
"图书 / 文娱 / 电子书",
"机票 / 酒店 / 旅游 / 生活",
"理财 / 众筹 / 白条 / 保险",
"安装 / 维修 / 清洗保养",
"工业品"
];
/* 查找 ul 盒子 */
var catList = document.getElementById('catList');
/* 字符串的拼接 */
/* 1. 创建字符串 */
var htmlStr = '';
/* 2. for 循环遍历数据，拼接字符串 */
for (var i = 0; i < listArr.length; i++) {
htmlStr = htmlStr + '<li>' + listArr[i] + '</li>';
}
/* 3. 把字符串 赋值给 innerHTML，添加到页面，一次就够了 */
catList.innerHTML = htmlStr;
</script>
这种写法把 innerHTML 添加到页面的操作减少到仅有 一次，很大程度上提高了效率。
但是，字符串还是会反复的 获取，拼接，修改。性能还可以做优化。
列表渲染3.0 *
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表渲染3.0</title>
</head>
<body>
<h1>左侧列表</h1>
<ul id="catList">
</ul>
</body>
</html>
<script>
var listArr = [
"家用电器",
"手机 / 运营商 / 数码",
"电脑 / 办公",
"家居 / 家具 / 家装 / 厨具",
"男装 / 女装 / 童装 / 内衣",
"美妆 / 个护清洁 / 宠物",
"女鞋 / 箱包 / 钟表 / 珠宝",
"男鞋 / 运动 / 户外",
"房产 / 汽车 / 汽车用品",
"母婴 / 玩具乐器",
"食品 / 酒类 / 生鲜 / 特产",
"艺术 / 礼品鲜花 / 农资绿植",
"医药保健 / 计生情趣",
"图书 / 文娱 / 电子书",
"机票 / 酒店 / 旅游 / 生活",
"理财 / 众筹 / 白条 / 保险",
"安装 / 维修 / 清洗保养",
"工业品"
];
/* 查找 ul 盒子 */
var catList = document.getElementById('catList');
/* 1. 创建空数组 */
var htmlArr = [];
/* 2. 利用循环，把节点拼接到放到数组中 */
for (var i = 0; i < listArr.length; i++) {
htmlArr.push('<li>' + listArr[i] + '</li>');
}
/* 3. 把数组的字符串赋值给 innerHTML */
catList.innerHTML = htmlArr.join('');
</script>
创建空数组，相当于准备了个容器，新的字符串节点尽管往 数组容器里添加。
数组添加操作，不需要像字符串那样反复获取和修改。所以数组添加的效率最高。
不过数组要去掉逗号再赋值。需要配合用 join() 方法。
document.createElement()
特别适合创建单个元素的场景：如发布一条新闻，发布一条微博，发布一条消息，发布一条朋友圈...
/**
* 创建单个元素(标签)
* document.createElement('标签名');
* 注意：创建的元素默认在内存中，需要配合其他方法才能添加到页面中。
* 把元素添加到页面中的方法：
* 后添加：
* 父元素.appendChild(子元素);
* 前添加：
* 父元素.insertBefore(子元素, 位置);
* */
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>发布微博</title>
</head>
<body>
<input id="btn" type="button" value="发布微博">
<input id="txt" type="text">
<ul id="list">
<li>本来有的微博内容</li>
</ul>
</body>
</html>
<script>
/* 查找元素 */
var btn = document.getElementById('btn');
var txt = document.getElementById('txt');
var list = document.getElementById('list');
/* 当 < 发布按钮 > 被 < 点击 > 时，效果是 < 1.获取文本框的内容，2. 添加到列表中 > */
btn.onclick = function () {
/* 1.获取文本框的内容，.trim()去除首尾空格 */
var str = txt.value.trim();
// console.log(str);
/* 4. 在获取到字符串后，就要进行 是否为 空的判断，如果空，给出提示，并且不能发布微博 */
if (str === '') {
alert('不允许发布空微博...');
/* return 跳出函数，break 是跳出循环 */
return;
}
/* 2. 创建新的 li 节点 */
var tag = document.createElement('li');
/* 2.1 把文本框的字符串添加到 li 中 */
tag.innerText = str;
// console.log(tag);
/* 3. 把节点添加到对应的父级元素中 */
list.appendChild(tag);
/* 用户体验，发布后清空输入框，重新赋值为 '' */
txt.value = '';
}
</script>
查找元素
id名 / 标签名 / 类名 查找
通过 id 名查找元素
/* 通过 id 名查找元素 */
document.getElementById()
查找成功：
返回一个元素
查找失败：
返回 null
通过 标签名 名查找元素
/* 通过 标签名 名查找元素 */
document.getElementsByTagName()
查找成功：
伪数组格式
查找失败：
返回 空的伪数组
通过 类名 名查找元素
/* 通过 类名 名查找元素 */
document.getElementsByClassName()
查找成功：
伪数组格式
查找失败：
返回 空的伪数组
关系查找
关系查找主要是：父 子 兄 三大关系
父级关系（包裹）
.parentNode 父节点
.parentElement 父元素
子级关系（嵌套）
.childNodes 子节点
.children 子<元素>
兄弟关系（同级）
下一个：
.nextElementSibling 下一个兄弟<元素>
.nextSibling 下一个兄弟节点
上一个：
.previousElementSibling 上一个兄弟<元素>
.previousSibling 下一个兄弟节点
CSS 选择器语法查找
查找一个元素
查找到符合规则的第一个元素
* document.querySelector('选择器')
* 返回值：
* 成功：返回一个元素
* 失败：返回 null
*
查找多个元素
查找到符合规则的所有元素
* document.querySelectorAll('选择器')
* 返回值：
* 成功：返回伪数组
* 失败: 空的伪数组