《JS原理、方法与实践》- DOM中的HTML标准

虽然HTML中的接口数量非常多，但是结构很简单。首先是HTMLDocument和HTMLElement，这两个接口分别继承自Core标准中Document和Element，它们在原来的基础上添加了HTML特有的属性。然后是两个Collection: HTMLCollection和HTMLOptionsCollection。 HTML子标准的整体结构 HTMLCollection HTMLCollection用于表示HTML中相同类型节点的集合。例如：所有的div，所有的img，所有的span等等。 HTMLCollection接口只有三个属性： length: 包含节点的个数 item（index）: 按索引获取节点 namedItem（name）： 按名称获取节点。 代码示例： html 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); 测试结果 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： 节点的标题，它的作用时当鼠标停留在某个节点上时弹出相应的提示信息。 如果觉得文章写得还行，请点个赞。如果想与我进一步交流，可以关注我的公众号或者加我的微信。 个人微信 公众号_前端微说.jpg

本文章由javascript技术分享原创和收集