getElementByIdx_x js自定义getElementById函数

2023年6月10日下午3:04 • JavaScript

自定义getElementById函数是指我们自己编写一个函数来实现与原生document.getElementById相同的功能，该功能就是获取HTML文档中指定id属性的元素节点。

以下是一个示例的自定义getElementById函数：

function getElementByIdx_x(id) {
  var docEl = document.documentElement;
  var element = null;
  if (docEl.querySelector) {
    element = docEl.querySelector('#' + id);
  } else if (docEl.querySelectorAll) {
    element = docEl.querySelectorAll('#' + id)[0];
  }
  return element;
}

该代码中，首先获取了文档的根元素document.documentElement。然后，使用querySelector或querySelectorAll方法来查找指定id的元素。这两种方法是W3C标准规定的元素选择器，具有良好的跨浏览器兼容性。如果浏览器不支持这两种方法，则返回null。

下面是一个具体的使用示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>自定义getElementById函数示例</title>
  </head>
  <body>
    <div id="example">这是一个div元素</div>
    <script>
      var divElement = getElementByIdx_x('example');
      console.log(divElement.innerText);
      // 输出：这是一个div元素
    </script>
  </body>
</html>

该示例中，在HTML文档中定义了一个id为example的div元素。然后，使用自定义的getElementByIdx_x函数来获取该元素，并输出其文本内容。

另一个示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>自定义getElementById函数示例</title>
  </head>
  <body>
    <p id="example">这是一个p元素</p>
    <ul id="list">
      <li>列表项1</li>
      <li>列表项2</li>
    </ul>
    <script>
      var pElement = getElementByIdx_x('example');
      console.log(pElement.innerText);
      // 输出：这是一个p元素
      var liElements = getElementByIdx_x('list').getElementsByTagName('li');
      for (var i = 0; i < liElements.length; i++) {
        console.log(liElements[i].innerText);
      }
      // 输出：列表项1
      // 输出：列表项2
    </script>
  </body>
</html>

该示例中，除了一个id为example的p元素以外，还有一个id为list的ul元素，其中包含两个li元素。使用自定义的getElementByIdx_x函数获取了p元素和ul元素，并使用getElementsByTagName方法来获取ul元素下的所有li元素，并输出每个li元素的文本内容。