Web APIs
一、数组和伪数组
1.皆可for循环
2.伪数组对于好用的数组方法：不支持
①filter
②map
③some
④every
⑤find
⑥findIndex
⑦reduce
3.使用ducument.querySelectorAll 获取数组 伪数组
<body>
<div></div>
<div></div>
<script>
// 真正的数组 简单的判断 有一个方法 filter
// let arr=[];
// 通过 document.querySelectorAll 获取的数组 就是伪数组 可以使用for循环 但是有很多的真正的数组方法 伪数组用不了的！！
// 那些数组方法呢 很多 还没有正式讲到而已
// console.log(arr.filter);
// let divs=document.querySelectorAll("div");
// console.log(divs.filter);
// console.log(arr.filter);
// console.log(arr.map);
// console.log(arr.some);
// console.log(arr.every);
// console.log(arr.find);
// console.log(arr.findIndex);
// console.log(arr);
</script>
</body>
二、创建文本节点
1.创建文本节点
2.语法
document.createTextNode('文本内容')
<body>
<script>
// 创建元素节点 使用 createElement
// 创建文本节点
// let text = document.createTextNode('试试就试试不行就百度');
// document.body.appendChild(text);
</script>
</body>
三、插入节点
1.appendChild：只插入一个节点(插入到父元素的最后一个子元素)
2.append：插入多个节点
3.insertBefore:插入到父元素中某个子元素的前面
父元素.insertBefore(要插入的元素，在哪个元素前面)
<script>
/*
insertBefore 也能插入元素 功能也类似 appendChild
1 如果要插入的元素 是已经存在的 那么insertBefore作用 移动
2 如果要插入的元素 是新创建的 insertBefore作用 仅仅 插入
*/
let c = document.querySelector(".left li:nth-child(3)");
let two = document.querySelector(".right li:nth-child(2)");
let right = document.querySelector(".right");
// right.insertBefore(c, two);
let li = document.createElement("li");
li.innerText = "新创建的";
right.insertBefore(li, two);
// 父元素.insertBefore(要插入的元素,哪个元素的上面);
</script>
四、克隆节点cloneNode
1.cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
①若为true，则代表克隆时会包含后代节点一起克隆--深拷贝
②若为false，则代表克隆时不包含后代节点--浅拷贝
③默认值false
2.语法
元素.cloneNode(布尔值true/false)
3.深克隆true：会克隆节点后代节点
<body>
<div class="box">
<button class="btn">按钮</button>
</div>
<script>
let box = document.querySelector(".box");
let newBox = document.cloneNode(true);
body.appendChild(newBox);
</script>
</body>
五、删除元素
1.若一个节点在页面中已不需要时，可以删除它
2.在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
3.removeChild（删除子元素）、remove（删除自己）
①如不存在父子关系则删除不成功
②删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点
4.语法
父元素.removeChild('删除的元素')
<body>
<button>删除ul中某一个li标签</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
let button = document.querySelector("button");
let ul = document.querySelector("ul");
// 要删除的子元素
let li = document.querySelector("li:nth-child(4)"); // 1
button.addEventListener("click", function () {
// 删除指定的元素
ul.removeChild(li);
// 删除自己
// ul.remove();
});
</script>
</body>
六、时间对象
1.实例化的时间对象
2.获取时间戳（三种）
①Date.now()
②date.getTime()
③+new Date()
④返回当前时间 和 1970年1月1日0分0秒 之间毫秒数
3.获取事件对象（年、月、日、时、分、秒）方法
①getFullYear():年
②getMonth():月---->获取0---11，一般需自行+1
③getDate():日
④getDay():星期---->获取0---6，星期天为0
⑤getHours():时
⑥getMinutes():分
⑦getSeconds():秒
<script>
let div = document.querySelector("div");
let timeID = setInterval(function () {
let date = new Date();
let year = date.getFullYear();
let mouth = date.getMonth();
let date1 = date.getDate();
let hour = date.getHours();
let minute = date.getMinutes();
let second = date.getSeconds();
let day = date.getDay();
let week = [
"星期天",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
];
div.innerHTML = `${year}年${mouth}月${date1}日${hour}点${minute}分${second}秒<br>${week[day]}`;
console.log(
`${year}年${mouth}月${date1}日${hour}点${minute}分${second}秒${week[day]}`
);
}, 1000);
// 三种方式 获取时间戳
// let date=new Date();
// console.log(date.getTime()); // 方式一
// console.log(+(new Date()) ); // 方式二 只要日期对象 可以使用 + 将整个对象 转成 时间戳
// console.log(Date.now()); // 方式三
// 来快速生成一个不会重复的数字 * 随机数
</script>
七、综合案例
1.案例---发布微博案例
①html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="css/weibo.css" />
</head>
<body>
<div class="w">
<div class="controls">
<img src="images/tip.png" alt="" /><br />
<textarea
placeholder="说点什么吧..."
id="area"
cols="30"
rows="100"
maxlength="200"
></textarea>
<div>
<span class="useCount">0</span>
<span>/</span>
<span>200</span>
<button id="send">发布</button>
</div>
</div>
<div class="contentList">
<ul></ul>
</div>
</div>
<script>
/*
1 给发布按钮 绑定点击事件
2 事件触发
1 获取到文本域的文本内容
2 设置到一个新建创建的li标签中
3 把新创建的li标签 插入到ul中
4 清空文本域的内容
5 设置字体个数 = 0
3 给文本域 绑定input事件
事件触发了
获取输入的文本的长度 把它 设置到 数量标签中即可
*/
let useCount = document.querySelector('.useCount');
let ul = document.querySelector('ul');
let area = document.querySelector('#area');
let send = document.querySelector('#send');
// 1 给发布按钮 绑定点击事件
send.addEventListener('click', function () {
// 2.1 获取到文本域的文本内容
let value = area.value;
// 2.2 设置到一个新建创建的li标签中
let li = document.createElement('li');
// 设置li标签的文本内容 等于 文本域的内容
li.innerText = value;
// 2.3 把新创建的li标签 插入到ul中
ul.appendChild(li);
// 4 清空文本域的内容 设置文本域的文本 = 空的字符串
area.value = '';
// 5 设置字体个数 等于 0
useCount.innerText = 0;
});
// 3.1 给文本域 绑定input事件
area.addEventListener('input', function () {
// this = area
let length = this.value.length;
// 获取输入的文本的长度 把它 设置到 数量标签中即可
useCount.innerText = length;
});
</script>
</body>
</html>
②js部分
// 日期格式化
function getTime() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
month = month < 10 ? '0' + month : month;
var day = date.getDate();
day = day < 10 ? '0' + day : day;
var hours = date.getHours();
hours = hours < 10 ? '0' + hours : hours;
var minutes = date.getMinutes();
minutes = minutes < 10 ? '0' + minutes : minutes;
var seconds = date.getSeconds();
seconds = seconds < 10 ? '0' + seconds : seconds;
var str = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
return str;
};
// 1. 获取元素
// 1.1 文本域
var area = document.querySelector('#area');
// 1.2 发布按钮
var send = document.querySelector('#send');
// 1.3 类名为useCount的span
var useCount = document.querySelector('.useCount');
// 1.4 ul
var ul = document.querySelector('ul');
// 2. 【功能1：文本域输入的过程中统计内容的个数给span】
// 2.1 给文本域注册oninput事件
area.oninput = function () {
// 2.2 获取文本域中的内容的长度，赋值给类名为useCount的span的innerText
useCount.innerText = this.value.length;
};
// 3. 【功能2：点击发布按钮创建li追加的ul中】
// 3.1 给按钮注册事件onclik
send.onclick = function () {
// 3.2,在事件处理程序中 获取文本域中的内容
var v = area.value;
// 3.3 检测内容的长度是否等于0，若等于0，提示不能为空
if (v.length == 0) {
alert('内容不能为空！');
} else {
// 3.4 否则，创建li插入到ul中最前面
var newLi = document.createElement('li');
ul.insertBefore(newLi, ul.children[0]);
// 3.5 创建一个类名为info的div，追加到li中
var info = document.createElement('div');
info.className = 'info';
newLi.appendChild(info);
// 3.5.1 创建一个img元素，追加到类名为info的div中
var img = document.createElement('img');
info.appendChild(img);
// 3.5.2 设置img的src
img.src = 'images/03.jpg';
// 3.5.3 创建一个span元素，追加到类名为info的div中
var span = document.createElement('span');
info.appendChild(span);
// 3.5.4 设置span的内容
span.innerText = '百里守约';
// 3.5.5 创建一个p元素，追加到类名为info的div中
var p = document.createElement('p');
info.appendChild(p);
// 3.5.6 把当前时间设置给p元素
p.innerText = '发布于：' + getTime();
// 3.6 创建一个类名为content的div,追加到li中
var content = document.createElement('div');
content.className = 'content';
newLi.appendChild(content);
// 3.7 设置类名为content的div的innerText为文本域的内容
content.innerText = v;
// 3.8 发布成功后，清空文本域，数量重置为0
area.value = '';
useCount.innerText = '0';
}
};
2.案例---学成在线案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>index.html</title>
<link rel="stylesheet" href="./style.css" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box-bd">
<ul class="clearfix list"></ul>
</div>
</div>
<body>
<!-- 1 引入 要显示的数据 -->
<script src="./data/data.js"></script>
<!-- 2 在写自己的业务 -->
<script>
/*
1 获取到要渲染到页面中的数据 data
2 遍历data
要求使用 createElement appendChild 来往ul中插入 li 元素
1 创建一个li标签
2 创建一个图片便签 设置 src属性
3 创建一个h4标签 设置文本内容
4 创建一个div标签 添加一个class info
5 创建两个span标签
1个设置内容 高级
2个设置人数 1125
6 组装
li标签要 插入 img
li标签要 插入 h4
li标签要 插入 div.info
div.info 要插入两个span
ul插入 li
3 append可以插入多个元素 appendChild 只能插入一个元素
createTextNode 创建文件节点
*/
let ul = document.querySelector(".list");
for (let index = 0; index < data.length; index++) {
// const element = data[index];
let li = document.createElement("li");
let img = document.createElement("img");
img.src = data[index].src;
let h4 = document.createElement("h4");
h4.innerText = data[index].title;
let div = document.createElement("div");
div.classList.add("info");
let span1 = document.createElement("span");
span1.innerText = "高级";
let span2 = document.createElement("span");
span2.innerText = data[index].num;
let text1 = document.createTextNode(" • ");
let text2 = document.createTextNode("人在学习");
// 节点的类型 元素节点（标签）、文本节点
// 开始组装 append 可以同时插入多个标签
// appendChild 只能插入一个标签
div.append(span1, text1, span2, text2);
li.append(img, h4, div);
// li.append()
ul.appendChild(li);
}
</script>
</body>
</html>
