how to get DOM element in ES6?

Question

I am new for ES6, I just want to know how to get dom element in ES6 is there new syntax regarding of getting dom element. What is the best way also please let me know.

In just simple way I am getting like this below example :-

<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;
}

T.J. Crowder · Accepted Answer · 2021-07-05T13:27:52.867

is there new syntax regarding of getting dom element

No, because ES2015 ("ES6") is a language standard (which has been superceded by ES2016, ES2017, ES2018, etc.; the latest is always here) that's independent of the DOM, which is a separate standard for the document object model used in browsers.

But note that the DOM has been updated in a couple of ways relatively recently to play more nicely with JavaScript's newer features. I don't think there's any replacement for the verbose document.getElementById, but for instance, the forEach on the NodeList returned by querySelectorAll that you're using in the quoted code is relatively new (and not supported on any version of IE, though easily polyfilled). Similarly, on a modern browser supporting these recent updates, NodeList instances are iterable so you can use ES2015's for-of statement (and other constructs using iterables, such as spread syntax and destructuring):

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>

That works (on a modern browser) because NodeList has indexed property getters which means that it's iterable in the JavaScript arena. (For slightly out-of-date environments, this answer shows how to polyfill NodeList to add forEach and iterability.)

(Confusingly, the DOM spec has an iterable declaration that you could reasonably think meant that the DOM collection it's on is iterable. Sadly, that's not what it means. That declaration means it has methods like forEach, keys, values, etc. [like JavaScript arrays do]. Not all iterable DOM collections are marked with the DOM iterable declaration, because not all iterable DOM collections could safely have those methods added to them for historical reasons. For example, HTMLCollection is iterable in the JavaScript sense, but isn't marked with the iterable declaration because it doesn't have those methods.)

Or the spread operator (`[...document.querySelectorAll('li')]`) to convert a `NodeList` to an array. — PeterMader, Aug 02 '17 at 09:33
document.querySelectorAll("li.li-class") I think it will affect on performance. So we can take in variable like this:- let liArray = document.querySelectorAll("li.li-class") — Narendra Jadhav, Aug 02 '17 at 09:40
@NarendraJadhav: No, not in the above. The `document.querySelectorAll` is performed **once**, and then its iterator is retrieved and used by the `for-of` expression. Details: http://www.ecma-international.org/ecma-262/8.0/index.html#sec-for-in-and-for-of-statements — T.J. Crowder, Aug 02 '17 at 09:47

score 5 · Answer 2 · edited Aug 02 '17 at 09:34

5

There is nothing special about getting access to DOM elements in ES6. Its same as you use to do earlier.

You can use$('#some_id').val() or document.getElementById('id'); etc.

There is nothing like that in ES6

To learns ES6 use https://www.tutorialspoint.com/es6/es6_browsers.htm

edited Aug 02 '17 at 09:34

PeterMader

6,987
1
21
31

answered Aug 02 '17 at 09:32

Hemant Nagarkoti

434
2
12

how to get DOM element in ES6?

2 Answers2