父节点 parentNode 属性
<div class="father">
<div class="son">儿子</div>
</div>
<script>
// 查找son的父元素
let son = document.querySelector('.son')
// parentNode 属性
console.log(son.parentNode)//查找son的父节点
console.log(son.parentNode.parentNode)//查找father的父节点 body
</script>
查找子元素 children 查找所有的子元素
<ul>
<li>我是孩纸</li>
<li>我是孩纸</li>
<li>我是孩纸</li>
<li>我是孩纸</li>
<li>我是孩纸</li>
<li>我是孩纸</li>
</ul>
<script>
// 需求: 点击按钮,获取ul所有的子元素
let btn = document.querySelector('button')
let ul = document.querySelector('ul')
btn.addEventListener('click', function () {
// children 查找所有的子元素
console.log(ul.children)//所有的子节点 掌握
查找兄弟节点
previousElementSibling上一个兄弟节点 属性
nextElementSibling下一个兄弟节点 属性
创建和增加节点
创建节点
// 语法: document.createElement('标签名')
添加节点
// 语法:父元素.appendChild(要添加的元素)
作用:将元素放到父元素的里面的最后面
// 语法:父元素.insertBefore(要添加的元素, 在谁前面)
作用:将节点添加到指定的节点前面
克隆节点
// 语法:元素.cloneNode(布尔值)
// 参数 布尔值
// true 会克隆节点自身,后代节点会克隆的
// false 默认值 只会克隆节点自身,后代节点不会克隆的
删除节点
语法:父节点.removeChild(child)
时间对象
语法: new Date()
// 得到当前时间
let date = new Date()
console.log(date)
// 得到指定时间
let date2 = new Date('1998-1-11')
console.log(date2)
实践对象常用方法
// 时间对象方法
// 步骤:
// 1. 先创建时间对象
// 2. 时间对象 去调用方法得到年月日
let date = new Date()
console.log(date)
// 年
console.log(date.getFullYear())
// 月 0-11的结果 0表示1月份 11表示12月份 , 记得月份+1
console.log(date.getMonth()+1)
// 日
console.log(date.getDate())
// 时
console.log(date.getHours())
// 分
console.log(date.getMinutes())
// 秒
console.log(date.getSeconds())
// 星期几 0-6结果 0表示星期日 6表示星期六
console.log(date.getDay())
时间戳
// 时间戳:距离1970年总的毫秒数,值是独一无二的
// 使用场景:倒计时效果
// 方式1:时间对象调用getTime()
let d = new Date()//当前时间
console.log(d.getTime())
let d2 = new Date('2020')//指定时间
console.log(d2.getTime())
// 方式2:推荐 简单
console.log(+new Date()) //当前的时间时间戳
console.log(+new Date('2020')) //指定时间的时间戳
// 方式3:缺点:无法获取指定时间的时间戳
console.log(Date.now())