数组和伪数组
<script>
//真正的数组 简单的判断：filter
let arr =[];
console.log(arr.filter);
//通过document.querySelectorAll 获取的数组就是伪数组。
//伪数组 可以使用for循环，但是很多数组可以用的方法，他使用不了
let divs = document.querySelectorAll('div')
</script>
创建文本节点
document.createTextNode("文本的内容")
<script>
//创建文本节点
let text1 = document.createTextNode(' 11111 ');
let text2 = document.createTextNode('222222');
console.log(text1)
console.log(text2)
</script>
克隆节点
克隆 cloneNode（）
//克隆一个已有的元素
元素.cloneNode(布尔值)；
- 元素.cloneNode(); 默认浅克隆，不会把div后代一起克隆。
- 元素.cloneNode(false); 浅克隆，不会把div后代一起克隆。
- 元素.cloneNode(true); 深克隆，会把div后代一起克隆。
示例：
<body>
<div class="box">
<button>点击</button>
</div>
<script>
let box =document.querySelector('.box');
//克隆 cloneNode（）
let box2= box.cloneNode(); //默认浅克隆，不会把div后代一起克隆
let box3= box.cloneNode(false); //浅克隆，不会把div后代一起克隆
let box4= box.cloneNode(true); //深克隆，会把div后代一起克隆
//插入克隆好的box
document.body.appendChild(box2)
document.body.appendChild(box4)
</script>
</body>
删除元素
若一个节点在页面中已不需要时，可以删除它。 在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除。 语法：
父元素.removeChild(要删除的元素)
注：
- 如不存在父子关系则删除不成功。
- 删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点。
示例：
<body>
<button>点击</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");
//点击按钮 绑定事件 删除指定的li标签
button.addEventListener('click', function () {
//获取要删除的哪个元素 --第一个li
let li = document.querySelector('li:nth-child(1)');
ul.removeChild(li); //删除子元素
button.remove(button) //删除自己
})
</script>
</body>
删除自己语法
元素.remove（）
时间对象
时间对象：用来表示时间的对象。 作用：可以得到当前系统时间。
学习路径：
-
实例化
let date = new Date(); 实例化一个事件对象。
-
时间对象方法
-
时间戳
注意：
- 月份取值是0~11 ，所以显示会延迟一个月，所以记得+1，且他是字符串+1的时候注意转换类型。
- 星期取值为0-6，0是星期天，1-6是星期1-星期6
在线时钟案例：
<body>
<div></div>
<script>
setInterval(function () {
let date = new Date();
let year = date.getFullYear(); // 年份
let month = date.getMonth(); //月份
let d = date.getDate(); // 几号
let day = date.getDay(); // 星期几 ，星期天是0
let h = date.getHours(); // 小时
let m = date.getMinutes();// 分钟
let s = date.getSeconds();// 秒
let div= document.querySelector('div');
div.innerText=`${year}年${month}月${d}号，星期${day}，时间：${h}：${m}：${s}`
},1000)
</script>
</body>
时间戳
什么是时间戳？ 是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式。 三种方式获取时间戳：
-
使用 getTime() 方法。
-
简写 +new Date()。
-
使用 Date.now() 。
无需实例化。 但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳。
<body>
<script>
//三种获取时间戳 的方式
//方法1
let date = new Date();
console.log(date.getTime());
//方法2
console.log(+(new Date()));
//方法3
console.log(Date.now());
//一般用来快速生成一个不会重复的数字*随机数
</script>
</body>
微博综合案例
简易版：
<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>
<!-- <li>
<div class="info">
<img class="userpic" src="./images/9.5/06.jpg" />
<span class="username">张良</span>
<p class="send-time">发布于 2022-4-7 15:12:23</p>
</div>
<div class="content">sdfdf</div>
<span class="the_del">X</span>
</li> -->
</ul>
</div>
</div>
<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' },
];
let send = document.querySelector('#send'); //发布按钮
let textarea = document.querySelector('#area'); //文本域
let ul = document.querySelector('ul'); //列表
let num = document.querySelector('.useCount'); //数字
let the_del = document.querySelector('.the_del'); //关闭按钮
//给发布按钮绑定 点击事件
send.addEventListener('click', function () {
//新建li
let li = document.createElement('li');
//定义个随机数
let index = Math.round(Math.random() * (dataArr.length - 1));
//里面放内容，1.图片和英雄名字用数组[随机数].属性名，让他每次都随机出现某一个英雄的图片和名字；2.发布时间里面引用 已写好的实时时间的函数； 3.文本内容=文本域的文本内容。
li.innerHTML = ` <li>
<div class="info">
<img class="userpic" src="${dataArr[index].imgSrc}" />
<span class="username">${dataArr[index].uname}</span>
<p class="send-time">发布于${getTime()}</p>
</div>
<div class="content"> ${textarea.value}</div>
<span class="the_del">X</span>
</li>`;
ul.insertBefore(li, ul.children[0]); //把li插入ul里
textarea.value = ``;//点击发布后 文本域内容清空
num.innerText = 0; //点击发布后 提示文本输入字数的数字为0
})
//点击关闭按钮，删除他的父元素 这套代码暂时实现不了关闭按钮删除元素的功能，后期会教 事件委托可以实现
the_del.addEventListener('click', function () {
the_del.parentNode.remove(); //点击关闭按钮后 把他的父元素删除
})
//文本域绑定输入事件， num的文本内容 = 文本域输入文字的长度
textarea.addEventListener('input', function () {
num.innerText = textarea.value.length
});
//定义个函数 装实时时间
function getTime() {
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth();
let day = date.getDate();
let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();
//当月，日，时，分，秒 数字小于10的时候前面加字符串“0”
month = month < 10 ? "0" + month : month;
day = day < 10 ? "0" + day : day;
h = h < 10 ? "0" + h : h;
m = m < 10 ? "0" + m : m;
s = s < 10 ? "0" + s : s;
//月份默认是0~11 ，所以显示会延迟一个月，所以+1
return `${year}-${+month+1}-${day} ${h}:${m}:${s}`
}
</script>
</body>
繁琐版：
<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>
<!-- <li>
<div class="info">
<img class="userpic" src="./images/9.5/06.jpg" />
<span class="username">张良</span>
<p class="send-time">发布于 2022-4-7 15:12:23</p>
</div>
<div class="content">sdfdf</div>
<span class="the_del">X</span>
</li> -->
</ul>
</div>
</div>
<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' },
];
//获取元素
let textarea = document.querySelector("#area"); //文本域
let num = document.querySelector(".useCount"); //提示文本域字数
let send = document.querySelector('#send');//发布按钮
let ul = document.querySelector('ul');//存放新发布的ul
//1.发布点击绑定事件
send.addEventListener('click', function () {
let use = getUser(); //获取的函数是 数组的随机数
let time = getFormat(); //获取的函数是 实现的时间
//新创建li标签
let li = document.createElement('li');
// li标签添加三大类：1
let info = document.createElement('div'); //新建div元素
info.classList.add("info") // 给div添加info 类名
//info 的div里加3个元素：1
let userpic = document.createElement("img");//新建图片
userpic.classList.add("userpic");//给图片添加类名
userpic.src = `${use.imgSrc}`
//info 的div里加3个元素：2
let username = document.createElement("span");//新建span
username.classList.add("username");//给span 添加类名
username.innerText = `${use.uname}`//设置文本内容
//info 的div里加3个元素：3
let sendtime = document.createElement("p");//新建p标签
sendtime.classList.add("send-time");//给p标签添加类名
sendtime.innerText = `发表于${time}`//设置文本内容
// li标签添加三大类：2
let content = document.createElement('div');//新建div元素
content.classList.add("content") //给div添加content 类名
content.innerText = `${textarea.value}`
// li标签添加三大类：3
let del = document.createElement('span');//新建span元素
del.classList.add("the_del") //给span 添加类名
del.innerText = `x`
info.append(userpic, username, sendtime); //添加到info的div里
li.append(info, content, del); //添加到li里面
ul.appendChild(li) //li添加到ul里
num.innerText = "0"; //文本域提示字数为0
textarea.value = ''; //文本域清空
//点击关闭按钮时 删除他的父元素
del.addEventListener('click', function () {
del.parentNode.remove();
});
});
//文本域 绑定输入事件
textarea.addEventListener('input', function () {
num.innerText = `${textarea.value.length}`
})
//定义个函数 是数组的随机数
function getUser() {
let index = Math.round(Math.random() * (dataArr.length - 1));
return dataArr[index];
}
//定义个函数 是实时的时间
function getFormat() {
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth();
let day = date.getDate();
let h = date.getHours();
let m = date.getMinutes();
let s = date.getSeconds();
//当月，日，时，分，秒 数字小于10的时候前面加字符串“0”
month = month < 10 ? "0" + month : month;
day = day < 10 ? "0" + day : day;
h = h < 10 ? "0" + h : h;
m = m < 10 ? "0" + m : m;
s = s < 10 ? "0" + s : s;
//月份默认是0~11 ，所以显示会延迟一个月，所以+1
return `${year}-${+month + 1}-${day} ${h}:${m}:${s}`
}
</script>
</body>
