js——DOM节点

一、DOM节点

1. 什么是DOM节点？

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

2. 节点类型

   > 元素节点：例如body、div等，html是根节点

   > 属性节点：属性，例如class href

   > 文本节点：所有的文本，例如标签里的文字

二、查找节点

 节点关系：父节点、子节点、兄弟节点 

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

    子元素.parentNode

2. 子节点查找：

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

（2）children属性，仅获得所有元素节点，返回的还是一个伪数组

     父元素.children

 3. 兄弟节点查找

（1）下一个兄弟节点：nextElementSibling属性

（2）上一个兄弟节点：previousElementSibling属性

三、增加节点

步骤：（1）创建一个新节点（2）把创建的新节点放入指定元素内部

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

    方法：document.creatElement('标签名')

2. 追加节点：要想在界面看到，要将新节点插入到某个父元素中

（1）插入到父元素的最后一个元素：父元素.appendChild(要插入的元素)

（2）插入到父元素中某个子元素的签名：父元素.insertBefore(要插入的元素，在哪个元素前面)

3. 克隆节点：复制一个原有的节点

    > 方法：元素.cloneNode(布尔值)

    > 注意：cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

                 >  若为true:克隆时会包含后代节点一起克隆

                 >  若为false:克隆时不包含后代节点

                 > 默认为false

四、删除节点

 在js原生DOM操作中，要删除元素必须通过父元素删除

    > 方法：父元素.removeChild(要删除的元素)

    > 注意：(1) 若不存在父子关系删除不成功。

    (2) 删除节点和隐藏节点（display:none）有区别：隐藏节点节点还是存在的，但是删除节点节点会从html中被删除。