标准DOM和HTML DOM总结

操作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无所不能。