document对象

在浏览器中document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面，而且document对象是window对象的一个属性，因此可以看成是一个全局对象。

文档写入：

涉及方法write()，writeln(),open(),close()
write()和writeln()都接受一个字符串作为参数，不同点在于writeln()方法会在字符串末尾加换行符（\n）。这两个写入方法会重写整个页面。
open()和close()分别用于打开和关闭网页的输出流。但是如果是在网页加载期间使用write()就不需要使用open()和close().

Element类型

需要获取标签名可以使用nodeName属性，也可以使用tagName属性，二者返回的结果相同。
在Html中标签名始终都是大写形式，而在XML中标签名与源码保持一致。

document.getElementById('wb').tagName  
>INPUT  

获取属性

在html标签上的内容都可以通过.的形式来获取

<input type="text" name="wb" class="form-control" placeholder="search" id="wb" data-id="wb">

var input_ = document.getElementById('wb');  
input_.placeholder  
>search  
input_.className  
>"form-control"  

属性的操作还可以通过getAttribute(),setAttribute()和removeAttribute()。这三个方法来针对任何特性使用，包括那些以HTMLElement类型属性的形式定义的特性。

input_.getAttribute('placeholder')  
"search"  
input_.getAttribute('class')  
"form-control"  

自定义属性获取
上方的data-id是html中非标准的属性，也就是自定义属性，根据html5的规范，自定义属性，应当是以“data-”这样的形式定义。

input_.getAttribute('data-id')  
>"wb"  
// 除此外，h5新增dataset来获取自定义属性，不过属性必须是data-开头  
input_.dataset['id']  
input_.dataset.id  
// 属性有多个-，如data-name-index  
input_.dataset['nameIndex']  
input_dataset.nameIndex  

有两类属性，通过getAttribute()和.符号获取的结果存在不同。
一类是style，通过getAttribute()访问时，返回的style特性值包含的是css文本，而通过.来访问是返回一个对象。

input_.style  
>CSSStyleDeclaration {.....}  
input_.getAttribute('style')  
>"color: red"  

第二类是onclick这样的事件处理程序。通过getAttribute()访问时返回的是相应代码的字符串，但是通过.访问却返回一个js函数（未指定则返回null）。
由于存在差别，故在开发时常常使用.获取属性，而非getAttribute()，只有在获取自定义属性才使用getAttribute()

设置属性

参照下列代码

input_.setAttribute('data_id', '')  
>undefined  
input_.className = 'abc'  
>"abc"  

删除属性

removeAttribute(),这个方法用于彻底删除元素的特性，调用这个方法不仅会清除属性的值，而且也会删除属性。

attributes属性

Element类型是使用attributes属性的唯一一个DOM节点类型。
获取属性的方式：

var id = element.attributes.getNamedItem("id").nodeValue  
// 下方效果相同  
var id = element.attributes["id"].nodeValue;  

创建元素

使用document.createElement()方法可以创建新元素。这个方法只接受一个参数，即要创建的标签名

var h2 = document.createElement('h2')  
undefined  
h2.id='h2'  
"h2"  
h2.className = 'aa'  
"aa"  
h2.innerText = 'h2...'  
"h2..."  
h2  
<h2 id=​"h2" class=​"aa">​h2...​</h2>​  

使用appendChild(),insertBefore(),replaceChild()方法可以将文档添加到文档树。
document.body.appendChild(h2)
ie浏览器还支持直接插入完整的html代码。

Text类型

以下是Text类型节点的一些属性与方法
var ele = window.document.getElementsByTagName("ul");
var ele_text = ele[0].childNodes[2];
alert(ele_text.nodeType); // 3
alert(ele_text.nodeName); // #text
alert(ele_text.appendData("abc123")); // 将内容添加到节点的末尾
alert(ele_text.parentNode.nodeName); // UL
ele_text.deleteData(offset,count); // 从offset指定的位置开始删除count个字符
ele_text.insertData(offset,text); // 从offset指定的位置插入text
ele_text.replaceData(offset,count,text); // 用text替换从offset指定的位置开始到offset+count处的字符串
ele_text.splitText(offset); // 从指定offset位置开始将文本分为两个文本节点
ele_text.substringData(offset,count); // 指取从offset指定的位置开始到offset+count为止处的字符串
还有length属性可以获得字符串的长度：
ele_text.data.length
ele_text.nodeValue.length

DOM操作

1.动态加载js
同步加载：

var script = document.createElement('script')  
>undefined  
script.type = 'text/javascript'  
>"text/javascript"  
script.appendChild(document.createTextNode("function sayHi(){alert('hi')} sayHi()"));  
>function sayHi(){alert('hi')} sayHi()  
document.body.appendChild(script);  
--<script type=​"text/​javascript">​function sayHi(){alert('hi')} sayHi()​</script>​  

这样处理可以实现同步加载js

节点操作

parentNode-----------得到的是元素最近的父亲元素
parentNode.childNodes--------------得到的是父元素的子节点，是一个集合。但是它会返回所有节点，如文本节点、元素节点等
parentNode.children---------------获取的是子元素节点
// 获取第一个或最后一个节点
firstChild-----------------第一个子节点，可以是文本节点和元素节点
lastChild-----------最后一个子节点，可以是文本节点和元素节点
firstElementChild---------返回第一个子节点 （IE9以上）
lastElementChild-----------返回最后一个子节点（IE9以上）
// 如果要兼容，可以使用children，再获取第一个或最后一个
// 兄弟节点
node.nextSibling-------------当前元素的下一个，获取全部类型的节点，找不到返回null
node.previousSibling--------------当前元素的上一个，获取全部类型的节点
node.nextElementSibling------------当前元素的下一个兄弟节点，获取全部类型的节点，找不到返回null，（IE9以上）
node.previousElementSibling---------当前元素的上一个兄弟节点，获取全部类型的节点，找不到返回null，（IE9以上）
// 创建节点
createElement-----------创建元素节点
appendChild--------添加节点
createTextNode--------创建文本节点
// 例子
第一步，用createElement创建一个新的元素
var node=document.createElement("li")
第二步，因为元素里面有内容，所以还要用createTextNode创建一个文本节点
var textnode=document.createTextNode("王昭君")
第三步，用appendChild将文本节点添加到元素中
node.appendChild(textnode)
第四步，将创建好的节点添加到指定位置
var element=document.getElementById("myList")找到一个已有的元素
element.appendChild(node)向已有的元素追加新元素
-------------
node.cloneNode()---------------复制节点，克隆节点。括号为空或false，就是浅拷贝，为true就是深拷贝(复制节点和内部的所有内容)

创建多个节点时，使用createElement时效率要比innerHTML高很多，而如果使用innerHTML+数组的形式(将要拼接的节点全部添加到数组，最后join)来添加元素，效率比createElement要更高。