JavaScriptDOM操作：节点管理与增删,-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_74891783/article/details/132110514

15.1 DOM节点

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

2.节点类型
●元素节点
所有的标签比如body、div
html是根节点
●属性节点
所有的属性比如href
●文本节点
所有的文本

15.2查找节点

1.父节点查找：
parentNode属性
返回最近一级的父节点找不到返回为null

子元素.parentNode

2.子节点查找：
●childNodes
获得所有子节点、包括文本节点(空格、换行)、注释节点等
●children属性(重点)
仅获得所有元素节点
返回的还是一个伪数组
●语法

父元素.children

3.兄弟关系查找：
●下一个兄弟节点.
nextElementSibling 属性
●上一个兄弟节点
previousElementSibling 属性

15.3增加节点（重要）

1.创建节点
●即创造出一个新的网页元素, 再添加到网页内，一般先创建节点，然后插入节点
●创建元素节点方法:

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

2.追加节点
要想在界面看到，还得插入到某个父元素中
●插入到父元素的最后一个子元素:

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

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

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

【示例】

<body>
    <ul>
        <li>第一个</li>
    </ul>
    <script>
        // 1.创建节点
        const li = document.createElement('li')
        const ul = document.querySelector('ul')
        li.innerHTML = '第二个'
        // 2.追加节点 作为最后的元素
        ul.appendChild(li)
        // 3.追加节点 放在某个元素前面
        ul.insertBefore(li, ul.children[0])
    </script>
</body>

3.克隆节点

//克隆一个已有的元素节点
元素.cloneNode(布尔值)

cloneNode会克隆出一个跟原标签一样的元素, 括号内传入布尔值
➢若为true, 则代表克隆时会包含后代节点一起克隆
➢若为false，则代表克隆时不包含后代节点
➢默认为false

15.4删除节点

若一个节点在页面中已不需要时，可以删除它
在JavaScript原生DOM操作中，要删除元素必须通过父元素删除
●语法

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

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

15.节点操作

15.1 DOM节点

15.2查找节点

15.3增加节点（重要）

15.4删除节点