Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   В var лежит блок html, внутри блока запрос querySelector('#text') не находит элемент (https://javascript.ru/forum/misc/74014-v-var-lezhit-blok-html-vnutri-bloka-zapros-queryselector-%27-text%27-ne-nakhodit-ehlement.html)

Alexoner 05.06.2018 19:00
В 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

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

j0hnik 05.06.2018 20:01
у вас там где 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>

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

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

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

Alexoner 05.06.2018 20:44
Что значит чёрный? Цвет или защита какая-то подразумевается?
Получаю блок так (первая строка поста):
var open_submit_button = document.getElementById('submit-button');

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

Alexoner 06.06.2018 01:45
Попробовал получить элемент и по 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>

j0hnik 06.06.2018 11:39 
<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>


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

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

j0hnik 06.06.2018 18:23
дайте ссылку я гляну

Alexoner 06.06.2018 19:31
Вот страница
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()


})();

j0hnik 06.06.2018 20:00
глянул, в консоле работает.

Alexoner 06.06.2018 20:20
И нет "null" и "is not a function..."? Я просто озадачен... А как запускаете? Может расширение у меня глючит или ещё что, даже не знаю как быть...

j0hnik 06.06.2018 20:23
Alexoner
просто в консол выполнил, глянул только селекторы
open_submit_button.querySelector("#text");
open_submit_button.querySelector("yt-formatted-string");


, может у вас ошибка в другом месте?

Alexoner 06.06.2018 20:53
А вы какой код в консоли выполняли, можете выложить? Пока у меня не срабатывает.

j0hnik 06.06.2018 20:56 
document.getElementById('submit-button').querySelector("yt-formatted-string");

Alexoner 06.06.2018 21:04
Запустил вашу строку в консоли. Ответ:
Uncaught TypeError: Cannot read property 'querySelector' of null
at <anonymous>:1:41
(anonymous) @ VM27285:1

Alexoner 06.06.2018 21:24
А нет, работает. Странно.
В коде вряд ли есть ошибки, так как в итоге HTML-блок в переменной появляется (что в начальном посте и описано), а вот внутри этого блока элемент найти не удаётся.
Благодарю за ответы. Буду думать дальше как быть...

Alexoner 07.06.2018 15:01
Решение нашлось: запуск внутреннего поиска с задержкой в одну секунду.
Не знаю почему так работает, ведь в переменной HTML-блок уже был, но видимо для внутреннего поиска он как бы ещё не успевает появиться. При запуске с задержкой он видимо появляется и всё работает.
Благодарю за помощь в поиске решения.
setTimeout(search1, 1000);
function search1(){
	var submit_button = open_submit_button.querySelector('#text');
}

j0hnik 07.06.2018 16:16
Alexoner,
просто блок подгружается динамически, и window.onload тут не помогает.
Либо таймаут, либо отслеживание появления через MutationObserver, или промис какой нибудь

Alexoner 08.06.2018 13:20
Благодарю за полезную информацию.


Часовой пояс GMT +3, время: 07:20.