节点操作和节点概述

网页页面中的所有内容都是节点(标签、属性、文本、注释等)，在DOM中节点以Node来表示

在使用DOM操作对节点实现修改、添加、删除操作

一般情况下，节点至少拥有三个基本属性

nodeType：节点类型，这里的类型是标签的名称
nodeName：节点名称，这里的名称是js中给这个节点起的一个名字
nodeValue：节点值
创建节点
document.createElement(“div”)

document.createElement(tagName)方法创建由tagName指定的HTML元素，因为这些元素原先不存在document里面，而是根据我们的需求动态创建的，所以这种创建方式的元素叫做动态节点

同时创建的节点需要添加到HTML文档中

添加节点
node.appedChild(节点)，方法将一个节点元素添加到指定的父节点中的最后一个子节点之后
node.insertBefore(节点,子节点)，方法将一个节点元素添加到指定的父节点中的指定子节点之前
节点层级
利用DOM将节点划分为不同的层级关系，常见的层间关系就是父子关系

一般操作包含以下：

父级节点：node.parentNode

子级节点：

node.childNodes(标准)，返回包含指定子节点的集合，这个集合会进行即时更新

注意：

返回值里面包含了所有的子节点包括孙子级别，还包含有文本节点，如果只想要获取里面的元素节点，需要专门处理。因此一般不用这个方式

parentNode.children(非标准)，是一个只读属性，返回所有的子元素节点，它只返回子元素节点，不会返回浏览器的格式化节点

之后主要使用这个属性

第一个子节点：parentNode.firstChild

返回第一个子节点，找不到则返回null，同样包含文本节点

最后一个子节点：parentNode.lastChild

返回最后一个子节点，找不到则返回null，同样包含文本节点

第一个子元素节点：parentNode.firstElementChild

返回第一个子元素节点，找不到则返回null，只找元素，IE9之后

最后一个子元素节点：parentNode.lastElementChild

返回最后一个子元素节点，找不到则返回null，只找元素，IE9之后

兄弟节点：

上一个元素兄弟节点：self.previousElementSibling

下一个元素兄弟节点：self.nextElementSibling

上面两个只管元素问题，有兼容问题

上一个兄弟节点：self.previousSibling

下一个兄弟节点：self.nextSibling

上面两个找所有的节点包含文本节点

文章最后发布于:2021-01-18 09:23:52