重要的数据类型

document

每个载入浏览器的HTML文档都会成为document对象。document对象包含了文档的基本信息，我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。

常用属性

Element

除了document对象，在DOM中最常用的就是Element对象了，Element对象表示HTML元素。

查询元素

getElementById()

getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法。

getElementsByClassName()

getElementsByClassName方法返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。

getElementsByTagName()

getElementsByTagName方法返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。

getElementsByName()

getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。

注意，在IE浏览器使用这个方法，会把没有name属性、但有同名id属性的元素也返回，所以name和id属性最好设为不一样的值。

querySelector()

querySelector方法返回匹配指定的css选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，返回null。

document.querySelector("#nav");
document.querySelector(".server");

querySelector方法无法选中css伪元素。

querySelectorAll()

querySelectorAll方法返回匹配指定的css选择器的所有节点，返回NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

document.querySelectorAll(".server");

新建元素

createElement()

createElement方法用来生成HTML元素节点。参数为元素的标签名，即元素节点的tagName属性。
如果传入大写的标签名，则会转为小写。
如果参数带有尖括号（<和>）或者null，则报错。

var news = document.createElement("div");

createTextNode()

createTextNode方法用来生成文本节点。参数为所要生成文本节点的内容。

var newsContent = document.createTextNode("这是一段文字节点");

createDoucmentFragment()

createDocumentFragment生成一个DocumentFragment对象。

var docmentFragment = document.createDocumentFragment();

DocumentFragment对象是存在于内存的DOM片段，但是不属于当前文档，常常用于生成复杂的DOM结构，然后插入当前文档。

DocumentFragment对象不属于当前文档，对它的操作不会引发页面的的重新渲染，比直接修改当前文档DOM有更好的性能表现。

修改元素

appendChild()

在元素内部的末尾添加元素

var news = document.createElement("div");
var newsContent = document.createTextNode("Hello");
var newsContent2 = document.createTextNode(" World");
news.appendChild(newsContent);   //<div>Hello</div>
news.appendChild(newsContent2); //<div>Hello World</div>

insertBefore()

在某个元素之前插入元素

var news = document.createElement("div");
var newsContent = document.createTextNode("Hello");
news.insertBefore(newsContent,news.firstChild); //<div>Hello</div>

replaceChild()

替换节点，接受两个参数：要插入的元素和要替换的元素。

newDiv.replaceChild(newElement, oldElement);

删除元素

removeChild()

parentNode.removeChild(childNode);

例子

HTML部分
<header>
    <div>首页</div>
</header>
JS部分
document.querySelector("header").removeChild(document.querySelector("div"));

clone元素

cloneNode()

cloneNode方法用于克隆元素，有一个布尔值参数，为true时会深复制，即会复制元素及其子元素（IE还会复制其事件），为false时只复制元素本身。

node.cloneNode(true);

例子

HTML部分
<header>
    <div>首页</div>
</header>
JS部分
var newDiv = document.querySelector("header").cloneNode(true);
console.log(newDiv);

属性操作

getAttribute()

获取元素的属性值

node.getAttribute("id");

createAttribute()

生成一个新的属性，并返回它

var class = document.createAttribute("class");
class.value = "server"; //生成class="server"

setAttribute()

设置元素的属性

var node = document.getElementById("sname");
node.setAttribute("class","server");

等同于

var node = document.getElementById("sname");
var class = document.createAttribute("class");
class.value = "server"; //生成class="server"
node.getAttribute(class);

removeAttribute()

删除元素的属性

node.removeAttribute("id");

innerText

innerText是可写属性，返回元素内包含的文本内容，在多层次的时候按照元素由浅到深的顺序拼接内容。

innerHTML

innerHTML是可写属性，返回元素的HTML结构，在写入的时候也会自动构建DOM结构。