Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ben Os
20,008 PointsHow would you define DOM API?
for (const element of document.querySelectorAll(".elementor-button-link br")) {
element.style.display = "none";
}
I ran this code after the following didn't work:
document.querySelectorAll(".elementor-button-link br").element.style.display = "none";
A Js expert told me the problem with the second piece was that the "DOM API" doesn't allow iterating parentNodes for childNodes (on top of that, I concluded that the Js was fine but it's just the DOM API that isn't updated to allow it and a special ES16 loop is needed for that if a vanilla solution is desired).
I know that there is the DOM, and there is Javascript I use (as for now very basically) to manipulate the DOM elements. But what is the DOM API or rather your definition for it?
I understand this could be defined as "the interface between Js and the DOM", but I feel this definition might be too short.
What do you think?
Joel Kraft Guil Hernandez might be a nice idea for a workshop?
2 Answers
Steven Parker
231,007 PointsThis is not something that an "update" would apply to.
I think you mean "ES6" (since there is no "ES16"), and most browsers provide that already. Nothing in it would affect the behavior of the code shown here.
The "DOM API", normally referred to simply as the DOM, is a representation the page as nodes and objects that programs can use change the document structure, style and content. More information can be found on this MDN page on the DOM, or this page covering properties and methods.
The querySelectorAll method you are calling returns a nodeList, which has no "element" property. It does, however, have a method for iteration named "forEach", which you could use like this:
document.querySelectorAll(".elementor-button-link br").forEach(e => e.style.display = "none");
james south
Front End Web Development Techdegree Graduate 33,271 Pointsif you see this:
https://developer.mozilla.org/en-US/docs/Web/API/NodeList
it has what you can and can't do with nodeLists which is what qSA returns. follow the breadcrumb trail up one to see all the web APIs.
Ben Os
20,008 PointsBen Os
20,008 PointsIndeed, it is ES6, I confused. Thank you for clarifying there is no difference between "DOM" and "DOM API" and I also enjoyed reading the alternative code you presented with the for...each instead of for...of.