DOM知识小整理

DOM

全称：
document object model (文档对象模型)

作用：
使JavaScript有能力与“文档”交互：
查找文档中的元素、添加、修改、删除、克隆节点…

---

查找元素节点：

注意点：HTML标签中的class属性名，在js代码中使用className属性来调用。

//根据元素的Id查找。
//如果存在指定id的元素，则返回该元素的DOM对象，如果不存在，则返回null。
document.getElementById()	

//根据标签名查找
//返回HTMLCollection集合（类似于数组的对象）
document.getElementsByTagName()

//根据类名查找，ES5中新增的方法
//返回集合，集合中包含查找到的DOM元素
document.getElementsByClassName()

//根据元素的name属性值查找
document.getElementsByName()

//在指定的element元素后代中根据标签/类名查找
element.getElementsByTagName()
element.getElementsByClassName()

//查找满足条件的第一个选择器
document.querySelector(selector)

//查找满足条件的所有选择器
document.querySelectorAll(selector)

创建、添加元素以及设置获取元素属性

//创建元素节点
let element = document.createElement('tagName');

//创建文本节点
let txt = document.createTextNode(text);

//属性：
//设置attrName属性
element.setAttribute(attrName, attrValue);
element.<attrName> = attrValue;
//获取attrName属性
let attrValue = element.getAttribute(attrName);
let attrValue = element.<attrName>;
//注意：元素的标签使用class类名，element.className与element.setAttribute('class', 'xxx')

//获取/设置元素内部的HTML文本
element.innerHTML
//获取/设置元素内部的纯文本
element.innerText

//添加到父元素中：
//将element添加到parentElement内部末尾
parentElement.appendChild(element);
//将element添加到parentElement内部oldNode节点之前，如果oldNode不存在，则追加到parentElement内部末尾
parentElement.insertBefore(element, oldNode);
//注意：如果待添加到父容器中的element是页面中已存在元素，则appendChild()和insertBefore()也是实现元素移动的操作

删除元素：

parentElement.removeChild(child)

克隆元素

//boolean表示是否克隆后代节点
//true表示克隆后代，false不克隆后代，默认为false
node.cloneNode(boolean)

节点筛选

//查找父节点：
node.parentNode
//查找子节点：
//会包括所有的孩子文本节点与元素节点
element.childNodes
//只包括所有孩子元素节点
element.children
//元素的第一个孩子节点，回车换行也会被算为文本节点
element.firstChild
//元素的最后一个孩子节点，回车换行也会被算为文本节点
element.lastChild

//兄弟节点：
previousSibling
nextSibling

节点属性

//节点名称：
node.nodeName
//文本节点：
#text
//元素节点：
//标签名大写状态，例如：DIV

//节点类型：
node.nodeType
//返回数字：
//1 --元素节点
//3 -- 文本节点

//节点值：
node.nodeValue
//文本节点：文本值
//元素节点：null