标准DOM和HTML DOM总结

桃扇骨 2022-07-15 15:57 168阅读 0赞

操作HTML页面元素的方式有两种：标准DOM方式和HTML DOM方式

标准DOM提供了统一的操作接口：

*  createElement
 *  appendChild
 *  setAttribute
 *  removeAttribute
 *  nodeName

HTML DOM提供了封装好的各种对象：

*  Image
 *  Select
 *  Option

1.操作节点时：通常使用标准DOM操作，例如：

//创建节点
    var inputNode = document.createElement("input")；
    //查询节点
    var node = document.getElementById("node_id");
    //删除节点
    node.removeChild(childNode);

当然也可使用HTML DOM操作，例如：

//创建节点
    var imageNode = new Image();
    image.src  = "img.png";

2.操作属性时：通常使用HTML DOM操作，例如：

node.id = "button";
    node.value = "点击按钮";
    //为node添加点击事件，clickFunction()为无参方法
    node.onclick = "clickFunction";
    //为node添加点击事件,clickFunction(id)为有参方法
    node.onclick = function(){clickFunction(id)};

注意：在使用HTML DOM操作为节点添加点击事件时需注意：如果点击事件为无参方法，可直接通过方法名调用，如果点击事件为有参方法，需要先创建匿名方法，然后在该匿名方法中调用

当然也可以通过标准DOM操作，例如：

node.setAttribute("id", "button");
    node.setAttribute("value", "点击按钮");
    //为node添加点击事件,clickFunction()为有参方法
    node.setAttribute("onclick", "javascript:clickFunction(id)");

注意：如果需要删除属性，则只能使用标准DOM操作所提供的removeAttribute()方法，HTML DOM操作并没有提供相关功能

3.总结：HTML DOM对标准HTML元素对象（属性、方法）进行了封装，但无法实现所有的功能，优点是对常用元素对象进行简化操作，缺点是不能支持所有的元素；但标准DOM无所不能。

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML DOM

/ 作者：呆萌老师 ☑csdn认证讲师 ☑51cto高级讲师 ☑腾讯课堂认证讲师 ☑网易云课堂认证讲师 ☑华为开发者学堂

怼烎@/ 2024年04月07日 13:48/ 0 赞/ 60 阅读

相关 HTML DOM 入门知识点总结

HTML DOM 入门知识点总结 HTML DOM 节点概念获取节点节点的属性样式事件

迷南。/ 2022年10月12日 04:27/ 0 赞/ 214 阅读

相关 JavaScript HTML DOM

通过HTML DOM,可访问JavaScript HTML文档中所有的元素。当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)

古城微笑少年丶/ 2022年09月21日 08:22/ 0 赞/ 216 阅读

相关标准DOM和HTML DOM总结

操作HTML页面元素的方式有两种：标准DOM方式和HTML DOM方式标准DOM提供了统一的操作接口： createElement appendChild

桃扇骨/ 2022年07月15日 15:57/ 0 赞/ 169 阅读

相关 HTML DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），即DOM。现在就来简单总结一下。什么是DOM？ DOM 是 W3C（万维网联

墨蓝/ 2022年05月31日 23:06/ 0 赞/ 185 阅读

相关 HTML DOM

文章目录 HTML DOM 访问DOM节点操作DOM节点示例 HTML DOM > 当网页

迈不过友情╰/ 2022年04月25日 08:54/ 0 赞/ 185 阅读

相关 HTML DOM

一.什么是htmlDOM！ DOM 是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准： “W3C 文档对象模型（DOM）

小鱼儿/ 2022年02月01日 00:09/ 0 赞/ 240 阅读

相关区别：DOM Core 与 HTML-DOM

DOM（文档对象模型）是由W3C制定的一套访问和操作XML（eXtensible Markup Language）文档的标准，即API。比如DOM告诉JavaScript引擎如

墨蓝/ 2021年12月24日 09:43/ 0 赞/ 181 阅读

相关 JavaScript HTML DOM

本博客转载: [点击这里][Link 1] HTML DOM（文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Mode

傷城~/ 2021年12月01日 14:20/ 0 赞/ 351 阅读

相关 html DOM

在 HTML 中 DOM（文档对象模型）是 Web 前端里最基础、最常用的—模型。例如，一个网页其实就是一个 HTML 文件，经过浏览器的解析，最终呈现在用户面前。 HTM

╰+攻爆jí腚メ/ 2021年10月14日 04:46/ 0 赞/ 342 阅读