DOM基础操作

本文地址：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("元素名");

感谢您的阅读及指正，让我们一起进步。
欢迎联系我交流：veinyin@gmail.com
作者：VeinYin
博客地址：https://www.cnblogs.com/veinyin/
如需转载请注明出处。