JavaScript全解析——DOM节点操作

DOM 树就是我们 html 结构中一个一个的节点构成的
●不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点

DOM节点

●节点：页面的所有组成部分成为节点
●注意：标签是节点，但是节点并不一定是标签
●DOM 的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点
●分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点）
●比如我们标签里面写的文字，那么就是文本节点
●写在每一个标签上的属性，就是属性节点

元素节点

●我们通过 getElementBy... 获取到的都是元素节点

属性节点

●我们通过 getAttribute 获取的就是元素的属性节点

文本节点

●我们通过 innerText 获取到的就是元素的文本节点

获取节点

childNodes
●作用：childNodes：获取某一个节点下 所有的子一级节点
●语法：元素对象.childNodes

●我们会发现，拿到以后是一个伪数组，里面有三个节点
●一个 text：从

一直到

中间有一个换行和一堆空格，这个是第一个节点，是一个文本节点
●一个 p：这个 p 标签就是第二个节点，这个是一个元素节点
●一个 text：从

一直到

中间有一个换行和一堆空格，这个是第三个节点，是一个文本节点
●这个时候就能看到我们有不同的节点类型了

children

●作用：children ：获取某一节点下所有的子一级 元素节点
●语法：元素对象.children

●我们发现只有一个节点了，因为 children 只要元素节点
●div 下面又只有一个元素节点，就是 p
●所以就只有一个，虽然只有一个，但是也是一个 伪数组

firstChild

●作用：firstChild：获取某一节点下子一级的 第一个节点
●语法：元素对象.firstChild

个是只获取一个节点，不再是伪数组了
●获取的是第一个
●第一个就是

一直到

的那个换行和空格，是个文本节点

lastChild

●作用：lastChild：获取某一节点下子一级的 最后一个节点
●语法：元素对象.lastChild

●只获取一个节点，不再是伪数组
●获取的是最后一个
●最后一个就是

一直到

之间的换行和空格，是个文本节点

firstElementChild

●作用：firstElementChild：获取某一节点下子一级 第一个元素节点
●语法：元素对象.firstElementChild

●只获取一个节点，不在是伪数组
●获取的是第一个 元素节点
●第一个元素节点就是 p 标签，是一个元素节点

lastElementChild

●作用：lastElementChild：获取某一节点下子一级 最后一个元素节点
●语法：元素对象.lastElementChild

●只获取一个节点，不在是伪数组
●获取的是最后一个 元素节点
●最后一个元素节点是

world

，是一个元素节点

nextSibling

●作用：nextSibling：获取某一个节点的 下一个兄弟节点
●语法：元素对象.nextSibling

●只获取一个节点，不在是伪数组
●获取的是 id="b" 这个 li 的下一个兄弟节点
●因为 id="b" 的下一个节点，是两个 li 标签之间的换行和空格，所以是一个文本节点

previousSibling

●作用：previousSibling：获取某一个节点的 上一个兄弟节点
●语法：元素对象.previousSibling

●只获取一个节点，不在是伪数组
●获取的是 id="b" 这个 li 的上一个兄弟节点
●因为 id="b" 的上一个节点，是两个 li 标签之间的换行和空格，所以是一个文本节点

nextElementSibling

●作用：nextElementSibling：获取某一个节点的 下一个元素节点
●语法：元素对象.nextElementSibling

●只获取一个节点，不在是伪数组
●获取的是 id="b" 这个 li 的下一个兄弟元素节点
●因为 id="b" 的下一个兄弟元素节点就是 id="c" 的 li，是一个元素节点

previousElementSibling

●作用：previousElementSibling：获取某一个节点的 上一个元素节点
●语法：元素对象.previousElementSibling

●只获取一个节点，不在是伪数组
●获取的是 id="b" 这个 li 的上一个兄弟元素节点
●因为 id="b" 的上一个兄弟元素节点就是 id="a" 的 li，是一个元素节点

parentNode

●作用：parentNode：获取某一个节点的 父节点
●语法：元素对象.parentNode

●只获取一个节点，不在是伪数组
●获取的是当前这个 li 的父元素节点
●因为这个 li 的父亲就是 ul，所以获取到的就是 ul，是一个元素节点

parentElement

●作用：parentElement获取某一节点的父元素节点
●语法：元素对象.parentElement

●只获取一个节点，不在是伪数组
●获取的是当前这个 li 的父元素节点
●因为这个 li 的父亲就是 ul，所以获取到的就是 ul，是一个元素节点

attributes

●作用：attributes：获取某一个 元素节点 的所有 属性节点

●获取的是一组数据，是该元素的所有属性，也是一个伪数组
●这个 li 有三个属性，id / a / test 三个，所以就获取到了这三个

节点属性

●在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性
○nodeType
○nodeName
○nodeValue
●我们已经知道节点会分成很多种，而且我们也能获取到各种不同的节点
●接下来我们就来聊一些各种节点之间属性的区别
●我们先准备一段代码

nodeType

●nodeType：获取节点的节点类型，用数字表示

nodeName●nodeType === 1 就表示该节点是一个 元素节点
●nodeType === 2 就表示该节点是一个 属性节点
●nodeType === 3 就表示该节点是一个 文本节点
●nodeType === 8 就表示该节点是一个 注释节点

nodeName

●nodeName：获取节点的节点名称

元素节点的 nodeName 就是 大写标签名
●属性节点的 nodeName 就是 属性名
●文本节点的 nodeName 都是 #text
●文本节点的 nodeName 都是 #comment

nodeValue

●nodeValue： 获取节点的值

●元素节点没有 nodeValue返回的是null
●属性节点的 nodeValue 就是 属性值
●文本节点的 nodeValue 就是 文本内容
●文本节点的 nodeValue 就是 注释内容

操作 DOM 节点

●我们所说的操作无非就是 增删改查（CRUD）
●创建一个节点（因为向页面中增加之前，我们需要先创建一个节点出来）
●向页面中增加一个节点
●删除页面中的某一个节点
●修改页面中的某一个节点
●获取页面中的某一个节点
创建一个节点
●createElement：用于创建一个元素节点
●语法：document.createElement('要创建的标签')
○要创建的标签可以是W3C规范内的标签，也可以的自定义标签

创建出来的就是一个可以使用的 div 元素
●createTextNode：用于创建一个文本节点
●语法：document.createTextNode('要写的文本内容')
●返回值：就是一个文本节点, 不是字符串

插入一个节点

●appendChild：是向一个元素节点的末尾追加一个节点
●语法： 父节点.appendChild(要插入的子节点)

●insertBefore：向某一个节点前插入一个节点
●语法： 父节点.insertBefore(要插入的节点，插入在哪一个节点的前面)

删除一个节点

removeChild
●removeChild：移除某一节点下的某一个节点
●语法：父节点.removeChild(要移除的子节点)

remove

●remove：移除某个节点，那个节点要移除直接调用这个方法
●语法：元素节点.remove('要移除的节点')

替换一个节点

●replaceChild：将页面中的某一个节点替换掉
●语法： 父节点.replaceChild(新节点，旧节点)

克隆一个节点

●cloneNode()把已经存在的节点一模一样的复制一份
●语法：节点对象.cloneNode(参数)
○参数是一个布尔值true或者false,不写就是默认的参数是false
○false代表只克隆本身的标签，标签里面的所有节点不可隆，也就的不可隆后代节点
○true代表全部可隆，本身节点以及所有的后代节点
●返回值：就的克隆好的一个新节点