0
let xxxy = document.getElementsByClassName("is-flex-container columns-3 alignwide wp-block-post-template is-layout-flow");

console.log(xxxy.children);

I am editing a WordPress theme and am trying to access the li children of a ul element. while logging out the ul parent (accessed as you can see in the first line of code) returns a node list with 1 element, as expected, logging out the children gives undefined (last line). what could be causing this?

j08691
  • 204,283
  • 31
  • 260
  • 272
Erkekjetter Silenoz
  • 29
  • 5
  • 1
    When you execute any code in the devtools console, the console shows you the result of executing the code (after anything the code itself may have shown you). `console.log` always returns `undefined`, so if you use `console.log("x")` (for instance) in the console, you'll see `x` and then `undefined` (the return avlue of `console.log`). – T.J. Crowder May 16 '23 at 14:43
  • 1
    Separately, though, looking at the code again: The [`HTMLCollection`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) instance that `getElementsByClassName` returns doesn't have a `children` property. Individual elements do, but not the collection. When you access a property that doesn't exist on a JavaScript object, you get the value `undefined`. – T.J. Crowder May 16 '23 at 14:44
  • that is great info for me, however: console.log(xxxy[0]); gives undefined also – Erkekjetter Silenoz May 16 '23 at 14:55
  • That means that the collection doesn't have any elements in it. More: http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element (Side note: I always suggest to people that instead of stumbling around in the dark with a `console.log` torch, they should *turn on the lights* using the [debugger](https://stackoverflow.com/questions/25385173/) built into their browser and/or IDE. Then you could inspect the contents of the collection directly, for instance.) – T.J. Crowder May 16 '23 at 15:00
  • to give you the full context, i am writing my code in a html document that contains some html, some style and some script in it. i just placed the lines of code i showed you at the very end of the file im in. same result. – Erkekjetter Silenoz May 16 '23 at 15:08
  • Again, that tells you that there are no elements in the collection. I should note that that's a **lot** of class names to have on the same element. ([`getElementsByClassName`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) is an "and," not an "or" -- it requires **all** of the classes be present. If you want "or," use `querySelectorAll`: `document.querySelectorAll(".is-flex-container, .columns-3, .alignwide, .wp-block-post-template, .is-layout-flow")`.) But fundamentally, what you need to debug is: Why aren't any elements matching? – T.J. Crowder May 16 '23 at 15:14
  • Or if you meant nesting, that isn't what `getElementsByClassName` does (but you could do it with `querySelectorAll`, class selectors, and child or descendant "combinators"). – T.J. Crowder May 16 '23 at 15:18

0 Answers0