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

目录
相关文章
|
14天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
13天前
|
缓存 监控 前端开发
JavaScript 实现大文件上传的方法
【10月更文挑战第17天】通过以上步骤和方法,我们可以实现较为可靠和高效的大文件上传功能。当然,具体的实现方式还需要根据实际的应用场景和服务器要求进行调整和优化。
|
22小时前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
23小时前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
8天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
46 6
|
6天前
|
JavaScript 前端开发 Go
异步加载 JS 的方法
【10月更文挑战第24天】异步加载 JavaScript 是提高网页性能和用户体验的重要手段。通过使用不同的方法和技术,可以实现灵活、高效的异步加载 JavaScript。在实际应用中,需要根据具体情况选择合适的方法,并注意处理可能出现的问题,以确保网页能够正常加载和执行。
|
17天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
18天前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
38 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
22天前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
22小时前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。