节点操作

一、DOM节点

1.DOM节点

DOM树里每一个内容都称之为节点

2.节点类型

a.元素节点

•所有的标签比如 body、 div

• html 是根节点

b.属性节点

•所有的属性比如 href

c.文本节点

•所有的文本

d.其他

二、查找节点

1.父节点查找

parentNode属性
返回最近一级的父节点，找不到返回null

子元素.parentNode

2.子节点查找

childNodes:获得所有子节点，包括文本节点（空格、换行）、注释节点等。（了解即可）

children：仅获得所有子元素节点，返回的还是一个伪数组。（重点了解）

父元素.children

3.兄弟关系查找

下一个兄弟节点：nextElementSibling属性
上一个兄弟节点：previousElementSibling属性

三、增加节点

1.创建节点

即创建一个心得网页元素，再添加到网页内，一般先创造节点，然后插入节点；

创建元素节点方法：

//创造一个新的元素节点
document.createElrment('标签名')

2.追加节点

插入到父元素最后一个子元素：

//插入到这个父元素的最后
父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面：

//插入到某个子元素的前面
父元素.insertBefore(要插入的元素,在哪个元素前面)

3.克隆节点

  <style>
        div{
            width: 200px;
            height: 200px;
            background-color: aqua;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div>
        <button>点击</button>
    </div>

    <script>
        //语法 元素.cloneNode(布尔值) 括号内不加内容默认为false

        let div = document.querySelector('div')

        //克隆
        let div1 = div.cloneNode() //浅克隆 不会克隆后代节点
        // let div1 = div.cloneNode(true) //深克隆 会克隆后代节点

        //插入
        document.body.appendChild(div1)
    </script>

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

若为true，则代表克隆时会包含后代节点一起克隆--深拷贝
若为false，则代表克隆时不包含后代节点--浅拷贝
默认为false

四、删除节点

语法：

父元素.removeChild(要删除的元素)

例子：

<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')
        //点击删除事件
        button.addEventListener('click',function(){
            let li = document.querySelector('li:nth-child(1)')
            ul.removeChild(li)

            //删除自己
            // ul.remove()
        })
    </script>
</body>

删除自己：元素.remove()

注：

如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

时间对象

1.实例化

在代码中发现了 new 关键字时，一般将这个操作称为实例化

a.获得当前时间

let date = new Date()

b.获得指定时间

let date = new Date('1949-10-01')

2.时间对象方法

方法	作用	说明
getFullYear()	获得年份	获得四位数年份
getMonth()	获得月份	取值为0~11
getDate()	获得月份中的每一天	不同月份取值不同
getDay()	获得星期	取值为0~6，星期日为0
getHours()	获得小时	取值为0~23
getMinutes()	获得分钟	取值为0~59
getSeconds()	获得秒数	取值为0~59

例：

  <script>
        function time() {
        let date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let hour = date.getHours()
        let minute = date.getMinutes()
        let second = date.getSeconds()

        console.log(`${year}-${month}-${day} ${hour}:${minute}:${second}`)
      }
      setInterval(time,1000)
    </script>

3.时间戳

什么是时间戳

是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

三种方式获取时间戳

1.使用getTime()方法

//实例化
let data = new Date()
//获取时间戳
console.log(data.getTime())

2.简写 +new Date()

console.log(+new Date())

3.使用Date.now()

console.log(Date.now())

无需实例化
但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳

注：时间戳可以用来快速获取随机数

节点操作（节点的增删改查）、时间对象（时间对象方法、时间戳）