DOM常用操作

本篇文章主要总结了常用的dom操作，方便平时查阅。

--------------------------------图片来自参考链接2

每个载入浏览器的 HTML 文档都会成为 Document 对象。

对 DOM 操作，我们使用最多的就是通过 document 对象。

document 对象是一个内置对象，我们可以通过它的许多属性和方法来获取和操作 dom 。

由上图可以看出：

<html> = document.documentElement；
<body> = document.body；
<head> = document.head；
document = node.ownerDocument；//随意一个节点，可通过该属性获取 document 对象；
复制代码

文档常用操作

1、element 对象查询

document.getElementById(id);&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;//返回对拥有指定id的第一个对象进行访问

document.getElementsByName(name);&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;//返回带有指定名称的节点集合

document.getElementsByTagName(tagname); &emsp;&emsp;//返回带有指定标签名的对象集合&emsp; 

document.getElementsByClassName(classname);  //返回带有指定class名称的对象集合 

document.querySelector(selectorName)	//返回符合CSS选择器的第一个对象

document.querySelectorAll(selectorName)	//返回符合CSS选择器的对象集合

document.createElement(name)	//创建一个html元素
复制代码

接下来，我们先复习一些基本的概念：

节点（node）是 DOM 层次结构中任何类型对象的通用名称。node 可以是内置 DOM 元素之一，例如document或document.body，也可以是HTML中指定的HTML标记，例如或

，也可以是文本节点（系统将一个文本块保存在另一个元素中）。

简而言之，node 是任何DOM对象。

元素（element）是特定类型的 node，可以在HTML中使用HTML标记直接指定，并且可以具有id或类等属性。

所以 node 具备的属性与方法， element 由于继承自 node，也相应具备了这些属性与方法。

2、element 家族遍历

myElement.children		//只得到 element 子节点集 	
myElement.firstElementChild	
myElement.lastElementChild
myElement.previousElementSibling
myElement.nextElementSibling
复制代码

由于 element 继承自 node ，所以以下属性也具备：

myElement.childNodes
myElement.firstChild
myElement.lastChild
myElement.previousSibling
myElement.nextSibling
myElement.parentNode
myElement.parentElement
复制代码

3、element 属性操作

element.attributes	//返回该元素所有属性节点的一个实时集合是个类数组对象
element.getAttributeNames() 	//返回一个Array，该数组包含指定元素（element）的所有属性名称

element.getAttribute(attributeName);
element.setAttribute(attributeName, value);

element.hasAttribute(attributeName);
element.removeAttribute(attributeName);

element.hasAttributes();   // 是否有属性设置
复制代码

除此之前，还有四个概念较为常见：innerHTML、outerHTML、innerText 、outerText，以图作为说明：

------------------来自参考链接1

4、element样式操作

4.1、element 类操作

element.className	//返回一个字符串
element.classList	//返回一个类数组
复制代码

className 是可读写属性，可以使用

element.className += 'fool'

来增加类名，或者通过正则表达式来删除或更改类名：

element.className = element.className.replace(/^bold$/, '');

classList 也提供了一些方法来操作元素的类名：

element.classList.add()	//增加一个 class。
element.classList.remove()	//移除一个 class。
element.classList.contains()	//检查当前元素是否包含某个 class。
element.classList.toggle()	//将某个 class 移入或移出当前元素。
element.classList.item()	//返回指定索引位置的 class。
element.classList.toString()	//将 class 的列表转为字符串。
复制代码

4.2、获取样式方法

window.getComputedStyle 方法返回的对象是只读的，可以用于检查元素的样式（包括由一个<style>元素或一个外部样式表设置的那些样式）。

window.getComputedStyle(myElement)	//返回的style是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。返回值只读。
复制代码

Element.getBoundingClientRect 方法返回元素的大小及其相对于视口的位置。可以用这个方法来获取元素的位置。
```
element.getBoundingClientRect（）.top
element.getBoundingClientRect（）.left
复制代码
```

读取元素的行内样式，可以直接使用：

element.style	//用来读写该元素的行内样式信息
复制代码

4.3、其他 element 操作方法

element.matches(cssSelector) //表示当前元素是否匹配给定的 CSS 选择器
element.scrollIntoView(Boolean)  //让当前的元素滚动到浏览器窗口的可视区域内。
复制代码

5、Dom 更改

element.appendChild(element);
element.removeChild(element);

element.replaceChild(element1, element2);

parentElement.insertBefore(newElement, referenceElement);	//插入子元素
复制代码

6、有趣的事件

接下来要介绍的几个方法，不算太为常见的事件操作，不过作者近期有用到，在这里给大家作为了解，还是很有意思的~

观察元素是否进入视窗口内：

io = new IntersectionObserver()
复制代码

观察元素属性是否发生变化:

var observer = new MutationObserver();
复制代码

这两个方法就不展开讲解了，有兴趣的可以参考后面的参考链接相关文章~

7、参考链接

1、原生 JavaScript 的 DOM 操作汇总：harttle.land/2015/10/01/…

2、The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery)：www.sitepoint.com/dom-manipul…

3、Element对象：javascript.ruanyifeng.com/dom/element…

4、IntersectionObserver API 使用教程： www.ruanyifeng.com/blog/2016/1…

5、MutationObserver：developer.mozilla.org/zh-CN/docs/…