使用传统DOM可以访问哪些文档属性？-猿码集

使用传统DOM可以访问哪些文档属性？

传统DOM是指使用JavaScript语言来操作文档结构和样式的标准方法。在使用传统DOM时，可以访问以下文档属性：

1. document.title

document.title属性可以用于获取或设置文档的标题。例如：

// 获取文档标题
var title = document.title;
// 设置文档标题
document.title = "新的标题";

2. document.URL

document.URL属性可以用于获取文档的完整URL地址。例如：

var url = document.URL;

3. document.domain

document.domain属性可以用于获取或设置文档的域名。注意，设置document.domain属性的值只能是当前域名或其父域名。例如：

// 获取文档域名
var domain = document.domain;
// 设置文档域名
document.domain = "example.com";

4. document.referrer

document.referrer属性可以用于获取当前文档的来源URL地址。例如，如果用户从A网站跳转到B网站，那么B网站上的document.referrer属性值将会是A网站的URL地址。

var referrer = document.referrer;

5. document.documentElement

document.documentElement属性是文档根元素<html>的引用。可以使用它来操作文档的根元素。

// 获取文档根元素
var root = document.documentElement;
// 修改根元素样式
root.style.backgroundColor = "#f0f0f0";

6. document.body

document.body属性是文档元素的引用。可以使用它来操作文档的元素。

// 获取文档元素
var body = document.body;
// 修改元素的背景色
body.style.backgroundColor = "#ffffff";

7. document.characterSet

document.characterSet属性可以用于获取文档使用的字符集编码。

var charset = document.characterSet;

8. document.defaultView

document.defaultView属性是文档的默认视图对象。通常可以使用它来获取文档所属的窗口对象。

// 获取文档的默认视图对象
var view = document.defaultView;
// 获取文档所属的窗口对象
var window = view.window;

9. document.forms

document.forms属性是一个HTMLFormElement对象数组，包含了文档中所有的表单元素。可以使用它来操作和访问表单元素。

// 获取第一个表单
var form = document.forms[0];
// 获取表单中的所有文本框
var inputs = form.getElementsByTagName("input");
// 遍历文本框数组
for (var i = 0; i < inputs.length; i++) {
  // 访问文本框的value属性
  var value = inputs[i].value;
}

10. document.images

document.images属性是一个HTMLImageElement对象数组，包含了文档中所有的图片元素。

// 获取第一个图片元素
var image = document.images[0];
// 获取图片元素的宽度和高度
var width = image.width;
var height = image.height;

11. document.links

document.links属性是一个HTMLAnchorElement对象数组，包含了文档中所有的链接元素。

// 获取第一个链接元素
var link = document.links[0];
// 获取链接元素的href属性
var href = link.href;

12. document.scripts

document.scripts属性是一个HTMLScriptElement对象数组，包含了文档中所有的脚本元素。

// 获取第一个脚本元素
var script = document.scripts[0];
// 获取脚本元素的src属性
var src = script.src;

总结

传统DOM提供了丰富的方法和属性，可以方便地操作文档的结构和样式。熟练掌握这些方法和属性，能够提高前端开发效率，优化用户体验。在实际应用中，需要根据具体的需求来选择合适的方法和属性。

使用传统DOM可以访问哪些文档属性？