封装获取dom元素的简单实例

封装获取DOM元素的简单实例可以用以下步骤完成：

步骤1：选择DOM元素

首先，我们需要选择DOM元素。有几种选择DOM元素的方法：

通过ID选择

使用 document.getElementById() 方法通过ID选择一个DOM元素。例如：

const myElement = document.getElementById('my-id');

这将返回一个对象，它表示拥有指定ID的文档元素。你可以在代码中使用 myElement 变量与该元素进行交互。

通过类名选择

使用 document.getElementsByClassName() 方法通过类名选择多个DOM元素。例如：

const myElements = document.getElementsByClassName('my-class');

这将返回一个对象，它表示一个包含了所有指定类名的文档元素的集合。你可以在代码中使用 myElements 变量与这些元素进行交互。

通过标签名选择

使用 document.getElementsByTagName() 方法通过标签名选择多个DOM元素。例如：

const myElements = document.getElementsByTagName('div');

这将返回一个对象，它表示一个包含了所有指定标签名的文档元素的集合。你可以在代码中使用 myElements 变量与这些元素进行交互。

步骤2：封装获取DOM元素的函数

将DOM元素的获取封装在一个函数中，使得我们可以在代码中轻松调用该函数来获取需要的DOM元素。以下是一个JavaScript代码示例，其中定义了一个 getMyElement() 函数，以获取一个具有指定ID的DOM元素：

function getMyElement(id) {
  return document.getElementById(id);
}

该函数将使用一个 id 参数调用 document.getElementById() 方法，以选择相应的DOM元素，并将其作为函数结果返回。

步骤3：在代码中调用函数

我们现在可以在代码中轻松调用 getMyElement() 函数来获取具有指定ID的DOM元素。以下是一个JavaScript代码示例，其中使用 getMyElement() 函数获取具有ID my-id 的DOM元素，并将其内容设置为 'Hello World!'：

const myElement = getMyElement('my-id');
myElement.innerHTML = 'Hello World!';

上面这段代码先调用 getMyElement() 函数以获取具有ID my-id 的DOM元素，然后将其赋值给 myElement 变量。然后，它可以使用 myElement.innerHTML 属性来将元素的内容设置为 'Hello World!'。

示例1：获取一个按钮并为其绑定事件

以下是一个JavaScript代码示例，其中使用封装的函数来获取具有指定ID的按钮，并为其添加一个事件处理程序：

function addButtonClickListener(id, fn) {
  const button = document.getElementById(id);
  button.addEventListener('click', fn);
}

addButtonClickListener('my-button', function() {
  alert('Button clicked!');
});

上面这段代码中的 addButtonClickListener() 函数将选择一个具有指定ID的按钮，并使用 addEventListener() 方法为其添加一个单击事件处理程序。该函数接受两个参数：id和fn，分别为按钮ID和要为其添加的事件处理程序。然后，我们使用 addButtonClickListener() 函数来为具有ID my-button 的按钮添加一个事件处理程序，当单击按钮时，弹出一个警告对话框。

示例2：获取具有指定类名的所有元素

以下是一个JavaScript代码示例，其中使用封装的函数来获取具有指定类名的所有DOM元素，并将它们的内容设置为 'Hello World!'：

function setClassElementsContent(className, content) {
  const elements = document.getElementsByClassName(className);
  for (const element of elements) {
    element.innerHTML = content;
  }
}

setClassElementsContent('my-class', 'Hello World!');

setClassElementsContent() 函数将使用指定的类名 className 调用 document.getElementsByClassName() 方法，以选择所有拥有该类名的DOM元素。然后，它使用 for...of 循环遍历每个元素，并使用 element.innerHTML 将它们的内容设置为指定的 content。然后，我们可以使用 setClassElementsContent() 函数来将所有具有类名 my-class 的DOM元素设置为 'Hello World!'。