节点操作
DOM节点
- DOM书点
DOM树里每一个内容都称之为节点 - 节点类型
元素节点：所有的标签（body,div）;html是根节点
属性节点：所有的标签 比如 href
文本节点：所有的文本
查找节点
节点关系
- 父节点
- 子节点
- 兄弟节点
父节点查找
- parentNode属性
- 返回最近一级的父节点，找不到返回为null
子节点查找
- childNodes 获得所有子节点，包括文本节点（空格，换行），注释节点等
- children 仅获得所有元素节点；返回的是一个伪数组
兄弟节点查找
-
下一个兄弟节点
nextElementSibling 属性 -
上一个兄弟节点
previousElementSibling 属性
<body>
<button>点击</button>
<ul>
<li>第1个</li>
<li class="two">第2个</li>
<li>第3个</li>
<li>第4个</li>
</ul>
<script>
let btn = document.querySelector('button')
let two = document.querySelector('.two')
btn.addEventListener('click', function () {
// two.style.color = 'red'
two.nextElementSibling.style.color = 'red'
two.previousElementSibling.style.color = 'red'
})
</script>
</body>
增加节点
步骤：
- 创建节点
- 追加节点
创建节点
方法：
追加节点
- 插入到父元素的最后一个子元素
- 插入到父元素中某个子元素的前面
<body>
<ul>
<li>我是大毛</li>
<li>我是二毛</li>
</ul>
<script>
// 二毛 ul.children[1]
// 1. 创建新的标签节点
// let div = document.createElement('div')
// div.className = 'current'
let ul = document.querySelector('ul')
let li = document.createElement('li')
li.innerHTML = '我是wangming'
ul.insertBefore(li, ul.children[0])
// 2. 追加节点 父元素.appendChild(子元素) 后面追加
// ul.appendChild(li)
// 3. 追加节点 父元素.insertBefore(子元素， 放到那个元素的前面)
</script>
</body>
克隆节点
语法：
注意：该元素必须存在；
- 若为true,则代表克隆时会包含后代节点一起克隆
- 若为false,则代表克隆时不包含后代节点
- 默认为false
<body>
<ul>
<li>我是内容11111</li>
</ul>
<script>
let ul = document.querySelector('ul')
// 括号为空则默认为false 如果是false则不克隆后代节点
// 如果是true则克隆后代节点
let newUl = ul.cloneNode(true)
document.body.appendChild(newUl)
</script>
</body>
删除节点
语法：
注：
- 如果不存在父子关系则删除不成功
- 删除节点和隐藏节点有区别：隐藏节点还是存在的，但是删除，则从html中删除节点
时间对象
步骤：
- 实例化
- 时间对象方法
- 时间戳
实例化
获取当前时间
// new 实例化 时间对象
// 小括号为空可以得到当前的时间
let date = new Date()
获取指定时间
let last = new Date('2021-8-29 18:30:00')
