欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

DOM知识小整理

程序员文章站 2022-04-06 18:49:01
...

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