如何在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")是一种语言标准(到目前为止已被ES2016,ES2017和ES2018取代),它独立于DOM,后者是浏览器中使用的文档对象模型的单独标准.

但请注意,DOM最近已经通过几种方式进行了更新,以便更好地使用JavaScript的新功能.我认为没有任何替代的详细信息document.getElementById,但是例如,你在引用的代码中使用forEach的NodeList返回querySelectorAll是相对较新的(并且在任何版本的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>

这是有效的(在现代浏览器上),因为NodeList已经标记iterable<Node>,在JavaScript领域,这意味着它根据JavaScript规范被视为可迭代.(对于稍微过时的环境,此答案显示了如何进行polyfill NodeList添加forEach和迭代.)

Answer 2

在 ES6 中访问 DOM 元素没有什么特别之处。它和你之前做的一样。

您可以使用$('#some_id').val() 或document.getElementById('id');等。

ES6 中没有类似的东西

要学习 ES6，请使用https://www.tutorialspoint.com/es6/es6_browsers.htm