JS-DOM节点操作

JS-DOM节点操作

DOM节点

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

节点类型

元素节点

所有的标签 比如 body div
html 是根节点

属性节点

所有的属性 比如 href

文本节点

所有的文本

查找节点

父节点查找

parentNode 属性
返回最近一级的父节点 找不到的返回null
语法：子节点.parentNode

    <div class="father">
        <div class="son">
            儿子
        </div>
    </div>
    <script>
        let son=document.querySelector('.son');
        console.log(son.parentNode)
    </script>

子节点查找

childNode

获取所有子节点、包括文本节点(空格、换行)、注释节点等
语法：父元素.childNode

<button>点击</button>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
    <script>
        let but=document.querySelector('button');
        let ul=document.querySelector('ul');
        but.addEventListener('click',function(){
            console.log(ul.childNodes);
        })
    </script>

children

仅获取所有元素节点
返回的还有一个伪数组
语法：父元素.children

<button>点击</button>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
    <script>
        let but=document.querySelector('button');
        let ul=document.querySelector('ul');
        but.addEventListener('click',function(){
            console.log(ul.children);
        })
    </script>

兄弟节点

兄弟关系查找：
1.下一个兄弟节点
nextElementSibling 属性

<button>点击</button>
    <ul>
        <li>11</li>
        <li class="test">22</li>
        <li>33</li>
    </ul>
    <script>
        let but=document.querySelector('button');
        let test=document.querySelector('.test');
        but.addEventListener('click',function(){
            test.nextElementSibling.style.color='red'
            console.log(test.nextElementSibling);
        })
    </script>

2.上一个兄弟节点
previousElementSibling 属性

<button>点击</button>
    <ul>
        <li>11</li>
        <li class="test">22</li>
        <li>33</li>
    </ul>
    <script>
        let but=document.querySelector('button');
        let test=document.querySelector('.test');
        but.addEventListener('click',function(){
            test.previousElementSibling.style.color='red'
            console.log(test.previousElementSibling);
        })
    </script>

增加节点

创建节点

即创造出一个新的网页元素，在添加到网页内，一般先创建节点，然后再插入节点
创建元素节点语法：document.createElement(‘标签名’)

<script>
        let div=document.createElement('div');
        console.log(div);
</script>

追加节点

要想在界面看到，还得插入到某个父元素中
插入到父元素的最后一个子元素
语法：父元素.appendChild(要插入的元素)

<ul></ul>
    <script>
        let ul=document.querySelector('ul');
        let li=document.createElement('li');
        li.innerHTML='1111';
        ul.appendChild(li)
        console.log(ul)
    </script>

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

<ul>
    <li>22</li>
    <li class="test">444</li>
</ul>
    <script>
        let ul=document.querySelector('ul');
        let li=document.createElement('li');
        li.innerHTML='111'
        ul.insertBefore(li,ul.children[1])
        console.log(ul)
    </script>

克隆和删除节点

克隆节点

语法：元素.cloneNode(布尔值)
cloneNode会克隆出一个根源标签一样的元素,括号内传入布尔值
若为true,则代表克隆时会包含后代节点一起克隆
若为false,则代表克隆时不包含后代节点
默认为false

    <ul>
        <li>11</li>
    </ul>
    <script>
        let ul=document.querySelector('ul');
        let newUl=ul.cloneNode(true)
        document.body.appendChild(newUl)
        console.log(newUl)
    </script>

删除节点

在JavaScript原生DOM操作中，要删除元素必须通过父元素删除
语法：父元素.removeChild(要删除的元素)

<button>点击</button>
    <ul>
        <li>11</li>
    </ul>
    <script>
        let btn=document.querySelector('button')
        let ul=document.querySelector('ul');
        btn.addEventListener('click',function(){
            ul.removeChild(ul.children[0])
            console.log(ul.children);
        })
    </script>

点击按钮后

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

时间对象

事件对象：用来表示时间的对象
作用：可以得到当前系统的时间
在代码中发现 new 关键字时，一般将这个操作称为 实例化
获取当前时间：let data=new Data()

<script>
        let data=new Date();
        console.log(data);
</script>

获取指定时间：let data=new Date(‘2022-5-4’)

常见的获取时间格式的方法