1. 获取节点
2. 节点属性
3. 创建节点
4. 插入节点
5. 修改节点
7. 克隆节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/**
* DOM节点
* 元素节点(标签节点)
* 文本节点:标签里的文字
* 属性节点:标签上的属性
*/
/*
1. 获取节点
firstChild : 第一个子节点
firstElementChild : 第一个元素子节点
lastChild : 最后一个子节点
lastElementChild : 最后一个元素子节点
previousSibling : 前一个兄弟节点
previousElementSibling : 前一个元素兄弟节点
nextSibling : 下一个兄弟节点
nextElementSibling : 下一个元素兄弟节点
parentNode : 父节点
childNodes : 获取到所有的元素子节点 与 文本子节点[伪数组]
children : 获取所有的元素子节点[伪数组]
2. 节点属性
nodeType:节点的节点类型,用数字表示
nodeName:节点的节点名称
nodeValue: 节点的值
nodeType nodeName nodeValue
元素节点 1 大写标签名 null
属性节点 2 属性名 属性值
文本节点 3 #text 文本内容
3. 创建节点
document.createElement('标签名') :创建元素节点
document.createTextNode("文本") :创建文本节点
documnet.createDocumentFragment() :创建文档碎片 (为了减少与页面的交互,**提高性能**)
4. 插入节点
父节点.appendChild(子节点) : 将子节点**追加**到父节点中子节点列表的**末尾**
父节点.insertBefore(新节点,指定的旧的节点) :在指定的旧节点**前面插入**新节点
5. 修改节点
父节点.replaceChild(新节点,旧节点) : 替换节点
6. 删除节点
父节点.removeChild(子节点) :删除子节点
当前节点.remove() :删除当前节点
7. 克隆节点
节点.cloneNode([ture])
- 文本节点直接复制
- 元素节点看参数
false(默认) : 只克隆当前节点,不包含内容。
true : 克隆当前节点,包含内容
*/
</script>
</body>
</html>