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

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

虽然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: 节点的标题,它的作用时当鼠标停留在某个节点上时弹出相应的提示信息。

目录
相关文章
|
3天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
54 33
|
2天前
|
缓存 NoSQL JavaScript
Vue.js应用结合Redis数据库:实践与优化
将Vue.js应用与Redis结合,可以实现高效的数据管理和快速响应的用户体验。通过合理的实践步骤和优化策略,可以充分发挥两者的优势,提高应用的性能和可靠性。希望本文能为您在实际开发中提供有价值的参考。
21 11
|
24天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
101 24
|
1月前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
|
2月前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
101 17
|
1月前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
92 2
|
2月前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
2月前
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
73 5
|
2月前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。