虽然HTML中的接口数量非常多,但是结构很简单。首先是HTMLDocument和HTMLElement,这两个接口分别继承自Core标准中Document和Element,它们在原来的基础上添加了HTML特有的属性。然后是两个Collection: HTMLCollection和HTMLOptionsCollection。
![HTML子标准的整体结构](https://upload-images.jianshu.io/upload_images/2789632-b3fa61a41bcab598.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
#### HTMLCollection
HTMLCollection用于表示HTML中相同类型节点的集合。例如:所有的div,所有的img,所有的span等等。
HTMLCollection接口只有三个属性:
* length: 包含节点的个数
* item(index): 按索引获取节点
* namedItem(name): 按名称获取节点。
代码示例:
html
```
<div id='div1'>a</div>
<div id='div2' name='two'>b</div>
```
js
```
var divCollection = document.getElementsByTagName('div');
console.log(divCollection instanceof HTMLCollection);
console.log(divCollection.length);
console.log(divCollection.item(0).textContent);
console.log(divCollection.namedItem('two').textContent);
```
![测试结果](https://upload-images.jianshu.io/upload_images/2789632-446ba77db8bd614f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
#### HTMLOptionsCollection
HTMLOptionsCollection和HTMLCollection接口类似,专门用来保存Select标签中Option标签所对应的HTMLOptionElement类型节点的集合。它比HTMLCollection接口多一个setLength(length)方法,用来指定Option节点的个数,其他方面和HTMLCollection接口完全相同。
#### HTMLDocument
HTMLDocument继承自Core子标准中的Document接口,用于表示HTML中的文档。HTMLDocument在Document的基础上增加了5个方法属性,3个读写属性和8个只读属性。
###### 方法属性
* open(): 打开一个流
* close(): 关闭open方法打开的流,并显示写入的数据
* write(text):写入数据。之前用到的一次,就是后台编辑好的页面,通过接口传递给前端一个文本数据,由于还需要加载对应服务的一些资源,就利用此方法,写入的iframe中。
* writeIn(text):写入数据,结尾换行
* getElementByName(name): 按照name属性获取节点,返回值为NodeList类型。
###### 读写属性
* body: body节点
* cookie: 当前文档的所有cookie
* title: 文档的标题,字符串类型,而不是title节点
###### 只读属性
* domain: 当前文档的域名
* URL: 当前文档的url
* referrer: 当前文档的前一个页面的url
* anchors: 当前文档的所有锚点(a标签)
* forms: 当前文档的所有表单
* images: 当前文档中的所有图片
* links: 当前文档的所有链接,包括所有带href的area标签和a标签
* applets: 当前文档的所有applet
#### HTMLElement
HTMLElement继承自Core的Element接口,新增了5个属性:
* className:即class属性,因为class时ES的关键词,故使用className
* id: id
* lang: language
* dir: direction
* title: 节点的标题,它的作用时当鼠标停留在某个节点上时弹出相应的提示信息。