笔记-DOM节点

节点操作

一、DOM节点

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

• 节点类型
  – 元素节点：所有的标签，html 称为根节点，也叫根标签；
  – 属性节点：所有的属性；
  – 文本节点：所有的文本；
  – 其他节点：。

二、查找节点

2.1 父节点查找

返回最近一级的父节点 ，如果没有返回null。

语法:

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

2.2 子节点查找:

• 父元素.childNodes（了解） ： 获得所有子节点、包括文本节点（空格、换行）、注释节点等,一般不使用。

• 父元素.children ： 仅获得所有元素节点；返回的数据以伪数组形式存在。

语法：

// 父元素.children
<div class="father">
    <div class="son"></div>
</div>
<script>
    let father = document.querySelector('.father')
    console.log(father.children)
</script>

2.3 兄弟节点查找

• 查找下一个兄弟节点：

兄弟元素.nextElement（）  	

• 查找上一个兄弟节点：

兄弟元素.previousElementSibling

三、增加节点

一般增加节点分为两步：创建标签节点 和 追加节点。

3.1 创建节点

语法：

document.createElement('标签名')

3.2 追加节点

3.2.1 追加到父元素中某个子元素的前面

语法：

父元素.insertBefore(追加的元素，追加在哪个元素前面）

例：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    // 1.获取对象 创建节点
    let ul = document.querySelector('ul')
    let li = document.createElement('li')
    li.innerHTML = '0'

    // 2.追加到父元素中第一个
    ul.insertBefore(li, ul.children[0])
</script>

3.2.2 追加到父元素中子元素的最后

语法：

父元素.appendChild('要插入的元素')

例：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<script>
    // 1.获取对象 创建节点
    let ul = document.querySelector('ul')
    let li = document.createElement('li')
    li.innerHTML = '4'

    // 2.追加到父元素的最后一个元素
    // 获取过来的元素追加时不需要添加 ' ' 
    ul.appendChild(li)
</script>

3.3 克隆节点（特殊情况）

• 场景：先复制原有节点，再追加到指定位置。
  –先使用cloneNode属性复制某节点；
  –再使用上述追加节点方法追加。

语法：

// 值为空也代表false
被复制元素.cloneNode(true/false)

四、删除节点

• 在 JS 原生DOM操作中，要删除元素必须通过父元素删除。
• 注意：
  – 不存在父子关系则删除不成功；
  – 删除节点和隐藏节点：
  隐藏节点：表示只是隐藏该节点，但是在html中仍然存在；
  删除节点：表示该节点不再存在于html中。

语法：

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

例：

<!-- 要求： 点击按钮，删除显示文字 -->
<button>点击试试</button>
<ul>
    <li>我记得我曾经是个酷盖。</li>
    <li>我现在仍是个酷盖。</li>
</ul>

<script>
    // 获取元素 删除某元素要获取其父元素
    let btn = document.querySelector('button')
    let ul = document.querySelector('ul')

    // 注册事件
    btn.addEventListener('click', function () {
        // 删除子元素 
        ul.removeChild(ul.children[0])
    })
</script>

---