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("元素名");