ES6/ES2015で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; 
} 

Click here to check my example...

Answer 1

は、DOM要素

ありませんを取得するに関する新しい構文があり、ES2015ので、 （「ES6」）は言語標準です（今度は2回置き換え、ES2016とES2017） ）DOMとは独立しており、個別のブラウザで使用されるドキュメントオブジェクトモデルの標準です。

しかし、DOMはJavaScriptの新しい機能でよりうまくやっていくために比較的最近いくつかの方法で更新されています。私は冗長document.getElementByIdの代わりがあるとは思わないが、たとえばNodeListのforEachが返されたのはquerySelectorAllであり、引用符で囲んだコードで使用しているものは比較的新しく（IEのどのバージョンでもサポートされていない。 ）。これはJavaScriptで、

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>をマークし得ているので、（現代のブラウザ上で）動作します。同様に、これらの最新の更新をサポートする最新のブラウザ上で、あなたはES2015のfor-ofステートメントを使用することができますレルムは、JavaScript仕様ごとにIterableと扱われます。

Answer 2

ES6のDOM要素にアクセスすることについて特別なことは何もありません。あなたが以前に使ったのと同じです。

あなたはES6がhttps://www.tutorialspoint.com/es6/es6_browsers.htm