我是 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;
}
最佳答案
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
声明,因为它没有这些方法。)
关于javascript - ES6中如何获取DOM元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45456811/