Document对象内容集合(比较全)

对于网站开发者而言，了解Document对象内容集合是相当重要的。这个集合包含了许多的内容，例如文档信息、头部信息、body信息、表单信息、链接信息、脚本等等，下面详细讲解一下。

一、Document信息（document信息集合）

Document信息集合提供了一堆有关于文档的重要信息，其中包括文档的标题、URL、网页DOM、脚本代码、cookie、user-agent 等等，它包含了以下几个常用的属性和方法。

// DOM操作
document.documentElement // 文档根元素
document.body // body元素

// 文档信息
document.title // 文档标题
document.URL // 文档URL
document.cookie // 文档cookie
document.referrer // 来源网址
document.lastModified // 文档最后修改时间

// 脚本相关
document.scripts // 获取所有脚本

// 编码相关
document.characterSet // 获取字符集
document.charset // 设置字符集

// 用户代理信息
document.defaultView.navigator.userAgent // 浏览器用户代理

二、头部信息（head信息集合）

Head信息集合包含了许多有关于头部信息的内容，比如 meta、title、link、style、script等等。下面是一些常用的属性和方法。

// 获取头部元素
document.head

// 获取meta元素
document.querySelector('meta[name="viewport"]')

// 获取统计代码的script标签，假设有ID name="stat-count"
document.querySelector('head script[id="stat-count"]')

// 获取所有link元素
document.querySelectorAll('link')

三、body信息（body信息集合）

Body信息集合主要包含了一些有关于文档内容的信息，如表单、图片、链接、视音频等。以下是一些常用的属性和方法。

// 获取 body 标签元素
document.body

// 获取所有图片元素
document.images

// 获取该页面的超链接
document.links

// 获取表单信息
document.forms

// 获取视频元素
document.querySelector('video')

四、链接信息（link信息集合）

链接信息集合主要用于获取当前页面中所有的链接信息。其包含以下属性和方法。

// 获取所有链接元素
document.links

// 获取链接总数量
document.links.length

// 获取某个链接元素
document.links[0]

// 获取Href属性值
document.links[0].href

// 获取链接文本
document.links[0].text

五、表单信息（Form信息集合）

Form信息集合主要用于获取当前页面中的表单相关信息。其中包含了一些常用的属性和方法。

// 获取所有form元素
document.forms

// 获取表单总数量
document.forms.length

// 获取某个表单元素
document.forms[0]

// 获取表单输入元素
document.forms[0].elements

// 获取表单提交事件
document.forms[0].onsubmit

总之，Document对象内容集合涵盖了网页开发中的各个方面，包含了建立一个完整的网站所需的重要信息和API接口。例如页面DOM结构、头部信息、body信息、表单等。对于开发者而言，理解和熟练应用这些信息和API接口是必不可少的。

阅读剩余 57%