javascript - 有没有一种替代方法来检索javascript中的html元素

我试图更好地理解javascript，所以我决定使用vanilla javascript编写一个像库这样的基本JQuery。我遇到的问题是我试图获取html元素的属性或根据方式设置html元素的属性该函数被调用，但我仍然无法得到定义。我以为也许是因为它被读取为未定义，所以我只需要返回该函数，但是我没有得到null。我有点想找地图。请帮助

因此，我已经使用了querySelector和getAttribute函数，但是它的读值是未定义的。我假设由于其未定义，因此它在内存中只是未定义。有人可以帮助失去大脑的人吗？

function legion(selector) {
  const self = {
    attr: (attribute, value) => {
      if (value == null) {
        console.log("get")
        self.element.querySelector(attribute)
      } else if (value) {
        console.log("set")
        self.element.setAttribute(attribute, value)
      }
    },
  }

  return self;
};

console.log(legion("h1").attr(".class"))

<h1 class="class">h1</h1>
<h2 id="h2">h2</h2>
<h3 data="true">h3</h3>

我希望控制台记录课程

最佳答案

这是您可能想要实现的目标

function legion(selector) {
  const self = {
    element: document.querySelector(selector),
    attr: (attribute, value) => {
      if (value) {
        self.element.setAttribute(attribute, value)
        return self
      }
      return self.element.getAttribute(attribute)
    },
  }
  return self;
};

legion("h1").attr("class", "red")
console.log(legion("h1").attr("class"))

.red {
  color: red;
}

<h1 class="class">h1</h1>
<h2 id="h2">h2</h2>
<h3 data="true">h3</h3>