节点操作
什么是DOM节点？ DOM树里每一个内容都称为节点
DOM节点的分类
1.元素节点 比如div标签
2.属性节点 比如class属性
3.文本节点 比如标签里面的文字
父节点查找
parenNode
返回最近一级的父节点 找不到返回为null
子元素.parenNode
子节点查找
childNodes
获得所有子节点
children（重点）
获得所有子元素节点
返回的还是伪数组
父元素.children(childNodes)
<body>
<div class="erweima">
<!-- 我是注释 -->
abc
<span>aaa</span>
<img src="images/code.png" alt="" />
<span>X3</span>
</div>
<script>
// 父找子
let erweima = document.querySelector('.erweima')
// childNodes:获取所有子节点
// console.log(erweima.childNodes) //
// children:只会获取元素节点
console.log(erweima.children) //
</script>
</body>
兄弟节点查找
查找下一个兄弟节点
nextElementSibling
查找上一个兄弟节点
previousElementSibling
<body>
<div class="erweima">
<span>我是span</span>
<p>我是p元素</p>
aaa
<img src="images/code.png" alt="" />
<span> X3 </span>
<h3>我是h3</h3>
</div>
<script>
let p = document.querySelector('p')
console.log(p.nextElementSibling) // img
console.log(p.previousElementSibling) // span
console.log(p.parentElement) // erweima
console.log(p.parentNode) // erweima
// console.log(p.nextSibling) // aaa
// console.log(p.previousSibling) // aaa
</script>
</body>
增加节点
创造一个新的元素节点 document.createElement('标签名')
插入到这个父元素的最后 父元素.appendChild(要插入的元素)
<body>
<button>来一个p元素</button>
<div class="box">
</div>
<script>
let btn = document.querySelector('button')
let box = document.querySelector('.box')
btn.addEventListener('click', function () {
let newP = document.createElement('p')
newP.innerText = '我是新创建的p元素'
box.appendChild(newP)
})
</script>
插入到这个父元素的前面 父元素.insertBefore(要插入的元素，在哪个元素前面)
<body>
<button>来一个p元素</button>
<div class="box">
<p>123</p>
</div>
<script>
let p = document.querySelector('p')
btn.addEventListener('click', function () {
let newP = document.createElement('p')
newP.innerText = '我是新创建的p元素'
box.insertBefore(newP, p)
})
</script>
克隆节点
克隆一个已有的元素节点 元素.cloneNod(布尔值)（复制节点并把复制的节点放到指定元素的内部）
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true，则代表克隆时会包含后代节点一起克隆--深拷贝
若为false，则代表克隆时不包含后代节点--浅拷贝
默认为false
删除节点
父元素.removeChild(要删除的元素)注意：（如果不存在父子关系无法删除）
<body>
<table border="1" width="400">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>20</td>
<td>
<button>删除1</button>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>30</td>
<td>
<button>删除2</button>
</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>40</td>
<td>
<button>删除3</button>
</td>
</tr>
</tbody>
</table>
<script>
let btns = document.querySelectorAll('button')
let tbody = document.querySelector('tbody')
//因为是伪数组，所以需要遍历得到删除按钮
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function() {
//找到btns的的父亲的父亲，也就是tr，点击删除时才能删除一整行
tbody.removeChild(btns[i].parentNode.parentNode)
})
}
时间对象
时间戳
<script>
实例化
let date = new Date()
获取时间戳(得到的是毫秒)
console.log(date.getTime());
简写
console.log(+new Date());
</script>
