JavaScript中常见的HTML DOM操作

来源：互联网发布：sql server 费用编辑：程序博客网时间：2024/05/17 04:28

DOM是文档对象模型(Document Object Model)的缩写，DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

以下是一段HTML的代码：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML DOM</title></head><body><h1>DOM的结构</h1><p><a href="href">链接</a></p></body></html>

同时，DOM解析HTML文档在内存中是以树状形式显示的。

* 元素对象
   * 获取元素对象
       * getAttribute("属性名称");                      获取属性的值
       * setAttribute("属性名称","属性的值");   设置或者修改属性的值
       * removeAttribute("属性名称");          删除属性
   * 获取元素下的所有子节点（*****）
       * ul.getElementsByTagName("li");

* 方法
   巧用this对象
   * hasChildNodes()       检查是否包含子节点
   * hasAttributes()           检查是否包含属性

   * appendChild(node)                父节点调用，在末尾添加子节点
   * insertBefore(new,old)           父节点调用，在指定节点之前添加子节点
   * replaceChild(new,old)           父节点调用，替换节点
   * removeChild(node)               父节点调用, 删除节点

   * cloneNode(boolean)               不是父节点调用,复制节点
       * boolean：      如果是true，复制子节点
                                 如果是false，不复制子节点，默认是false

* Document：代表整个文档
   * 方法：
       document.getElementById("id的值");
       通过元素的id的属性获取元素（标签）对象
       getElementsByName("name属性值");
       通过名称获取元素对象的集合（返回数组）
       getElementsByTagName("标签名称");
       通过标签名称获取元素对象的集合（返回数组）

       * write("文本的内容（html的标签）")       把文本内容写到浏览器上
       * createElement("元素名称");                   创建元素对象
       * createTextNode("文本内容")                    创建文本对象
       * appendChild("子节点")                       添加子节点

在末尾添加子节点示例：

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><ul><li>北京</li><li>上海</li><li>广州</li></ul></body><script type="text/javascript">//创建元素对象var li = document.createElement("li");//创建文本的对象var text = document.createTextNode("深圳");//把文本对象添加到元素对象下面，作为子节点li.appendChild(text);//获取ulvar ul = document.getElementsByTagName("ul")[0];//把元素对象添加到ul下面，作为子节点ul.appendChild(li);</script></html>

以及在指定节点之前添加子节点：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><ul id="ul"><li>Java</li><li id="C">C++</li><li>PHP</li></ul><ul><li id="py">Python</li></ul><button onclick="run()">我是按钮</button></body><script type="text/javascript">//* insertBefore(new,old)在指定节点之前添加子节点function run() {var ul = document.getElementById("ul");var C = document.getElementById("C");var py = document.getElementById("py");ul.insertBefore(py, C);alert("Test is successful！");}</script></html>

1 0