JavaScript-节点操作

节点操作

DOM节点

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

节点类型：

• 元素节点
  • 所有的标签 比如body、div
  • html时跟节点
• 属性节点
  • 所有的属性，比如href
• 文本节点
  • 所有的文本
• 其他

查找节点

节点的关系：针对的找亲戚返回的都是对象

• 父节点
• 子节点
• 兄弟节点

父节点查找

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

//返回父元素的DOM对象
子元素.parentNode

子节点查找

• childNodes

  • 获得所有子节点、包括文本节点（空格、换行）、注释节点等

    父元素.childNodes
    

• children 属性（重点）

  • 仅获得所有元素节点

  • 返回的还是一个伪数组

    父元素.children
    

兄弟节点查找

• 下一个兄弟节点

  • nextElementSibiling 属性

    元素.nextElementSibiling
    

• 上一个兄弟节点

  • previousElementSibling 属性

    元素.previousElementSibling
    

增加节点

很多情况下，我们需要在页面中增加元素。比如点击发布按钮，可以新增一条信息，一般情况下，我们新增节点按照如下操作

1. 创建一个新的节点
2. 把创建的节点放入到指定的元素内部

创建节点

即创造出一个新的网页元素，在添加到网页内，一般先创建节点，然后插入节点

创建元素节点的方法：

document.creatElement('标签名');
const newTag = document.creatElement('标签名');

追加节点

想要在界面看到，还需要擦汗如到某个父元素中

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

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

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

父元素.insertBefore(要插入的元素，在哪个元素前面)；

克隆节点

复制一个原有的节点，把复制的节点放入到指定的元素内部

语法：

元素.cloneNode(布尔值)；
//true：克隆是会包含后代节点一起克隆	深克隆
//false：克隆时不会包含后代节点（默认值）	浅克隆

删除节点

若一个节点在页面中已经不需要时，可以删除他，删除节点必须通过父元素删除

语法：

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

注意：

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

如果不存在父子关系则删除不成功

• 删除节点和隐藏节点（display：none）有区别
  • 隐藏节点：节点还是存在的
  • 删除节点：从html中删除