DOM常用操作方法

什么是DOM？

DOM全称是Document Object Model(文档对象模型)，是为HTML和XML提供的API。那么为什么DOM可以同时提供给HTML和XML编程接口。虽然他们用来标记的标签不同，但是他们本质的结构是相同的。换句话说，按照DOM的标准，HTML和XML都是以标签为结点构造的树结构，DOM将HTML和XML的相同的结构本质抽象出来，然后通过脚本语言，如Javascript，按照DOM里的模型标准访问和操作文档内容。

DOM的四个基本接口

在DOM接口规范中，有四个基本的接口：Document, Node, NodeList, NamedNodeMap。

Document:Document接口是对文档进行操作的入口，它是从Node接口继承过来的。

Node:Node接口是其他大多数接口的父类。在DOM树中，Node接口代表了树中的一个节点。

创建（增）

1.createElement() 创建标签
2.createTextNode() 创建文本
3.createDocumentFragment() 创建文档碎片,所有的操作是在内存中进行的

为了避免重绘和回流：咱们插入dom时可采用createDocumentFragment，最后一次性的再添加到页面的dom中

//先创建li，然后插入到ul中
var oul=document.querySelector('.list')
//先创建一个文档碎片
var fragment=document.createDocumentFragment();

for(var i=0;i<100;i++) {
var newLi=document.createElement(‘li’);
newLi.textContent=项目${i+1}
fragment.appendChild(newLi) //已经将100个li添加到fragment上了

}

oul.appendChild(fragment);

4.cloneNode(true) 克隆 //添加true代表深度克隆，包括子节点的所有内容也可以克隆过来

例如：
//需求：创建一个div，并添加文字，追加到页面上
var odiv=document.createElement(‘div’);
var otext=document.createTextNode(‘1906A’)

//将文本追加到div上 appendChild
odiv.appendChild(otext);

//再将div追加到body上
document.body.appendChild(odiv)
修改:

父节点.appendChild(子节点) 尾追加
父节点.insertBefore(新节点,参考节点) 前追加
父级节点.removeChild(要删除的子级节点) 移除节点
replaceChild(新节点，旧节点) 替换节点
查询

getElementById() 获取id ，如果页面上有多个相同id，只返回第一个
getElementsByTagName() 获取标签名返回是类数组
getElementsByName() 获取表单中name名称返回类数组
getElementsByClassName 只能获取class名称返回类数组
querySelector 只获取匹配的第一个css选择器 //特别适合移动端
querySelectorAll 获取匹配的css选择器类数组 //特别适合移动端

//封装一个$
function $(selector) {
return typeof selector===‘string’ ? document.querySelector(selector) : selector
}

//难怪人有说有了querySelector，可以放弃jQuery了！！！！！！
节点关系

parentNode:找父节点
parentElement：找父元素

previousSibling：找前一个兄弟节点
previousElementSibling：找前一个兄弟元素
nextSibling：找后一个兄弟节点
nextElementSibling：找后一个元素节点

childNodes:属性，即包括元素节点，也包括文本节点
children:属性只获取直接子级元素，不获取文本节点（元素类型===1）
firstNode：找第一个节点
lastNode：找最后一个节点
hasChildNodes：用于判断是否有子元素
属性型
setAttribute
getAttribute

例如：
$(‘a’).getAttribute(‘title’)
$(‘a’).setAttribute(‘title’,‘1906A’)
样式型

window.getComputedStyle：获取css样式

getBoundingClientRect 获取dom的位置信息

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
参考链接：https://www.cnblogs.com/lrzw32/p/5008913.html

什么是DOM？

DOM的四个基本接口

猜你喜欢