1.节点
节点类型 | HTML内容 | 例如 |
---|---|---|
文档节点 | 文档本身 | 整个document |
元素节点 | 所有的HTML元素 | < a >、< div >、< p > |
属性节点 | HTML内的属性 | id、href、name、class |
文本节点 | 元素内的文本 | hello |
注释节点 | HTML中的注释 | <!-- – > |
2.获取节点
注意:操作 dom 必须等节点初始化完毕后,才能执行。处理方式两种:
(1)把 script 调用标签移到 html 末尾即可;
(2)使用 onload 事件来处理 JS,等待 html 加载完毕再加载 onload 事件里的 JS。
window.onload = function () { //预加载 html 后执行};
方法 描述
getElementById() 根据 id 获取 dom 对象,如果 id 重复,那么以第一个为准
getElementsByTagName() 根据标签名获取 dom 对象数组
getElementsByClassName() 根据样式名获取 dom 对象数组
getElementsByName() 根据 name 属性值获取 dom 对象数组,常用于多选获取值
设置属性
dom对象.属性名 = "属性值";
注:如果属性里面还有属性,dom对象.属性名.属性名 = "属性值";
一般场景,比如style属性:
dom对象.style.color="red" 设置字体颜色
3.创建节点和插入节点
创建节点
方法 描述
createElement() 创建一个新的节点,需要传入节点的标签名称,返回创建的元素对象
createTextNode() 创建一个文本节点,可以传入文本内容
innerHTML 也能达到创建节点的效果,直接添加到指定位置了
插入节点
方法 描述
write() 将任意的字符串插入到文档中
appendChild() 向元素中添加新的子节点,作为最后一个子节点
insertBefore() 向指定的已有的节点之前插入新的节点
newItem:要插入的节点
exsitingItem:参考节点
需要参考父节点
注:如果使用appendChild()方法追加时,被追加的元素是已经存在的元素,则会被直接剪切到指定位置
4.间接查找节点
方法|属性 描述
childNodes 返回元素的一个子节点的数组 属性 获取的是 文本节点和元素节点
firstChild 返回元素的第一个子节点 属性
lastChild 返回元素的最后一个子节点 属性
nextSibling 返回元素的下一个兄弟节点 属性
parentNode 返回元素的父节点 属性
previousSibling 返回元素的上一个兄弟节点 属性
5.替换节点
方法|属性 描述
replaceChild(newNode,oldNode) 用新的节点替换旧的节点
oldNode.parentNode.replaceChild(newNode,oldNode)
首先通过旧节点定位到父节点,然后用新的节点替换旧节点
替换时,原来的元素会被删除,所以替换只能执行一次
6.克隆节点
方法|属性 描述
cloneNode() 制节点
var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
true:深度克隆,可以克隆结构和内容
false(默认值):只克隆结构
7.删除节点
方法|属性 描述
removeChild() 从元素中移除子节点
从父元素中删除节点,获取要删除对象的父元素,然后从父元素中删除该对象