Получить значение внутри div в javascript

Question

Я пытаюсь получить значение внутри div. Поскольку есть вложенные div, я не уверен, как получить значение. Вот пример, и я хочу получить "Pennsylvanian" и сохранить его в одной переменной.

<div id="map" onclick="mapzoom()" class="leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" tabindex="0">
  <div class="leaflet-pane leaflet-map-pane">
  <div class="leaflet-pane leaflet-tile-pane">
  <div class="leaflet-layer>
  <div class="leaflet-tile-container leaflet-zoom-animated">
  <div class="leaflet-popup-content" style="width: 78px;">
  <a href="https://en.wikipedia.org/wiki/Global_Boundary_Stratotype_Section_and_Point" target="_blank"> Pennsylvanian
 </a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>

Answer 1

Если это единственный <a> на странице, вы можете сделать это с помощью querySelector и innerText следующим образом:

const anchorTag = document.querySelector("a")
const text = anchorTag.innerText
console.log(text)

<div id="map" onclick="mapzoom()" class="leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" tabindex="0">
  <div class="leaflet-pane leaflet-map-pane">
    <div class="leaflet-pane leaflet-tile-pane">
      <div class="leaflet-layer">
        <div class=" leaflet-tile-container leaflet-zoom-animated ">
          <div class="leaflet-popup-content " style="width: 78px; ">
            <a href="https://en.wikipedia.org/wiki/Global_Boundary_Stratotype_Section_and_Point " target="_blank "> Pennsylvanian
 </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Но если у вас есть другой <a>, вам нужно присвоить ему уникальный id и получить его значение по этому id. Затем вы получите элемент, как и раньше, с document.querySelector("#nameOfId") или document.getElementbyId("nameOfId").

const anchorTag = document.getElementById("anchorTag")
const text = anchorTag.innerText
console.log(text)

<div id="map" onclick="mapzoom()" class="leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" tabindex="0">
  <div class="leaflet-pane leaflet-map-pane">
    <div class="leaflet-pane leaflet-tile-pane">
      <div class="leaflet-layer">
        <div class=" leaflet-tile-container leaflet-zoom-animated ">
          <div class="leaflet-popup-content " style="width: 78px; ">
            <a id="anchorTag" href="https://en.wikipedia.org/wiki/Global_Boundary_Stratotype_Section_and_Point " target="_blank "> Pennsylvanian
 </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>