Document对象是JavaScript中表示整个HTML文档的接口。它提供了许多属性和方法,用于操作和访问HTML文档中的元素和内容。
属性:
1. `document.documentElement`:返回文档中的根元素(通常是``元素)。
2. `document.head`:返回文档中的头部元素(`
`)。3. `document.body`:返回文档中的主体元素(`
`)。4. `document.title`:获取或设置文档的标题。
5. `document.URL`:返回文档的URL地址。
6. `document.domain`:获取或设置文档的域名。
7. `document.forms`:返回文档中的所有表单元素。
8. `document.links`:返回文档中的所有链接元素。
9. `document.images`:返回文档中的所有图片元素。
10. `document.scripts`:返回文档中的所有脚本元素。
方法:
1. `document.getElementById(id)`:根据元素的id属性获取元素。
2. `document.getElementsByClassName(class)`:根据元素的class属性获取元素。
3. `document.getElementsByTagName(tagName)`:根据元素的标签名获取元素。
4. `document.createElement(tagName)`:创建一个新的元素节点。
5. `document.createTextNode(text)`:创建一个新的文本节点。
6. `document.querySelector(selector)`:根据CSS选择器获取匹配的第一个元素。
7. `document.querySelectorAll(selector)`:根据CSS选择器获取匹配的所有元素。
8. `document.write(content)`:向文档中写入内容,会覆盖现有的文档内容。
9. `document.open()`:打开一个文档流,用于写入新的内容。
10. `document.close()`:关闭打开的文档流。
案例说明:
1. 获取元素:
```javascript
var element = document.getElementById("myElement");
```
2. 修改元素内容:
```javascript
element.innerHTML = "New content";
```
3. 创建元素并添加到文档中:
```javascript
var newElement = document.createElement("div");
newElement.textContent = "New element";
document.body.appendChild(newElement);
```
4. 修改文档标题:
```javascript
document.title = "New title";
```
5. 使用选择器选择元素:
```javascript
var elements = document.querySelectorAll(".myClass");
```
6. 添加事件监听器:
```javascript
element.addEventListener("click", function() {
console.log("Element clicked");
});
```
7. 修改表单值:
```javascript
document.forms[0].elements[0].value = "New value";
```
8. 加载外部脚本:
```javascript
var script = document.createElement("script");
script.src = "script.js";
document.head.appendChild(script);
```
以上只是一些Document对象的常见用法和案例,实际上,Document对象还有许多更复杂和强大的功能,可以用于处理和操控HTML文档中的各种元素和内容。 如果你喜欢我们三七知识分享网站的文章, 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔!https://www.37seo.cn/
原来生活如此简单,你希望自己好运,就祝福别人好运。一切美好,皆源于一颗感恩的心!感恩生命中所有的相遇!感恩这一路上所有的人。