js-12Dom节点对象
01Dom节点对象
1.dom角度
整个html文档看作一个文档对象document, 每个html标签元素看作dom节点对象, 每个html标签元素的内容、属性也被看作是dom节点对象 => html文档中所有元素都被看作是dom节点对象
2.dom节点对象分类
- html标签元素 元素节点 - 标签内容 文本节点 - 标签属性 属性节点 ...
3. 整个html文档dom节点构成一个树形结构
document | html(根节点) | ------------------- head body | | ------- ---------- meta div ul --- ------ | | | * li * li * h2 1 2 | 元素一 注意：* 代表空白文本节点 由于当前每次修改机器就会渲染一次，效率比较低下 后续 将此结构进行映射得到虚拟节点进行修改 全部改完，再进行渲染，提高效率
4. 层次结构
节点关系：父节点 子节点 兄弟节点
5.元素节点之间有空白的文本节点
02获取节点对象 【重点】
1.getElements系列
2.querySelector系列
3.层次结构
3.1查找元素节点: 父元素节点 parentElement 所有子元素节点 children 下一个兄弟元素节点 nextElementSibling 上一个兄弟元素节点 previousElementSibling 父节点的第一个子元素节点 firstElementChild 父节点的最后一个子元素节点 lastElementChild 3.2查找节点: 其中包括空白文本节点 父节点 parentNode 所有子节点 childNodes 下一个兄弟节点 nextSibling 上一个兄弟节点 previousSibling 父节点的第一个子节点 firstChild 父节点的最后一个子节点 lastChild 3.3非常规节点 根节点 html: document.documentElement body: document.body head: document.head
03.动态操作节点 【重点】
1.创建节点
1. 创建节点 =>创建元素节点 var divEle = document.createElement('div') //<div></div> =>创建文本节点 var textNode = document.createTextNode('元素二')
2.添加节点
2. 添加节点 =>给父节点追加子节点 父节点.appendChild('子节点') =>在父节点指定子节点前插入新的子节点 父节点.insertBefore('新子节点','指定子节点') 注意：开发中常用模板字符串来创建内容，将内容进行赋值，避免反复的创建节点追加节点
3.删除节点
3. 删除节点 => 删除父节点下的子节点 父节点.removeChild(子节点) 子节点.remove() 【常用】 function test5(){ //创建h2节点 模板字符 var str = `<h2>我是模板字符串创建的h2</h2>` // 把内容给div document.body.firstElementChild.innerHTML = str } test5()
4.替换节点
4. 替换节点 新节点替换父节点下的子节点 父节点.replaceChild(新节点,旧节点)
5.复制 | 克隆节点
5. 克隆节点 节点.cloneNode(true|false|不写) <div> <p>元素一</p> </div> =>参数为true, 克隆节点和所有子节点 =>参数为false或者不写, 只克隆节点 div
5. 克隆节点 节点.cloneNode(true|false|不写) <div> <p>元素一</p> </div> =>参数为true, 克隆节点和所有子节点 =>参数为false或者不写, 只克隆节点 div
