如何在ES6中获得DOM元素？

Question

我是ES6的新手，我只想知道如何在ES6中获取dom元素，关于获取dom元素有没有新的语法。最好的方法是什么也请让我知道。

以简单的方式，我得到了下面的例子：-

<ui class="ui-class">
  <li class='li-class'>http://www.google.com</li>
  <li class='li-class'>https://www.google.es/</li>
  <li class='li-class'>https://www.google.co.za/</li>
  <li class='li-class'>https://www.google.co.nz/</li>
</ui>
//get All li element using querySelectorAll
var allLiTag = document.querySelectorAll('li.li-class');

//ES6 for looping to get perticuler item one by one
allLiTag.forEach((liTag) => {
let innerText = liTag.innerText;
    liTag.innerHTML='Click here -:  <a href='+innerText+'>'+innerText+ '</a>'
});
//css part
.ui-class{
  font-size: 26px;
    padding: 10px;
}
.li-class{
      padding: 10px;
}

Answer 1

关于获取dom元素有新的语法吗

不，因为ES2015（“ES6”）是一个独立于DOM的语言标准（已经被ES2016、ES2017、ES2018等取代；最新的总是在这里），DOM是浏览器中使用的文档对象模型的单独标准。

但是请注意，DOM最近在几个方面进行了更新，以便更好地使用JavaScript的新特性。我认为没有任何东西可以替代冗长的document.getElementById，但是例如，您在引用的代码中使用的QuerySelectorAll返回的NodeList上的Foreach是相对较新的（任何版本的IE都不支持，尽管很容易填充）。类似地，在支持这些最新更新的现代浏览器上，NodeList实例是可迭代的，因此您可以使用ES2015的for-of语句（以及使用迭代的其他构造，如扩展语法和析构）：

for (const li of document.querySelectorAll("li.li-class")) {
    console.log(li.innerHTML);
}

<ul>
  <li class="li-class">one</li>
  <li class="li-class">two</li>
  <li class="li-class">three</li>
</ul>