一、节点
1、DOM节点
2、查找节点
父节点、子节点、兄弟节点
<div>
<p>段落</p>
<img src="05.jpg">
<h3>标题</h3>
</div>
<script type="text/javascript">
let div = document.querySelector('div');
// 查找子节点：
// childNodes：获取所有子节点、文本子、元素子
// console.log( div.childNodes[0] );
// console.log( div.childNodes[1] );
// children：查找元素子
// console.log( div.children );
// console.log( div.firstElementChild );
// console.log( div.lastElementChild );
// nodeType：查看节点类型：如果是元素节点1，如果是文本节点3
// console.log( div.childNodes[0].nodeType );
// console.log( div.childNodes[1].nodeType );
// nodeName：查看节点名称：文本节点：#text、元素节点返回大写的标签名
// console.log( div.childNodes[0].nodeName );
// console.log( div.childNodes[3].nodeName );
// nodeType：查看节点类型
// nodeName：查看节点名称(tagName)
// 父节点获取子节点
// childNodes：查找所有子
// children：查找元素子
// firstElementChild
// lastElementChild
// 节点属性：
// NodeType
// nodeName(tagName)
let img = document.querySelector('img');
// 兄弟节点关系：
// 前一個元素兄弟節點
// console.log( img.previousElementSibling );
// 下一個元素兄弟節點
console.log( img.nextElementSibling );
</script>
2、增加节点
分为两步：先创建后追加
document.createElement('标签名')
父元素.appendChild(要插入的元素) //插入到父元素之后
父元素.insertBefore(要插入的元素，在那个元素前面) //插入到父元素之前
<div>
<h1>标题</h1>
</div>
<input type="button" value="点击">
<script type="text/javascript">
// 点击按钮，给div里面增加一个img
let btn = document.querySelector('input');
let div = document.querySelector('div');
let h1 = document.querySelector('h1');
btn.addEventListener('click', function () {
// 创建标签：document.createElement('标签名')
let images = document.createElement('img');
// console.log( images );
// 设置src
images.src = '05.jpg';
// 追加节点：
// 父.appendChild(子)
// div.appendChild(images);
// 插入节点
// 父.insertBefore(新, 旧);
div.insertBefore(images, h1);
});
</script>
<input type="button" value="点击">
<div class="box">
<img src="05.jpg">
</div>
<script type="text/javascript">
// 克隆：元素.cloneNode(true);
// 获取元素
let btn = document.querySelector('input');
let div = document.querySelector('div');
// 添加事件
btn.addEventListener('click', function () {
// 克隆div
let d = div.cloneNode(true);
// console.log( d );
// 追加到body里面
document.body.appendChild(d);
});
</script>
3、删除节点
<input type="button" value="点击">
<div>
<img src="05.jpg">
</div>
<script type="text/javascript">
// 语法：父.removeChild(子);
// 获取元素：
let btn = document.querySelector('input');
let img = document.querySelector('img');
// let div = document.querySelector('div');
// 添加事件
btn.addEventListener('click', function () {
// div.removeChild(img);
img.parentNode.removeChild(img);
});
</script>
二、时间对象
1、实例化
获取当前时间: let date = new Date()
获取指定时间：let date = new Date('1999-09-01')
2、时间对象方法
<div>时间</div>
<script type="text/javascript">
// let n = new Date();
// console.log( n.toLocaleString() );
// YYYY-MM-DD HH:mm:ss
// 获取元素
let div = document.querySelector('div');
setInterval( function () {
showTime();
}, 1000 );
showTime();
function showTime () {
// 创建时间日期
let n = new Date();
// 获取
let year = n.getFullYear();
let month = n.getMonth() + 1;
let date = n.getDate();
let hours = n.getHours();
let minutes = n.getMinutes();
let seconds = n.getSeconds();
// 设置内容之前查看是否需要前面补0操作
month = month < 10 ? '0' + month : month;
date = date < 10 ? '0' + date : date;
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
// 设置内容
div.innerHTML = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
}
</script>
3、时间戳
<script type="text/javascript">
// 创建时间对象
let n1 = new Date();// 当前时间日期
let n2 = new Date('2000-1-1 6:6:6');// 指定时间日期
let n3 = new Date(2000, 1, 1, 6, 6, 6)// 指定时间日期
// toLocaleString：把时间换成本地格式
console.log( n1.toLocaleString() );
console.log( n2.toLocaleString() );
console.log( n3.toLocaleString() );
let n = new Date();// 当前时间日期
// console.log( n.toLocaleString() );
// 获取指定的值
// let re = n.getFullYear(); // 获取年份
// let re = n.getMonth() + 1; // 获取月份
// let re = n.getDate(); // 获取日期
// let re = n.getHours(); // 获取小时
// let re = n.getMinutes();// 获取分钟
// let re = n.getSeconds(); // 获取秒数
// let re = n.getMilliseconds();// 获取毫秒数
// let re = n.getDay(); // 获取星期
// 设置
n.setFullYear(2345);
console.log( n.getFullYear() );
// 时间戳：
// let n = new Date();// 当前时间日期
// // 获取时间戳
// let re = n.getTime();
// console.log( re );
// console.log ( +new Date() );
console.log( Date.now() );
</script>
三、重绘和回流
影响到布局了，就会产生回流
