JS节点操作

一、了解 DOM 节点

我们的页面是由一个一个的节点组成的
页面的每一个组成部分都是一个节点

1. document
   一个页面中最大的节点，只能有一个
   承载所有节点的容器，不属于元素
   根节点
2. html
   一个页面中最大的元素节点
   承载所有其他节点
   根元素节点
3. 元素节点
   head / body / div / ul / ol /table /…
   只是不同的标签在页面中的表现形式不一样
   特点：是页面的标签
4. 文本节点
   写在标签对里面的内容
   每一段文本内容都是一个文本节点
   包含 空格 和 换行
   一般作为元素节点的子节点存在，用来表示该元素节点在页面上显示的内容
5. 属性节点
   写在页面上的每一个属性
   注意：属性节点 不作为独立节点 出现， 必须依赖于元素
6. 注释节点
   页面中书写的注释内容
   作为独立节点出现
   作为说明文本使用
   

二、获取节点

1. 获取节点的方法

1-1. 非常规标签

    (1). html

document.documentElement

    (2). head

document.head

    (3). body

document.body

1-2. 常规标签

    (1). getElementById()

语法： 查找范围.getElementById(‘id名称’)

查找范围： document 或者 一个元素

返回值：
        如果有这个 id 名称匹配的元素，就是这个元素；
        如果没有，就是 null

    (2). getElementsByTagName()

语法：查找范围.getElementsByTagName(‘标签名’)

返回值：
        是一个伪数组（数组常用方法用不了）
        如果有这个标签名匹配的元素， 有多少获取多少；
        如果没有，那么 返回一个空的伪数组

    (3). getElementsByClassName()

语法：查找范围.getElementsByClassName(‘类名’)

返回值：
        是一个伪数组（数组常用方法用不了）
        如果有这个标签名匹配的元素， 有多少获取多少；
        如果没有，那么 返回一个空的伪数组

    (4). getElementsByName()

语法：查找范围.getElementsByName(‘元素 name 属性的值’)

返回值：
        是一个伪数组（数组常用方法用不了）
        如果有元素的 name属性的值 匹配， 有多少获取多少；
        如果没有，那么 返回一个空的伪数组

    (5). querySelector()

语法：查找范围.querySelector(‘选择器’)

选择器： 能在 CSS 里面使用的选择器，这里都可以写

返回值：
        如果找到选择器匹配的元素， 返回第一个找到的内容
         如果没有选择器匹配的元素，返回null
注意：　IE低版本不支持

    (6). querySelectorAll()

语法： 查找范围.querySelectorAll(‘选择器’)

选择器： 能在 CSS 里面使用的选择器，这里都可以写

返回值：
        是一个伪数组（数组常用方法用不了）
        如果找到选择器匹配的元素， 有多少获取多少
         如果没有选择器匹配的元素，返回一个空的伪数组
注意：　IE低版本不支持

2. 获取节点的属性

2-1. childNodes

语法： 元素.childNodes
得到： 元素的所有 子节点 （伪数组）

2-2. children

语法： 元素.children
得到： 元素的所有 子元素节点 （伪数组）
拿到的是 子节点 里面的 所有元素节点

2-3. firstChild

语法： 元素.firstChild
得到： 元素的第一个 子节点

2-4. firstElementChild

语法： 元素.firstElementChild
得到： 元素的第一个 子元素节点

2-5. lastChild

语法： 元素.lastChild
得到： 元素的最后一个 子节点

2-6. lastElementChild

语法： 元素.lastElementChild
得到： 元素的最后一个 子元素节点

2-7. previousSibling

语法： 元素.previousSibling
得到： 元素的上一个 兄弟节点（哥哥节点）

2-8. previousElementSibling

语法： 元素.previousElementsibling
得到： 元素的上一个 兄弟元素节点（哥哥元素）

2-9. nextSibling

语法： 元素.nextSibling
得到： 元素的下一个 兄弟节点（弟弟节点）

2-10. nextElementSibling

语法： 元素.nextElementSibling
得到： 元素的下一个 兄弟元素节点（弟弟元素）

2-11. parentNode

语法： 元素.parentNode
得到： 该元素的 父节点 （大部分的父节点是父元素）
父节点： 大部分的时候是元素，有特效的 document （HTMl 的 父节点 就是 document）

2-12. parentElement

语法： 元素.parentElement
得到： 该元素的 父元素节点

2-13. attributes

语法： 元素.attributes
得到：该元素的所有 属性节点

三、节点属性

1. 节点属性

用来描述这个节点的信息
不同的节点有相同的属性名，但是值不一样

1-1. nodeType

以数字的形式来表示一个节点的类型

元素节点： 1
属性节点： 2
文本节点： 3
注释节点： 8

1-2. nodeName

节点的名称
元素节点： 大写标签名（全大写）
属性节点： 属性名
文本节点： 所有 文本节点 全部叫做 #text
注释节点： 所有 注释节点 全部叫做 #comment

1-3. nodeValue

节点的值
元素节点： null
属性节点： 属性值
文本节点： 文本内容（包含 空格 和 换行 ）
注释节点： 注释内容（包含 空格 和 换行）

2. 属性节点

元素身上放的属性
每一个属性都是一个节点

四、创建节点

1. createElement()

语法：document.createElement(‘标签名’)
返回值： 一个 元素节点

2. createAttribute()

语法：document.createAttribute(‘属性名’)
返回值： 一个 属性节点

3. createTextNode()

语法：document.createTextNode(‘文本内容’)
返回值： 一个 文本节点，不是字符串

4.createComment()

语法：document.createComment(‘注释内容’)
返回值： 返回一个 注释节点

五、插入节点

把 一个节点 插入到 另一个节点 里面

1. appendChild()

语法： 父节点.appendChild(子节点)
作用： 把子节点插入到父节点里面，放在最后一个节点的位置

2. insertBefore()

语法：父节点.insertBefore(要插入的子节点, 哪一个子节点前面)
作用： 把 子节点 插入到 指定父节点 的 指定子节点 前面

六、删除节点

1. removeChild()

语法：父节点.removeChild(子节点)
作用： 把 子节点 从 父节点 里面 移出

2. remove()

语法： 节点.remove()
作用： 把 自己移出父节点

七、替换节点

用一个节点替换一个已经存在的节点
可以直接替换页面元素，也可以直接替换我们自己创建的节点

replaceChild()

语法： 父节点.replaceChild(新节点， 旧节点)
作用： 在父节点下，用 新节点 替换 旧节点

八、克隆节点

把某一个节点复制一份一摸一样的出来

cloneNode()

语法： 节点.codeNode(参数)
        参数选填，默认是 false ，不克隆后代节点
        我们可以选填 true ， 表示克隆后代节点
返回值： 一个克隆好的节点