javascript - 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

is there new syntax regarding of getting dom element

不，因为ES2015(“ES6”)是一种独立于DOM，它是浏览器中使用的文档对象模型的ES2016。

但请注意，最近 DOM 已经以多种方式进行了更新，以便更好地与 JavaScript 的新功能配合使用。我认为没有任何替代详细的document.getElementById，但例如，您在引用的代码中使用的forEach返回的NodeList上的querySelectorAll相对较新(并且不受支持)任何版本的 IE，尽管很容易进行多填充)。同样，在支持这些最新更新的现代浏览器上，NodeList实例是可迭代的，因此您可以使用 ES2015 的for-of语句(以及使用可迭代的其他构造，例如扩展语法和解构): p>

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>

这有效(在现代浏览器上)，因为ES2017具有索引属性 getter ，其中ES2018在 JavaScript 领域是here。 (对于稍微过时的环境，separate standard展示了如何填充NodeList以添加NodeList和可迭代性。)

(令人困惑的是，DOM 规范有一个 forEach ，您可以合理地认为它意味着它所在的 DOM 集合是可迭代的。遗憾的是，这不是它的意思。该声明意味着它具有诸如iterable、forEach之类的方法” 、 keys 等[就像 JavaScript 数组一样]。并非所有可迭代 DOM 集合都标有 DOM values 声明，因为并非所有可迭代 DOM 集合由于历史原因，可以安全地将这些方法添加到其中。例如，means that在 JavaScript 意义上是可迭代的，但没有标记为iterable声明，因为它没有这些方法。)