没有jquery的javascript find()函数

Question

我喜欢尝试新的东西。所以，我决定在不使用 jquery 的情况下制作自己的函数。我正在尝试构建 find()

所以，这是我的代码：

function $(el) {
  var firstChar = el.charAt(0),
      id = document.getElementById(el.slice(1));

  switch (firstChar) {
    case "#":
      return id;
      break;
  }
}

function find(el, loop) {
  return getElementsByTagName(el)[loop];
}

$("#test").find("h1", 0).innerHTML = "some text";

<div id="test">
  <h1>test one</h1>
  <h2>test two</h2>
</div>

它不起作用，在我的 Dreamweaver 错误日志中，它说getElementsByTagName未定义。

我的代码有什么问题？

Answer 1

getElementsByTagName必须在 DOMElement 上调用。例如document.getElementsByTagName 或yourElement.getElementsByTagName。

等价于find将是querySelectorAll和querySelector

 document.getElementById("#test").getElementsByTagName("h1")[0].innerHTML = "some text";

或者

 document.getElementById("#test").querySelector("h1").innerHTML = "some text";

或者

 document.getElementById("#test").querySelectorAll("h1")[0].innerHTML = "some text";

一个简单的实现，类似于它在 jQuery 中的实现方式，但只是概念代码的证明，在生产代码中没有使用任何东西：

 document.getElementById("#test").getElementsByTagName("h1")[0].innerHTML = "some text";

 document.getElementById("#test").querySelector("h1").innerHTML = "some text";