JS操作节点_js删除最后一个子节点

节点

节点拥有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)这三个基本属性

元素节点 nodeType为1
属性节点 nodeType为2
文本节点 nodeType为3(文本节点包含文字、空格、换行等)

nodeName 元素节点的节点名称是大写的标签名；文本节点的节点名称是#text；注释节点的节点名称是#comment；属性节点的节点名称是属性名

nodeValue 元素节点没有节点值；文本节点的值就是文本内容；注释节点的内容就是注释的内容；属性节点的内容就是属性的值。

childNodes/过滤空白节点

1.父节点parentNode

element.parentNode 得到的是离元素最近的父级节点

2.子节点

2.1 子节点childNode(标准)

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合

注：返回值里面包含了所有的子节点，包含元素节点，文本节点等。

如果只想要获取里面的元素节点，则需要专门处理(封装函数)，所以一般不提倡使用childNodes

第一个子元素节点(兼容性问题)

parentNode.firstElementChild 返回第一个子元素节点，找不到返回null

最后一个子元素节点(兼容性问题)

parentNode.lastElementChild 返回最后一个子元素节点，找不到返回null

2.2 子节点children(非标准)

parentNode.children 返回元素子节点的集合。


第一个及最后一个子元素节点(兼容性写法)

parentNode.children[0]; 第一个子元素节点

parentNode.children[parentNode.children.length - 1]; 最后一个子元素节点

3.兄弟节点

node.nextSibling下一个兄弟节点

node.nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null。(包含所有节点)

node.previousSibling上一个兄弟节点

node.previousSibling 返回当前元素的上一个兄弟节点，找不到则返回null。(包含所有节点)

node.nextElementSibling下一个兄弟元素节点(兼容问题)

node.nextElementSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。

node.previousElementSibling下一个兄弟元素节点(兼容问题)

node.previousElementSibling 返回当前元素的上一个兄弟元素节点，找不到则返回null。

4.创建节点

document.createElement(‘tagName’)

document.createElement()方法创建html元素，这些元素是动态生成，也称为动态创建元素节点。

5.添加节点

node.appendChild(child)

node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾(类似css里的after伪元素)

node.insertBefore(child,指定元素)

node.insertBefore()方法将一个节点添加到父节点的指定子节点前面(类似css里的before伪元素)

6.删除节点

node.removeChild(child)

node.removeChild()方法从DOM中删除一个子节点，返回删除的节点

7.复制节点

node.cloneNode()

node.cloneNode()方法返回调用该方法的节点的一个副本。

注:
1.如果括号参数为空或者false，为浅拷贝，只克隆复制节点本身，不克隆里面的子节点。

2.如果括号参数为true，则为深拷贝，会复制节点本身及里面所有子节点