一、文档对象模型定义

文档对象模型指的是window.document。
当浏览器解析html文档时，会将整个文档解析为一个树形结构保存在浏览器内存中。
在树形结构中，由如下构成：
    元素节点（标签元素）
    属性节点（标签属性）
    文本节点（标签的内容，换行符）

在js的结构中称为DOM(Document Object Model)文档对象模型。

二、查找网页元素

1、通过ID查找元素

 document.getElementById("ID名称");

 说明：
    因为id具有文档唯一性，因此，该方法返回的就是唯一的元素对象

2、通过class查找元素

document.getElementsByClassName("类名称");

说明：
    该方法返回的是具有相同class属性值的对象集合。

3、通过标签名查找元素

document.getElementsByTagName('标签名');

4、通过name属性查找

document.getElementsByName("name属性");

三、属性操作

#设置或者 返回元素的类名
element.className   

#设置或返回元素的 id
element.id       

#把指定属性设置或更改为指定值。
element.setAttribute(attrName,attrValue)  

#从元素中移除指定属性
element.removeAttribute(attrName)

#返回元素节点的指定属性值
element.getAttribute(attrName)   

#如果元素拥有指定属性，则返回true，否则返回 false
element.hasAttribute(para)  

=============================================================
#通过文档对象创建新的属性,创建出来的属性对象可以使用value属性设置该对象的值
document.createAttribute('id');

#修改设置指定元素的属性节点
element.setAttributeNode(attrObj)    

#返回指定节点的属性集合
elementNode.attributes

四、标签内容

#设置或获取标签的内容（内容中的html代码会解析）
element.innerHTML

#设置或获取标签的内容(所有都作为普通文本处理)
element.innerText

五、css样式

element.style
    - 可以直接将style的样式赋值
      liObj.style="color:blue;background-color:red;";
    - 通过属性调用
      liObj.style.color="blue";
    - 如果在css样式中出现连字符“-”，则应该使用小驼峰命名法
      liObj.style.background-color="red";   //错误写法
      liObj.style.backgroundColor="red";    //正确写法

六、标签元素操作

#返回元素的标签名(大写)
element.tagName  

#返回 NodeList 中位于指定下标的节点。
nodelist.item()

#返回该节点的大写字母标签名
element.nodeName    

#返回该结点的节点类型，1表示元素节点  2表示属性节点 3表示文本节点
element.nodeType   

#返回该节点的value值，元素节点的该值为null
element.nodeValue  

#返回元素的子节点的nodeslist对象，nodelist类似于数组，
有length属性，可以使用方括号 [index] 访问指定索引的值
(也可以使用item(index)方法)。但nodelist并不是数组
element.childNodes  

================创建元素===============
#创建一个新元素
document.createElement('元素名称')  

#添加元素到指定位置（向元素添加新的子节点）
element.appendChild(nodeName)

#在指定的已有的子节点之前插入新节点
element.insertBefore(insertNode,appointedNode)