js基础之DOM中document对象的常用属性方法详解

让我来为大家详细讲解一下“js基础之DOM中document对象的常用属性方法详解”的攻略。

1.前言

文中所述的javascript版本为ES6，由于部分新特性ES6尚未得到完全支持，因此可能有些内容需要在浏览器中运行才能体现。

2.document对象

2.1 常用属性

• document.URL：返回文档完整的URI地址。
• document.title：返回文档标题。
• document.images：返回网页中所有图片的集合。
• document.body：返回文档的body元素。
• document.forms：返回网页中的所有表单的集合。
• document.links：返回网页中所有带有 href 属性的元素集合。

2.2 常用方法

• document.getElementById(id)：根据ID获取元素节点对象。
• document.getElementsByTagName(tagName)：根据标签名获取元素节点对象集合。
• document.createElement(tagName)：创建指定名称的元素节点对象，但并未添加到文档树中。
• document.createTextNode(text)：创建包含指定文本内容的文本节点对象。
• document.write()：向文档输出流中写入HTML字符。
• document.writeln()：向文档输出流中写入HTML字符，并在结尾加入换行符。

示例1：通过document.getElementById()方法获取id为foo的元素节点对象，并修改其class属性。

const el = document.getElementById('foo');
el.classList.add('active');
console.log(el.className); // "foo active"

示例2：使用document.createElement()方法创建<li>元素节点对象，并将其添加到<ul>元素的末尾处。

const ul = document.querySelector('ul');
const li = document.createElement('li');
li.textContent = 'New List Item';
ul.appendChild(li);

3.总结

以上就是“js基础之DOM中document对象的常用属性方法详解”的攻略，文中讲解了document对象的部分常用属性和方法，并给出了两个示例，帮助大家更好地理解和掌握。希望本攻略能够对大家有所帮助。