JS，的，Document对象

JS 的 Document 对象是用于操作 HTML 文档的核心对象，它是浏览器 DOM（文档对象模型）的一部分。Document 对象提供了许多方法和属性，用于访问和更改 HTML 文档的内容。在本篇文章中，我们将深入介绍 Document 对象的属性和方法，并提供实际的案例来说明其用法。

一、Document 属性

1. URL

URL 属性返回当前文档的完整 URL 地址。

```

console.log(document.URL); // http://example.com/index.html

```

2. domain

domain 属性返回当前文档的域名部分。

```

console.log(document.domain); // example.com

```

3. referrer

referrer 属性返回之前文档的 URL 地址。

```

console.log(document.referrer); // http://google.com

```

4. title

title 属性用于设置或获取文档的标题。

```

console.log(document.title); // My Website

document.title = "New Title";

```

5. cookie

cookie 属性用于设置或获取当前文档的 cookie。

```

document.cookie = "username=John Doe";

var x = document.cookie; // "username=John Doe"

```

6. body

body 属性用于获取文档的 body 元素。

```

var body = document.body;

```

二、Document 方法

1. getElementById()

getElementById() 方法用于获取指定 ID 的元素。

```

var element = document.getElementById("myElement");

```

2. getElementsByTagName()

getElementsByTagName() 方法用于获取指定标签名称的元素集合。

```

var elements = document.getElementsByTagName("p");

```

3. getElementsByClassName()

getElementsByClassName() 方法用于获取指定类名的元素集合。

```

var elements = document.getElementsByClassName("myClass");

```

4. querySelector()

querySelector() 方法用于获取第一个匹配指定选择器的元素。

```

var element = document.querySelector("#myElement");

```

5. querySelectorAll()

querySelectorAll() 方法用于获取所有匹配指定选择器的元素集合。

```

var elements = document.querySelectorAll("p.myClass");

```

6. createElement()

createElement() 方法用于创建指定标签名称的元素。

```

var element = document.createElement("div");

```

7. createTextNode()

createTextNode() 方法用于创建包含指定文本内容的文本节点。

```

var textNode = document.createTextNode("Hello World");

```

8. appendChild()

appendChild() 方法用于向指定元素的末尾添加子元素。

```

var parent = document.getElementById("parent");

var child = document.createElement("div");

parent.appendChild(child);

```

9. removeChild()

removeChild() 方法用于从父元素中删除指定子元素。

```

var parent = document.getElementById("parent");

var child = document.getElementById("child");

parent.removeChild(child);

```

10. replaceChild()

replaceChild() 方法用于替换父元素中的指定子元素。

```

var parent = document.getElementById("parent");

var oldChild = document.getElementById("old");

var newChild = document.getElementById("new");

parent.replaceChild(newChild, oldChild);

```

三、案例说明

为了更好地理解 Document 对象的使用方法，下面提供一些实际的案例。

1. 在指定元素中插入新元素

下面的代码演示了如何使用 Document 对象创建一个新的 div 元素，并将其添加到指定的元素中。

HTML:

```

```

JS:

```

var parent = document.getElementById("myDiv");

var child = document.createElement("div");

child.innerHTML = "Hello World";

parent.appendChild(child);

```

2. 获取表单数据

下面的代码演示了如何使用 Document 对象获取表单元素的值。

HTML:

```

```

JS:

```

var form = document.querySelector("form");

var username = form.username.value;

var password = form.password.value;

form.addEventListener("submit", function(event) {

event.preventDefault();

console.log("Username: " + username);

console.log("Password: " + password);

});

```

3. 显示和隐藏元素

下面的代码演示了如何使用 Document 对象显示和隐藏指定元素。

HTML:

```

Hide/Show

```

JS:

```

var button = document.getElementById("myButton");

var div = document.getElementById("myDiv");

button.addEventListener("click", function() {

if (div.style.display === "none") {

div.style.display = "block";

} else {

div.style.display = "none";

}

});

```

结论

通过本篇文章的介绍，我们了解到了 Document 对象的重要性和用法。Document 对象提供了丰富的方法和属性，用于快速操作 HTML 文档，并实现交互效果。在实际开发中，我们需要熟练掌握 Document 对象的使用方法，以便更加高效地开发出符合业务需求的应用。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/