重要的数据类型
| 数据 | 含义 |
|---|---|
document |
每个载入浏览器的HTML文档都会成为document对象，document对象包含了文档的基本信息 |
element |
element 是指由 DOM API 中成员返回的类型为 element 的一个元素或节点 |
attribute |
属性 |
document
每个载入浏览器的HTML文档都会成为document对象。document对象包含了文档的基本信息，我们可以通过JavaScript对HTML页面中的所有元素进行访问、修改。
常用属性
| 属性 | 含义 |
|---|---|
| document.doctype | 返回当前文档的 Document Type Definition (DTD) |
| document.title | 设置或获取当前文档的标题 |
| document.characterSet | 返回文档使用的字符集 |
| document.head | 返回当前文档的<head>元素 |
| document.body | 返回当前文档的<body>元素 |
| doucment.images | 返回当前文档所有images元素的集合 |
| document.readyState | 返回当前文档的状态（loading：加载HTML代码阶段，尚未完成解析；interactive：加载外部资源；complete：全部加载完成） |
| document.compatMode | 返回浏览器处理文档的模式（BackCompat：向后兼容模式，即没有添加DOCTYPE；CSS1Compat：严格模式，添加了DOCTYPE） |
| document.location | 返回当前文档的URI |
| document.open | 打开一个要写入的文档，如果目标中存在文档，则此方法将清除它。要与window.open区分开 |
| document.close | 用来关闭向当前文档的数据写入，如果想要打开，使用document.open
|
| document.write | 用于向当前文档写入内容。只要当前文档还没有用close方法关闭，它所写入的内容就会追加在已有内容的后面。 |
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结构。
网友评论