Я хочу, чтобы тег элемента был напечатан в консоли, просто щелкнув по нему

#javascript #html #onclick

Вопрос:

Я хочу, чтобы тег элемента был напечатан в консоли, просто нажав на него, но, похоже, это не работает, и я не понимаю, почему?

может ли кто-нибудь указать на ошибку в моей логике?

 let bodyChildren = document.body.children; let bodyArr = Object.values(bodyChildren);  for (i = 0; i lt; bodyChildren.length; i  ) {  bodyArr[i].onclick = function () {  console.log(bodyArr[i].tagName);  }; }

1. С тех пор вы должны сделать функцию рекурсивной. Текущий код не обязательно будет работать для детей детей (т. е. он не будет работать для всего DOM на вашей странице)

2. как я могу это сделать ?

3. хорошо, спасибо за ссылку, ценю это

Ответ №1:

Проблема в том, что когда вы определяете функцию, все в ней содержится в отдельной области. В пределах функции bodyArr неизвестно. Вместо этого вы можете использовать this ссылку на щелкнутый элемент, как показано ниже:

document.body.children будет относиться только к прямым дочерним элементам body элемента. Если вы хотите ссылаться на каждый элемент в DOM, вы можете использовать document.getElementsByTagName("*") вместо этого.

Когда код написан глобально, как в приведенном ниже фрагменте, переменная bodyArr фактически доступна в глобальной области, как и переменная i . Но имейте в виду, что код внутри функции выполняется только при нажатии на элемент. В этот момент for цикл был полностью выполнен, оставив i значение 3 (так как во фрагменте ниже script тег также имеет значение). bodyArr всегда будет содержать ровно на 1 элемент меньше, независимо от того, сколько элементов находится в DOM. В этом случае он содержит 3 элемента, последний из которых сохраняется в позиции 2 (на основе нуля) в массиве, следовательно bodyArr[i] , равен undefined .

 let bodyChildren = document.body.children; let bodyArr = Object.values(bodyChildren); for (i = 0; i lt; bodyChildren.length; i  ) {  bodyArr[i].onclick = function () {  console.log(this.tagName);  } }

 lt;spangt;child1lt;/spangt; lt;pgt;child2lt;/pgt;

1. Вы получили правильный ответ. Это можно улучшить, так как оно работает только для элементов верхнего уровня (не будет работать для всего DOM).

2. Я думал, что bodyArr находится в глобальной области, поэтому функция может работать с ним

3. @zaydmerzougui см. мой отредактированный ответ для объяснения того, почему он все еще не работает, хотя переменная действительно доступна в глобальной области.

Ответ №2:

Вам нужно получить ВСЕ элементы из тела документа, и это КЛЮЧ: var all = document.getElementsByTagName(«*»);

 var all = document.getElementsByTagName("*"); let bodyArr = Object.values(all);  for (i = 0; i lt; bodyArr.length; i  ) {  bodyArr[i].onclick = function () {  console.log(this.tagName);  }; }

 lt;spangt;Hello worldlt;/spangt;