文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容

DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。
说白了DOM就是浏览器为JavaScript提供的一系列接口（通过window.documnet提供的），通过这些接口我们可以操作web页面。 但DOM并不是编程语言，它是文档对象的模型，该模型是独立于编程语言的。

DOM 创建

DOM节点（Node）通常对应于一个标签，一个文本，或者一个HTML属性。DOM节点有一个nodeType属性用来表示当前元素的类型，它是一个整数：

  1. Element，元素 ——1
  2. Attribute，属性 ——–2
  3. Text，文本 ——3
  4. comment 节点 ——8
  5. Document 节点 ——9
  6. DocumentFrament节点 ——11
  7. 其他的参见这

DOM节点创建最常用的便是document.createElement和document.createTextNode方法： 
var el1 = document.createElement('div');
var el2 = document.createElement('input');
var node = document.createTextNode('hello world!');

DOM 查询

元素查询的API返回的的结果是DOM节点或者DOM节点的列表。document提供了两种Query方法：

// 返回当前文档中第一个类名为 "myclass" 的元素
var el = document.querySelector(".myclass");

// 返回一个文档中所有的class为"note"或者 "alert"的div元素
var els = document.querySelectorAll("div.note, div.alert");

// 获取元素
var el = document.getElementById('xxx');
var els = document.getElementsByClassName('highlight');
var els = document.getElementsByTagName('td');

var els = document.getElementsByName('name'); // name属性

DOM事件

  1. element.addEventListener(type, listener, [, options])
    给元素添加指定事件type以及响应该事件的回调函数listener。options也可以为Boolean值表示捕获阶段还是冒泡阶段执行默认为false，冒泡阶段执行
  2. element.removeEventListener(type, listener, [, options])
    移除元素上指定事件，如果元素上分别在捕获和冒泡阶段都注册了事件，需要分别移除。
  3. document.createEvent()
    创建一个自定义事件，随后必须使用init进行初始化。
  4. element.dispatchEvent(event)
    对指定元素触发一个事件。
// 创建事件
var event = document.createEvent('Event');

// 定义事件名为'build'.
event.initEvent('build', true, true);

// 监听事件
elem.addEventListener('build', function (e) {
        // e.target matches elem
    }, false);

// 触发对象可以是任何元素或其他事件目标
elem.dispatchEvent(event);

样式操作

1、js如何操作class

加类：   dom.classList.add(className);
移除类： dom.classList.remove(className);
替换类： dom.classList.replace(className1,className2);
判断类： dom.classList.contains(className);　　　　// 这个只能一次判断一个 类

2、js如何操作style

如果属性有’-‘号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，
就中括号的形式 element.style[‘text-align’] = ‘100px’;

3、设置style的属性

element.setAttribute('style', 'height: 100px !important');

4、使用setProperty 如果要设置!important，推荐用这种方法设置第三个参数

element.style.setProperty('height', '300px', 'important');

5、设置cssText

element.style.cssText += 'height: 100px !important';

6、insertRule()、addRule

[sheet].insertRule([CSS样式]，指定位置)
    
[sheet]表示某个样式表，它可以通过document.styleSheets来获得

然后用JS获取这个样式表：

最后我们就可以给这个样式表中添加样式了：

var sheet = document.styleSheets[0];
sheet.addRule('.box', 'height: 100px');

sheet.insertRule(‘#box{width: 300px; height: 300px; background-color: #0f0;}’,0);
或者

// 或者插入新样式时操作
    var styleEl = document.createElement('style'),
        styleSheet = styleEl.sheet;

    styleSheet.addRule('.box', 'height: 100px');
    styleSheet.insertRule('.box {height: 100px}', 0);

    document.head.appendChild(styleEl);

DOM元素的属性和方法

方法描述
element.id设置或者返回元素的 id 属性
element.className设置或者返回元素的 class 属性
element.style设置或返回元素的 style 属性
element.title设置或者返回元素的 title 属性
element.innerHTML设置或返回元素的内容
element.tagName返回元素的标签名
element.lastChiled返回元素的最后一个子元素
element.nodeValue设置或返回元素的值
element.nodeName返回元素的名称
element.nodeType返回元素的节点类型
element.toString()把元素转为字符串
element.textContent设置或者返回节点及其后代的内容
element.parentNode返回元素的父节点
element.appendChild()向元素添加新的子节点，作为最后一个子节点
element.cloneNode()克隆元素
element.getAttribute()返回元素节点的指定属性值
element.getAttributeNode()返回指定的属性节点
element.removeAttribute()从元素中移除指定属性
element.removeAttributeNode()移除指定的属性节点，并返回被移除的节点
element.hasAttribute()如果元素拥有指定属性，则返回true,否则返回false
element.hasAttributes()如果元素拥有属性，则返回true,否则返回false
element.hasChildNodes()如果元素拥有子节点，则返回true,否则返回false
element.clientWidth返回元素的可见宽度
element.clientHeight返回元素的可见高度
element.offsetWidth返回元素的宽度
element.offsetHeight返回元素的高度
element.offsetLeft返回元素的水平偏移位置
element.offsetTop返回元素的垂直偏移位置
element.offsetParent返回元素的偏移容器
element.scrollWidth返回元素的整体宽度
element.scrollHeight返回元素的整体高度
element.scrollLeft返回元素左边缘与视图之间的距离
element.scrollTop返回元素上边缘与视图之间的距离
element.childNodes范湖元素子节点的 NodeList 。
nodelist.item()返回 NodeList 中位于指定下标的节点
nodelist.length返回 NodeList 中的节点数

元素样式尺寸

1. window.getComputedStyle(elem) 获取elem所有应用了css后的属性值。返回一个实时的 CSSStyleDeclaration 对象。 2. elem.getBoundingClientRect() 返回元素的大小以及相对于视口的位置。返回一个DOMRect对象。包括元素的 left right top bottom width height x y 属性值。