В var лежит блок html, внутри блока запрос querySelector('#text') не находит элемент
 

В переменной лежит блок html, но внутри блока не ищет элемент по запросу querySelector('#text'), хотя он там есть. Можете подсказать в чём проблема?


(ЗАПРОСЫ)

var open_submit_button = document.getElementById('submit-button'); 
open_submit_button.removeAttribute("disabled");

var submit_button = open_submit_button.querySelector('#text');

// вывод элемента 1
console.log('Элемент 1: open_submit_button - ' + open_submit_button); 
console.log(open_submit_button);                          

// вывод элемента 2
console.log('Элемент 2: submit_button - ' + submit_button); // выдаёт null
console.log(submit_button);

(ОТВЕТЫ В КОНСОЛИ)


Элемент 1: open_submit_button - [object HTMLElement]

<ytd-button-renderer id=​"submit-button" class=​"style-scope ytd-commentbox style-primary" button-renderer is-paper-button>
  <a class=​"yt-simple-endpoint style-scope ytd-button-renderer" tabindex=​"-1">
    <paper-button role=​"button" tabindex=​"0" animated aria-disabled=​"false" elevation=​"0" id=​"button" class=​"style-scope ytd-button-renderer style-primary" aria-label=​"Оставить комментарий" style>
      <yt-formatted-string id=​"text" class=​"style-scope ytd-button-renderer style-primary">​Оставить комментарий​</yt-formatted-string>
    </paper-button>
  </a>
</ytd-button-renderer>

Элемент 2: submit_button - null

null

--------- КОНЕЦ КОНСОЛИ ---------

у вас там где id= какой-то не понятный символ после равно.
сотрите везде равно и на печатайте с клавиатуры

<ytd-button-renderer id="submit-button" class=​"style-scope ytd-commentbox style-primary" button-renderer is-paper-button>
  <a class=​"yt-simple-endpoint style-scope ytd-button-renderer" tabindex=​"-1">
    <paper-button role=​"button" tabindex=​"0" animated aria-disabled=​"false" elevation=​"0" id=​"button" class=​"style-scope ytd-button-renderer style-primary" aria-label=​"Оставить комментарий" style>
      <yt-formatted-string id="text" class=​"style-scope ytd-button-renderer style-primary">​Оставить комментарий​</yt-formatted-string>
    </paper-button>
  </a>
</ytd-button-renderer>

<script>
	var open_submit_button = document.getElementById('submit-button');
//open_submit_button.removeAttribute("disabled");

var submit_button = open_submit_button.querySelector('#text');

// вывод элемента 1
console.log('Элемент 1: open_submit_button - ' + open_submit_button); 
console.log(open_submit_button);                          

// вывод элемента 2
console.log('Элемент 2: submit_button - ' + submit_button); // выдаёт null
console.log(submit_button);

</script>

О, благодарю! И как такую вещь только нашли? Этот блок кода с неподвластной мне страницы считывается. Случайно не знаете как эту ошибку можно обойти? Можно попробовать перерисовать другим скриптом прямо на странице, наверное...

тут видно что шрифт черный, значит что-то не так.

как вы этот блок получаете?

Что значит чёрный? Цвет или защита какая-то подразумевается?
Получаю блок так (первая строка поста):

var open_submit_button = document.getElementById('submit-button');

через расширение для браузера Tampermonkey.

Попробовал получить элемент и по id и по тегу:

var submit_button1 = open_submit_button.querySelector("#text");
var submit_button2 = open_submit_button.querySelector("yt-formatted-string");

И всё равно в переменных null... Даже не знаю, что за фигня.

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

<ytd-button-renderer id="submit-button" class="style-scope ytd-commentbox style-primary" button-renderer="" is-paper-button="">
  <a class="yt-simple-endpoint style-scope ytd-button-renderer" tabindex="-1">
    <paper-button role="button" tabindex="0" animated="" aria-disabled="false" elevation="0" id="button" class="style-scope ytd-button-renderer style-primary" aria-label="Оставить комментарий" style="">
      <yt-formatted-string id="text" class="style-scope ytd-button-renderer style-primary">Оставить комментарий</yt-formatted-string>
    </paper-button>
  </a>
</ytd-button-renderer>

(оригинал)

<ytd-button-renderer id="submit-button" class="style-scope ytd-commentbox style-primary" button-renderer="" is-paper-button=""><a class="yt-simple-endpoint style-scope ytd-button-renderer" tabindex="-1"><paper-button role="button" tabindex="0" animated="" aria-disabled="false" elevation="0" id="button" class="style-scope ytd-button-renderer style-primary" aria-label="Оставить комментарий" style=""><yt-formatted-string id="text" class="style-scope ytd-button-renderer style-primary">Оставить комментарий</yt-formatted-string></paper-button></a></ytd-button-renderer>

<ytd-button-renderer id="submit-button" class="style-scope ytd-commentbox style-primary" button-renderer="" is-paper-button="">
	<a class="yt-simple-endpoint style-scope ytd-button-renderer" tabindex="-1">
		<paper-button role="button" tabindex="0" animated="" aria-disabled="false" elevation="0" id="button" class="style-scope ytd-button-renderer style-primary" aria-label="Оставить комментарий" style="">
			<yt-formatted-string id="text" class="style-scope ytd-button-renderer style-primary">Оставить комментарий</yt-formatted-string>
		</paper-button>
	</a>
</ytd-button-renderer>


<script>
var open_submit_button = document.getElementById('submit-button');
var submit_button2 = open_submit_button.querySelector("yt-formatted-string");

	console.log(submit_button2);

</script>

работает вроде

На той странице это не работает. Возможно блокируется чем-то такой вариант получения данных. Решения пока не нашёл...

дайте ссылку я гляну

Вот страница
https://www.youtube.com/watch?v=gEIK9Tkw3KU

Вот весь код который пытаюсь применить.
(пишу его в расширении Tampermonkey браузера Chrome)

// ==UserScript==
// @name         test 23
// @namespace    YouTube
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        [url]https://www.youtube.com/*[/url]
// @grant        none
// ==/UserScript==
// [url]https://www.youtube.com/watch?v=gEIK9Tkw3KU[/url]


(function() {
    'use strict';

	window.onload = function() {

	  create_button (); // Создаёт кнопку

	  div1.onclick = function () {
				  div1_onclick();
			  }

	  var div1;

		// Создаёт кнопку
	  function create_button () {

		div1 = document.createElement('div');
		div1.innerHTML = 'кнопка';
		div1.style.zIndex = 9999;
		div1.style.marginTop = "42px";
		div1.style.color = "red";
		div1.style.fontSize = "15px";
		div1.style.background = "lime";
		div1.style.position = "fixed";
		div1.style.cursor = "pointer";
		document.body.appendChild(div1);
	  } //------ end function create_button


	  function div1_onclick (){

		window.scrollTo(0,600); // прокручивает окно для загрузки нужного элемента
		var elem1;

		get_elem();

			// ожидает загрузки нужного элемента на странице
			// innercount - счётчик попыток
		function get_elem(innercount = 0){

		 elem1 = document.getElementById('placeholder-area');

		 if (elem1 == null) {

			  // Ограничение на количество попыток поиска элемента.
		   if (innercount > 10 && innercount < 20) {

			  window.scrollTo(0,900); // прокрутить окно ещё немного

		   } if(innercount > 20) { // если прокрутка не помогла, то остановка поиска
			  alert("элемент не найден");
			  return;
		   }

		   innercount++; // количество попыток поиска
		   console.log('innercount - ' + innercount);

			  // запускается, пока не появится нужный элемент
		   setTimeout(get_elem, 1000, innercount);
		   console.log("IF: elem1 = " + elem1);

			//  элемент появился
		 } else {
		   console.log("ELSE: elem1 = " + elem1);

		  elem1.click(); // активирует загрузку блока для последующего поиска в нём

		   var open_submit_button = document.getElementById('submit-button'); // HTML-блок

		   var submit_button1 = open_submit_button.querySelector("#text"); // null...
		   var submit_button2 = open_submit_button.querySelector("yt-formatted-string"); // null...

		   // (ДРУГОЙ ПУТЬ)
		   // var submit_button_3 = document.getElementsByTagName("yt-formatted-string > ytd-button-renderer"); // collection хрень
		   // var submit_button_3 = document.querySelectorAll("yt-formatted-string > #text"); //Node хрень
		   var submit_button3 = document.getElementsByTagName("yt-formatted-string"); // куча элементов
		   //var inner_search = submit_button3.querySelector("#text"); // is not a function...
		   var inner_search = submit_button3.querySelectorAll("#text"); // is not a function...

		   console.log('Элемент 0: open_submit_button - ' + open_submit_button);
		   console.log(open_submit_button);

		   console.log('Элемент 1: submit_button1 - ' + submit_button1);
		   console.log(submit_button1);

		   console.log('Элемент 2: submit_button2 - ' + submit_button2);
		   console.log(submit_button2);

		   console.log('Элемент 3: submit_button3 - ' + submit_button3);
		   console.log(submit_button3);

		   console.log('Элемент 4: inner_search - ' + inner_search);
		   console.log(inner_search);
		 }
		} //---------- end function get_elem


	}; //------------div1.onclick = function()


  }; //------ end window.onload = function()


})();