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（＆＃34; ES6＆＃34;）是一种语言标准（已被ES2016，ES2017和ES2018取代，所以远离DOM，它是浏览器中使用的文档对象模型的单独的标准。

但请注意，DOM最近已经通过几种方式进行了更新，以便更好地使用JavaScript的新功能。我不认为有详细document.getElementById的替代品，但例如forEach NodeList querySelectorAll上的NodeList表示您{＆＃}}＃ 39;在引用的代码中重新使用是相对较新的（并且在任何版本的IE上都不受支持，尽管容易被填充）。同样，在支持这些最新更新的现代浏览器上，for-of实例可迭代，因此您可以使用ES2015的for (const li of document.querySelectorAll("li.li-class")) { console.log(li.innerHTML); }语句（以及使用迭代的其他构造，例如传播语法和解构）：

＆＃13;

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

＆＃13;

iterable<Node>

＆＃13;

可行（在现代浏览器上），因为NodeList已标记为NodeList，这在JavaScript领域意味着根据JavaScript规范将其视为iterable。（对于稍微过时的环境，this answer显示了如何填充forEach以添加<aplication> <activity android:windowSoftInputMode="stateHidden|adjustResize"/> </aplication>和可迭代性。）

Answer 2

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

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

在ES6中没有类似的东西

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

如何在ES6中获取DOM元素？

2 个答案: