js之DOM操作总结

什么是DOM，简单的说，DOM是一套对文档的内容进行抽象和概念化的方法。------------------《JavaScript DOM编程艺术》

D：document，即文档

O：object，即对象

M：model，即模型

DOM把一份文档表示为一棵树，或者更具体来说就是一颗家谱树，这棵树由各种类型的节点构成。

DOM节点可以分成三种：元素节点，文本节点，属性节点。

所以DOM操作主要是对这三种节点进行操作，操作的类型无非就是对节点进行增删改查。

查：

首先是获取节点：

   getElementByID()             // 得到单个节点
   getElementsByTagName()       // 得到节点数组 
   getElementsByName()          // 得到节点数组 
   querySelector()              // 得到单个节点，如果找到你多个则返回第一个，可以多个参数
   querySelectorAll()           // 得到节点数组，可以是多个参数

需要注意的是它们的参数，后两个的参数是CSS选择器
查找子节点：

Node.childNodes   //获取子节点列表NodeList; 注意换行在浏览器中被算作了text节点，如果用这种方式获取节点列表，需要进行过滤
Node.firstChild   //返回第一个子节点
Node.lastChild    //返回最后一个子节

查找父节点：

Node.parentNode      // 返回父节点
Node.ownerDocument   //返回祖先节点（整个document）

查找同胞节点：

Node.previousSibling       // 返回前一个节点，如果没有则返回null
Node.nextSibling             // 返回后一个节点

增：
首先要先创建节点 
createElement()                   //创建一个元素节点
createTextNode()                  //创建文本节点
createDocumentFragment()          //创建虚拟节点
cloneNode=Node.cloneNode(boolean) //克隆节点，ture表示克隆该节点及其所有子节点,false只复制本节点
插入节点：

/*插入node*/
parentNode.appendChild(childNode);              // 将新节点追加到子节点列表的末尾
parentNode.insertBefore(newNode, targetNode);   //将newNode插入targetNode之前

/*插入html代码*/
node.insertAdjacentHTML('beforeBegin', html);   //在该元素开始标签之前插入代码
node.insertAdjacentHTML('afterBegin', html);   //在该元素的开始标签之后插入代码
node.insertAdjacentHTML('beforeEnd', html);   //在该元素的结束标签之前插入代码
node.insertAdjacentHTML('afterEnd', html);   //在该元素结束标签之后插入代码
Node.innerHTML='html'                         //与node.insertAdjacentHTML('afterBegin', html)效果相同
docment.write()                           //在body中插入内容

替换节点

parentNode.replace(newNode, targetNode);        //使用newNode替换targetNode

删：

parentNode.removeChild(childNode);   // 移除目标节点
node.parentNode.removeChild(node);       //在不清楚父节点的情况下使

属性节点操作：

直接获取css样式
node.style.color

style本身的属性和方法：
node.stylr.cssText   //获取元素css样式的字符串
node.style.length    //获取样式个数
注意以上这种方式只能获取内联样式

getComputedStyle可以用来获取最终浏览器计算得到的样式

getComputedStyle是window的方法。它能够获取当前元素所有最终使用的CSS属性值，但是是只读的。它有两个参数，第一个为传入的节点，第二个可以传入:hover, :blur等获取其伪类样式，如果没有则传入null。

然而IE并不支持getComputedStyle方法，可以使用currentStyle来保持兼容性：

window.getComputedStyle ? window.getComputedStyle(node, null) : node.currentStyle

获取和修改样式：
HTML5提供了一个新属性：classList来实现对元素样式的增删改查。

node.classList.add(value);         //为元素添加指定的类
node.classList.contains(value);    // 判断元素是否含有指定的类，如果存在返回true
node.classList.remove(value);   // 删除指定的类
node.classList.toggle(value);   // 有就删除，没有就添加指定类

修改DOM特定属性的方法

Node.getAttribute('id')        // 获取
Node.setAttribute('id')        // 设置
Node.removeAttribute()         // 移除
Node.attributes                // 获取DOM全部特性

 其它常用DOM：

element.classList	返回元素的类名，作为 DOMTokenList 对象。
element.className	设置或返回元素的class属性
element.clientHeight	在页面上返回内容的可视高度（不包括边框，边距或滚动条）
element.clientWidth	在页面上返回内容的可视宽度（不包括边框，边距或滚动条）

element.compareDocumentPosition()	比较两个元素的文档位置。
element.contentEditable	设置或返回元素的内容是否可编辑

element.hasAttribute()	如果元素中存在指定的属性返回 true，否则返回false。
element.hasAttributes()	如果元素有任何属性返回true，否则返回false。
element.hasChildNodes()	返回一个元素是否具有任何子元素

element.nodeType	返回元素的节点类型
element.nodeValue	返回元素的节点值

element.offsetHeight	返回，任何一个元素的高度包括边框和填充，但不是边距
element.offsetWidth	返回元素的宽度，包括边框和填充，但不是边距
element.offsetLeft	返回当前元素的相对水平偏移位置的偏移容器
element.offsetParent	返回元素的偏移容器
element.offsetTop	返回当前元素的相对垂直偏移位置的偏移容器

element.scrollHeight	返回整个元素的高度（包括带滚动条的隐蔽的地方）
element.scrollLeft	返回当前视图中的实际元素的左边缘和左边缘之间的距离
element.scrollTop	返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离
element.scrollWidth	返回元素的整个宽度（包括带滚动条的隐蔽的地方）

可以在开发者工具中尝试一下其输出结果都是何种类型的

然后这里谈一下下面这个函数：element.compareDocumentPosition()

用法：node1.compareDocumentPosition(node2)判断node1和node2的位置关系

返回值是下列情况的一种或多种：

Bits          Number        Meaning 
000000         0              元素一致 
000001         1              节点在不同的文档（或者一个在文档之外） 
000010         2              节点 B 在节点 A 之前 
000100         4              节点 A 在节点 B 之前 
001000         8              节点 B 包含节点 A 
010000         16             节点 A 包含节点 B 
100000         32             浏览器的私有使用

如果node1包含node2的话，那么返回值就是20，因为16+4=20！感觉怪怪的，但是事实就是这样

如果node1不包含node2但是在node2之前,那么就返回 4

其他情况规则一样

我们知道js中的contains方法是用来判断DOM之间的包含关系的（不要和java中的搞混了），而element.compareDocumentPosition()就更强大了

contains方法其实最早是在IE中支持的，后来其他浏览器也慢慢支持了，但是contain返回值只有ture和false两种情况，而element.compareDocumentPosition()返回结果更精确

jquery的contains就是通过JS的contains和compareDocumentPosition()实现的，但是我还没研究过

 

转载于:https://www.cnblogs.com/hui-fly/p/9465125.html