How to wait for elements to be loaded in DOM in JavaScript? - Stack Overflow

admin管理员组

文章数量:1399887

I have a problem with getting selector of an element in DOM, I placed the script source at the bottom of the HTML page and I also tried to wrap all codes in a function with "DOMContentLoaded" event, and it is still not working. in addition it disables jQuery that I am using it in my project.

This is how I get the selector:

const char = document.querySelectorAll('.text');
const num = document.querySelectorAll('span');

When I try to catch the selector in a function it works because it waits for the DOM to be loaded. I want to use these two variables in my code many times so I want them to be globally available and avoid repeating same line in many places.

Is there any way to wait for the DOM to be loaded and then get the elements selector globally?

I have a problem with getting selector of an element in DOM, I placed the script source at the bottom of the HTML page and I also tried to wrap all codes in a function with "DOMContentLoaded" event, and it is still not working. in addition it disables jQuery that I am using it in my project.

This is how I get the selector:

const char = document.querySelectorAll('.text');
const num = document.querySelectorAll('span');

When I try to catch the selector in a function it works because it waits for the DOM to be loaded. I want to use these two variables in my code many times so I want them to be globally available and avoid repeating same line in many places.

Is there any way to wait for the DOM to be loaded and then get the elements selector globally?

• javascript
• dom
• selector
• wait

Share Improve this question Follow edited Oct 11, 2021 at 12:29 MaHo asked Oct 6, 2021 at 12:09 MaHoMaHo 8311 gold badge22 silver badges99 bronze badges 7

• Native JS doesn't "disable" jQuery. But also: if you're using jQuery why are you using native JS? It makes sense to stick with one or the other. – Andy Commented Oct 6, 2021 at 12:15
• In order to wait for the dom to be loaded, you can use window.onload=yourfunction – Philippe Commented Oct 6, 2021 at 12:16
• @Andy I use jQuery for drag and drop functionality and native JS for saving the position of elements and manipulating localStorage and also changing style. – MaHo Commented Oct 6, 2021 at 12:18
• 1 Define them a global. Onload or DOMContentLoaded set the variables. – epascarello Commented Oct 6, 2021 at 12:25
• @epascarello can you please explain it a little bit more how should I do it? you mean I should define a DOMContentLoaded function and out of it the variable? sorry I have very limited experience in JS. – MaHo Commented Oct 6, 2021 at 12:37

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 3

Define them globally and set the with DOMContentLoaded

let char;
let num;
window.addEventListener('DOMContentLoaded', function() {
    char = document.querySelectorAll('.text');
    num = document.querySelectorAll('span');
});

document.querySelector("button").addEventListener("click", () => {
  console.log(char);
  console.log(num);
});

<div class="text"><span></span></div>
<div class="text"><span></span></div>

<button>Test</button>

Or make a getter

const elems = {
  domChars: null,
  domNum: null,
  get chars() {
    if (this.domChars === null) {
      this.domChars = document.querySelectorAll('.text');
    }
    return this.domChars;
  },
  get nums() {
    if (this.domNum === null) {
      this.domNum = document.querySelectorAll('span');
    }
    return this.domNum;
  }
};


document.querySelector("button").addEventListener("click", () => {
  console.log(elems.chars);
  console.log(elems.nums);
});

<div class="text"><span></span></div>
<div class="text"><span></span></div>

<button>Test</button>

本文标签： How to wait for elements to be loaded in DOM in JavaScriptStack Overflow