JavsScriptDOM节点

DOM节点

节点类型

元素节点

1、所有的标签 body、div、a

2、html是根节点

属性节点

所有的属性 href id class

文本节点

节点的增删查改

父节点查找

方法名.parentNode

    <div class="dd">
        <div class="bb">x</div>
    </div>

    <script>
        const b=document.querySelector('.bb')
        // 返回子节点 返回dom对象
        console.log(b);
        // 返回父节点 返回dom对象
        console.log(b.parentNode);
    </script>

子节点查找

方法名.children

    <ul>
        <li>
            1
        </li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <script>
        // const ul = document.querySelector('ul')
        // // 得到伪数组
        // console.log(ul.children);
        // 获取第二个li
        const li2 = document.querySelector('ul li:nth-child(2)')
        // 上一个兄弟节点
        console.log(li2.previousElementSibling);
        //下一个兄弟节点
        console.log(li2.nextElementSibling);
    </script>

兄弟节点查找

查找前一个节点

方法名.previousElementSiling

查找后一个节点

方法名.nextElementSiling

    <ul>
        <li>
            1
        </li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
        const li2 = document.querySelector('ul li:nth-child(2)')
        // 上一个兄弟节点
        console.log(li2.previousElementSibling);
        //下一个兄弟节点
        console.log(li2.nextElementSibling);

添加节点

先创建节点，在添加节点

创建节点：createElement('div') //创建div节点

insertBefore(插入的元素，插入到那个元素的前面)//插入节点

追加节点：元素名.insertBefore('div')

追加节点：元素名.appendChild('div') 往前加

        // 1.创建节点
        const div = document.createElement('div')
        // 2.将节点追加到body中 appendChild 插入到这个父元素后面
        document.body.appendChild(div)

        const ul = document.querySelector('ul')
        // createElement创建节点
        const li = document.createElement('li')
        li.innerHTML = 'JUSTDOIT'
        // ul.appendChild(li)
        // insertBefore(插入的元素，插入到那个元素的前面)
        ul.insertBefore(li,ul.children[0])

克隆节点

特殊情况下，我们新增节点

1.复制一个原有节点
2.把复制的节点放入指定的元素内部
   克隆一个已有的元素节点
   元素.cloneNode(布尔值)---会克隆出一个跟原标签一样的元素，括号內传入布尔值
   若为true 则代表篇克隆时会包含后代节点一起克隆
   若为false 则代表克隆时不包含后代节点
  默认为false

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
      const ul = document.querySelector('ul')
        // 克隆第一个li节点
        const li1 = ul.children[0].cloneNode(true)
        console.log(li1);
        // 追加到列表
        ul.appendChild(li1)

删除节点

删除元素必须通过父元素删除---不存在父子关系则删除不成功

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

    <ul>
        <li>JUSTODIT</li>
    </ul>
    <script>
    const ul=document.querySelector('ul')
    ul.removeChild(ul.children[0])
    </script