核心(Core)Dom与HTML DOM的概念和区别
什么是DOM
DOM全称Document Object Model(文档对象模型),DOM 定义了访问 HTML 和 XML 文档的标准。
W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档(包括HTM、XHTML和XML)的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
HTML DOM与核心DOM的区别区别与联系
两者联系
HTML DOM的很多对象模型来自于核心DOM，例如，HTMLDocument接口继承自核心DOM的Document接口，但HTMLDocument包含有专用于HTML文档操作的方法和属性。
两者区别
- 相对于核心DOM，HTML DOM定义了用于操作HTML文档专用的API,是对核心DOM的扩展。
- HTML DOM提供了大量便利的方法和属性，可以以一种简便的方法访问DOM树。
| / | 核心DOM | HTML DOM |
|---|---|---|
| 对象 | Document,Node, ElementNode,TextNode,AttributeNode，CommentNode,NodeList | image,Table,Form,Input,Select…HTML标签对象化 |
| / | 核心DOM提供了统一的操作接口：createElement，appendChild，setAttribute，removeAttribute，nodeName | HTML DOM提供了封装好的各种对象：Image，Select，Option |
| 创建新元素 | var newNode=document.createElement(“img”) | var newNode=new Image()； |
| 给元素添加属性 | elem.setAttribute(‘属性名’,属性值); | img.src=’’;img.id=’’;imd.title=’’;img.className=’’ img.style.display=’’; |
| 适用场景 | 核心DOM适合操作节点，如创建，删除，查找等，把DOM看成树，则核心 DOM适合，增减枝干，查找特定枝干 | HTML DOM适合操作属性，如读取或修改属性的值，给枝干更改外观，颜色，属性，样式 |
HTML DOM常用对象
HTML DOM对常用的元素，提供了简化版的API。
1.Image：指页面上一个img元素
var img=new Image()
// 相当于document.createElement("img")2.Select：指一个select元素
属性：
select.selectedIndex 快速获得当前选中项的下标位置
select.value 当选中项有value属性时,会返回option的value,如果选中项没有value属性，则用内容代替
select.options 获得select下所有option元素对象的集合
select.options.length 获取或设置选项的个数,可简写为select.length
// 清空所有option
select.innerHTML="";
select.length=0; // sel.options.length=0;方法：
select.add(opt) 将opt追加到select元素下，相当于select.appendChild(opt),问题是不支持frag
select.remove(i) 移除select中i位置的opt
事件：
onchange 当选中项发生改变时
3.Option对象：指select下一个option元素
创建：var opt=new Option(text,value);，相当于
var opt=document.createElement("option");
opt.innerHTML=text;
opt.value=value;属性: .index 、 .text 、 .value
4.Table:指代一个table元素
创建:
var thead=table.createTHead()
var tbody=table.createTBody();
var tfoot=table.createTFoot();删除:
table.deleteTHead()
table.deleteTFoot()获取: tabel.tHead table.tFoot table.tBodies[i]
行分组：
创建: var tr=行分组.insertRow(i)
在结尾追加一行: 行分组.insertRow()
在开头插入一行: 行分组.insertRow(0)删除：行分组.deleteRow(i); 删除i行，如果省略i,表示删除第一行，i都是相对于当前行分组内的下标位置
格：
访问：行.cells
插入：var td=行.insertCell(i);
删除：行.deleteCell(i);5.Form：指代页面上一个表单元素
获取:var form=document.forms[i/id/name];
属性: form.elements 获得表单中所有表单元素的值
表单元素包括: input select textarea button
form.elements.length 获得表单中表单元素的个数
form.length==> form.elements.length// 获得结尾的按钮
var btn=form.elements[form.length-n]