DOM操作

1. 获取 DOM
document.getElementById(); 根据 Id 获取节点
document.getElementsByClassName(); 根据 class名 获取DOM节点
document.getElementsByTagName(); 根据 标签名 获取 DOM节点
document.querySelector(); 根据 属性选择器 获取节点
document.querySeleteorAll();
.nextSibling 获取下一个兄弟节点
.nextElementSibling 获取下一个 兄弟标签节点
.previousSibling 获取上一个兄弟节点
.previousElementSibling 获取上一个兄弟标签节点
.lastChild/fristChild 获取 最后一个 / 第一个 子节点
.lastElementChild/fristElementChild 获取 最后一个 / 第一个 标签子节点
.childNodes 获取子节点数组
.children 获取子元素节点
.parentNode 获取父元素整个结构

** 2. 创建 DOM 节点**
document.createElement('标签名');
父标签.appendChild('指定节点'); 插入 DOM 节点
父节点.replaceChild(旧节点,新节点); 用新节点替代指定的子节点

** 3. 删除 DOM 节点**
父节点.remove(子节点); 删除指定的 子节点
节点.remove() 删除 自身节点

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容