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

目录
相关文章
|
22天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
7天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
101 52
|
21天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
21天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
10天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
|
21天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
36 7
|
19天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
33 3
|
22天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
35 4
|
21天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
49 0
html5+three.js公路开车小游戏源码
|
2月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。