JavaScript的document对象和window对象详解

2023年5月27日上午4:29 • JavaScript

来详细讲解一下“JavaScript的document对象和window对象详解”。

1. 什么是document对象和window对象

在JavaScript中，document对象和window对象都是很重要的全局对象，它们都是DOM（ Document Object Model，文档对象模型）的一部分，具有非常强的实用性。

1.1 document对象

document对象代表了当前网页的文档，它是网页的根节点。在JavaScript中，通过document对象可以获取网页的节点，比如标签、属性和文本内容等。

1.2 window对象

window对象代表的是一个浏览器的窗口，同时它也是网页的全局对象。通过window对象，我们可以访问和控制当前浏览器窗口的属性和方法。

2. document对象和window对象的常见用法

2.1 document对象的用法

2.1.1 获取元素节点

我们可以通过document对象获取HTML节点，包括元素节点和文本节点。

<!DOCTYPE html>
<html>
<body>

<p>点击 "Try it" 按钮来显示出指定 ID 的元素。</p>

<button onclick="getElement()">Try it</button>

<p id="demo">Hellow World</p>

<script>
function getElement() {
  var element = document.getElementById("demo");
  element.innerHTML = "欢迎使用";
}
</script>

</body>
</html>

上述示例代码中，使用 document.getElementById 方法来获取id为demo的元素标签，通过element的innerHTML属性可以修改该元素的内容。

2.1.2 创建和插入节点

<!DOCTYPE html>
<html>
<body>

<p>点击按钮在段落下创建节点</p>

<button onclick="createNode()">Create node</button>

<p id="demo"></p>

<script>
function createNode() {
  var newP = document.createElement("p");
  var textNode = document.createTextNode("这是新创建的一个段落节点");
  newP.appendChild(textNode);

  var targetNode = document.getElementById("demo");
  targetNode.appendChild(newP);
}
</script>

</body>
</html>

上述示例代码中，我们使用 document.createElement() 方法创建了一个新的P元素节点，使用 document.createTextNode() 方法创建了一个文本节点，通过 newP.appendChild() 将文本节点添加到元素节点中，然后通过 document.getElementById 来获取id为demo的元素标签，并通过targetNode的appendChild方法将新创建的P元素节点添加进去。

2.2 window对象的用法

2.2.1 打开和关闭新窗口

<!DOCTYPE html>
<html>
<body>

<p>点击 "打开新窗口" 按钮打开新窗口</p>

<button onclick="openWindow()">打开新窗口</button>


<script>
function openWindow() {
  window.open("https://www.baidu.com", "_blank", "width=600,height=400");
}
</script>

</body>
</html>

上述示例代码中，我们使用 window.open() 方法来打开一个新窗口，其中第一个参数指定URL，第二个参数指定打开方式，第三个参数可以指定新窗口的宽度和高度。

2.2.2 显示、隐藏元素

<!DOCTYPE html>
<html>
<body>

<p>点击 "隐藏P元素" 按钮隐藏元素，点击 "显示P元素" 按钮显示元素。</p>

<button onclick="hidePElement()">隐藏P元素</button>
<button onclick="showPElement()">显示P元素</button>

<p id="demo">欢迎使用</p>

<script>
function hidePElement() {
  var element = document.getElementById("demo");
  element.style.display = "none";
}

function showPElement() {
  var element = document.getElementById("demo");
  element.style.display = "block";
}
</script>

</body>
</html>

上述示例代码中，我们使用 getElementById() 方法获取id为demo的元素标签，然后通过 element.style.display = "none" 来隐藏元素，通过 element.style.display = "block" 来显示元素。