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