本文地址：http://www.cnblogs.com/veinyin/p/7606972.html
1 访问 HTML 元素
常用方法
-
document.getElementById("对应 ID");
-
document.getElementByTagName("对应标签名");
-
示例：
-
访问标签
1 document.getElementByTagName("img")[3]; 2 //访问第四个 img 标签
-
获取元素内容
var text = document.getElementById("对应 ID").innerHTML; -
为元素设置内容
document.getElementById("对应 ID").innerHTML = "要设置的内容";
-
2 节点特性
-
nodeValue ： 存储于节点的值，只限文本与属性节点使用 ( 不含元素 )
-
nodeType ： 节点类型，如 text ( 文本节点 ) , document ( 元素节点 ) 等，用代号表示
-
childNodes ： 包含节点下的所有子节点，是一个数组，排列顺序为在 HTML 代码中出现的顺序
-
firstChild ： 节点下的第一个子节点
-
lastChild ： 节点下的最后一个子节点
-
节点文本内容存储在其第一个子节点中
3 改变节点文本的安全三步骤
3.1 移除所有子节点
removeChild()
3.2 根据新内容创建新的文本节点
createTextNode()
3.3 把新创建的文本子节点附加在节点下
appendChild()
3.4 示例
1 var node = document.getElementById("ID"); 2 //获取节点赋给 node 3 4 //移除所有子节点 5 while(node.firstChild) 6 //如果还有第一个子节点 7 8 node.removeChild(node.firstChild); 9 //移除第一个子节点 10 11 node.appendChild(document.createTextNode("文本")); 12 //插入心创建的文本节点作为第一个子节点
4 通过 DOM 改变样式
DOM 不仅可以访问 HTML 元素，还可以直接修改相应的样式
-
className 节点特性改变节点的整份样式表
示例：
1 onmouseover = "this.className = 'hover'" 2 //其中 hover 为要设置的样式效果
-
style 节点特性访问节点的单一样式特性
示例：
1 document. getElementById("ID名").style.visibility = "hidden"; 2 3 //隐藏该元素
5、创建 HTML 元素
createElement("元素名");