JavaScript的文档对象模型（DOM）是构建动态网页的关键，其中document对象作为核心，提供了访问和修改HTML或XML文档内容的强大API。document对象代表了当前加载的HTML或XML文档，并包含了对文档中所有元素的引用，如文本、图像、链接、表格等。通过document对象，开发者可以动态地创建、修改、删除文档内容。

获取DOM节点

使用document对象，可以方便地获取文档中的元素。以下是一些常见的方法：

  1. 通过ID获取元素：
javascript复制代码
 var element = document.getElementById("elementId");
  1. 通过选择器获取元素：
  • 获取文档中的第一个指定标签：
javascript复制代码
 var firstParagraph = document.querySelector('p');
  • 获取文档中所有指定标签：
javascript复制代码
 var allParagraphs = document.querySelectorAll('p');
  • 获取文档中所有指定类型的标签，以列表形式返回：
javascript复制代码
 var allDivs = document.getElementsByTagName('div');

修改DOM节点

获取到元素后，可以修改其内容或属性：

  1. 修改元素内容：
javascript复制代码
 element.innerHTML = "新内容";
 
 element.textContent = "Hello, World!";
  1. 修改元素样式：
javascript复制代码
 element.style.color = "red";
 
 element.style.backgroundColor = "blue";
 
 element.style.fontSize = "30px";
  1. 添加或移除CSS类：
javascript复制代码
 element.classList.add('highlight');
 
 element.classList.remove('hidden');

创建和添加新节点

可以使用document对象创建新的HTML元素，并将其添加到文档中：

  1. 创建新元素：
javascript复制代码
 var newElement = document.createElement("div");
  1. 添加新元素到父元素：
javascript复制代码
 parentElement.appendChild(newElement);

事件处理

document对象允许监听用户事件，如点击、键盘事件等，以下是一个简单的示例：

  1. 绑定点击事件：
javascript复制代码
 document.getElementById('myButton').addEventListener('click', function() {
 
     alert('Button clicked!');
 
 });
  1. 监听键盘事件：
javascript复制代码
 document.addEventListener('keydown', function(event) {
 
     if (event.key === 'Escape') {
 
         alert('Pressed Escape!');
 
     }
 
 });

其他常用属性和方法

document对象还提供了许多其他属性和方法，用于操作文档的整体属性：

  1. 设置文档标题：
javascript复制代码
 document.title = "新标题";
  1. 获取或设置文档URL：
javascript复制代码
 var currentUrl = document.URL;
  1. 动态向页面写内容：
javascript复制代码
 document.write("动态内容");
  1. 获取文档的创建和修改日期：
javascript复制代码
 var createDate = document.fileCreateDate;
 
 var modifiedDate = document.fileModifiedDate;
  1. 设置和读取Cookie：
javascript复制代码
 document.cookie = "key=value";
 
 var cookies = document.cookies;

通过掌握document对象的使用方法，开发者可以构建出动态、交互性强的网页。这些基础技能对于成为一名高效的网页开发者至关重要。在实际开发中，建议结合在线资源进行更深入的实践与探索，以不断提升编程水平