DOM基础操作

时间：2022-06-02 02:20:45

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

相关文章