DOM基础操作

本文地址：http://www.cnblogs.com/veinyin/p/7606972.html 

1 访问 HTML 元素

常用方法

• document.getElementById("对应 ID");

• document.getElementByTagName("对应标签名");

• 示例：

  • 访问标签

     document.getElementByTagName("img")[3];
     //访问第四个 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 示例

 var node = document.getElementById("ID");
 //获取节点赋给 node

 //移除所有子节点
 while(node.firstChild)
 //如果还有第一个子节点

     node.removeChild(node.firstChild);
     //移除第一个子节点

 node.appendChild(document.createTextNode("文本"));
 //插入心创建的文本节点作为第一个子节点

4 通过 DOM 改变样式

DOM 不仅可以访问 HTML 元素，还可以直接修改相应的样式

• className 节点特性改变节点的整份样式表

  示例：

   onmouseover = "this.className = 'hover'"
   //其中 hover 为要设置的样式效果

• style 节点特性访问节点的单一样式特性

  示例：

   document. getElementById("ID名").style.visibility = "hidden";
  
   //隐藏该元素

5、创建 HTML 元素

createElement("元素名");