DOM

为了方便javascript语言通过dom操作html比较方便。

把html标签的内容划分为各种节点：

文档节点(document)-----body

元素节点-----标签

文本节点-----内容

属性节点

注释节点

获取元素节点（标签）

通过id获取：

document.getElementById(id属性值);

通过标签名来获取：

document.getElementsByName（标签名称）; //可获取多个标签

通过name属性获取：

document.getElementsByName（name属性值）;

通过class获取：

document.getElementsByClassName(class属性值);（不推荐）

注：收集的元素都是以字符串的形式返回的

获取文本节点（Nodes：节点）

var dd = document.getElementsByTagName('div')[0];

获取兄弟节点：

firstChild、lastChild:父节点获得第一个/最后一个子节点

nextSibling:获得下个兄弟节点

previousSibling:获得上个兄弟节点

childNodes:父节点获得内部全部的子节点信息

获取父节点

节点.parentnode

操作内容

非表单标签：标签对象.innerHTML ="123";

表单标签： 标签对象.value = 123;

操作内容：

alert(dd.innerHTML);----获取html的内容

dd.innerHTML= "div123";------修改内容

操作属性

标签对象.getAttribute(属性名) 获取属性的值

标签对象.setAttribute(属性名，属性值) 设置修改获取属性的值

创建删除标签：

节点创建和追加

节点创建

元素节点：document.createElement(tag标签名称);

文本节点：document.createTextNode(文本内容);

属性设置：node.setAttribute(名称，值);

.appendchild()

.replacechild(替换的内容，被替换的内容）

节点追加：

父节点.appendChild(子节点);

父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边

父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点

节点复制操作：

.clonenode(true)深层复制（本身和内部子节点都复制）

.clonenode(false)浅层复制（复制本身包括属性）

注意要追加到body里面，否则不显示

节点的删除：

（父节点）.parentnode.removeChild(子节点);

操作样式

标签对象.style.样式名（获取样式名的值）

标签对象.style.样式名（获取样式名的值）=样式值