Почему querySelector возвращает null?

Question

[aliver13]

Есть html код, который выглядит следующим образом:

<ytd-compact-video-renderer>
    <!--css-build:shady-->
    <div id="dismissible">
       <div class="details">
          <div class="metadata">
             <a href="/watch?v=iukfirftk">
                <h3>
                   <span id="video-title">
                   text
                   </span>
                </h3>
                <div>
                   <ytd-badge-supported-renderer>
                      <!--css-build:shady-->
                      <dom-repeat id="repeat" as="badge">
                         <template is="dom-repeat"></template>
                      </dom-repeat>
                   </ytd-badge-supported-renderer>
                </div>
             </a>
             <div id="buttons"></div>
          </div>
          <div id="menu">
             <ytd-menu-renderer>
                <!--css-build:shady-->
                <yt-icon-button>
                   <!--css-build:shady-->
                   <button id="button">
                      <yt-icon>
                         <svg>
                            <g>
                               <path d="......"></path>
                            </g>
                         </svg>
                         <!--css-build:shady-->
                      </yt-icon>
                   </button>
                </yt-icon-button>
             </ytd-menu-renderer>
          </div>
       </div>
    </div>
 </ytd-compact-video-renderer>

Весь этот код находится в переменной element, которая имеет тип object.

Я из этого всего куска пытаюсь извлечь текст из span'a и делаю это так:

var title = element.querySelector("[id=video-title"])

В ответ получаю null.
Вообще ничего не получается вытянуть из куска этого кода. Даже так:

var title = element.querySelector("[id=dismissible"])

Почему так может быть? Возникает ощущение, что объект какой-то корявый. Что с ним можно сделать, как проверить это? Как вытянуть нужный текст?

А если пишут в консоль "element.innerHTML" возвращает пустую строку: ""
Хотя, если ввести просто `element`, то возвращает искомый объект

Comments

[Алексей Гончаров]

Можно ссылку на сайт

Answer 1

[Алексей Гончаров]

QuerySelector возвращает null когда он не нашел нужный элемент

Comments

[aliver13]

Как это возможно в данной ситуации?

[Алексей Гончаров]

aliver13, попробуйте document.querySelector а не element

[aliver13]

Алексей Гончаров, Да, так получается найти все элементы "#video-title", но это не есть оптимальный метод + надо перепиливать под него код.
Хотелось бы пойти тем путем, который был ранее, то бишь каждый из элементов запихивать в переменную element, а дальше уже работать конкретно с этой переменной

Вы предложили альтернативный путь решения проблемы, за что вам спасибо. Но он не оптимален для меня сейчас. Хотелось бы понять, в каком месте может возникать ошибка конкретно в моем случае

[Максим]

aliver13, document.getElementById разве не оптимален? Он как раз вернёт один единственный элемент

[Алексей Гончаров]

aliver13, для этого есть циклы, чтобы каждый элемент запихивать и работать.

let elements = document.querySelectorAll("#dismissible");

for (let element of elements) {
    //Тут код
}

[Алексей Гончаров]

Думаю что это теневой dom поэтому не получается. Попробуйте shadow root, attachShadow, в гугл полно информации

[Максим]

Алексей Гончаров, id и querySelectorAll ? что за жесть ?

[Алексей Гончаров]

Максим, не понял в чем именно вопрос

[Максим]

Алексей Гончаров, id не может быть больша одного, querySelectorAll вызовет коллекцию элементов то есть больше одного что для id не возможно

[Алексей Гончаров]

Максим, хм а если в html например не разбирающийся верстальщик присвоил множество id разным тегам?

[Максим]

Алексей Гончаров, Тогда надо ему об этом сказать но не учить как перебирать id ... вы же сами это понимаете, показать где ошибка и научить что перебираются class но не id

[Алексей Гончаров]

Максим, тогда думаю проблема с теневым DOM если возвращается null

[aliver13]

Максим, Алексей Гончаров, это гугл, мужики. И там полно повторяющихся id.
Алексей, вы правы. Судя по всему дело именно в DOM. Буду разбираться сегодня

Answer 2

[GR么ND]

Ошибка тут:

var title = element.querySelector("[id=dismissible"])

Вы не правильно поставили скобку. Используйте:

var title = element.querySelector("[id=dismissible]");

или var title = element.querySelector("#dismissible");

Comments

[aliver13]

Если бы.. :D

ps да, на хабре я реально допустил опечатку! Спасибо за вашу внимательность. Но в целом проблема не в этом, к сожалению

[GR么ND]

aliver13, хм, ещё актуально? Если да, то - более углублённо разберусь в коде и постараюсь помочь.