獲取跨度文本內容

Question

我能夠獲得divs樣式屬性轉換

HTML

<div xmlns="http://www.w3.org/1999/xhtml" _ngcontent-c6="" appdropzone="" 
   appmovablearea="" class="dropzone" id="toget" ng-reflect-ng-style=" 
   [object Object]" style="width: 100%;
   background-image: url(&quot;data:image/jpeg;base64,/9//2Q==&quot;);
   background-repeat: no-repeat; background-position: center center; 
   background-size: 100% 100%; border: 1px solid black; height: 340px;">

  <!--bindings={
  "ng-reflect-ng-for-of": " 502 "
  }-->

 <div _ngcontent-c6="" appmovable="" class="box draggable movable ng-star- 
  inserted"
  ng-reflect-ng-style="[object Object]" touch-action="none" 
  style="transform: translateX(196%) translateY(109.6%);">

  502

  <span _ngcontent-c6="" style="display: none">196.00003051757812</span>
  <span _ngcontent-c6="" style="display: none">109.5999755859375</span>

 </div>

 <!--bindings={
  "ng-reflect-ng-for-of": ""
 }-->

 </div>

編碼

 const floorImagePlanConatiner = document.createElement("div");
            floorImagePlanConatiner.innerHTML = floorImage;
            floorImagePlanConatiner.querySelectorAll("div")
                .forEach(element => {
                    this.droppeditem = [];
                    if(element.style.transform)
                        floor.droppeditem.
                        push(element.childNodes[0].textContent);                   
     });

我從后端響應得到的這個html元素，該響應分配給html div並進行迭代。 如何獲得跨度內容文本。 謝謝！

Answer 1

首先，您必須遍歷所有<div>並遍歷其子級（ <span> ）以獲取其文本內容。

此代碼將這樣做：

document.querySelectorAll('div').forEach(div => {
  div.querySelectorAll('span')
    .forEach(span => console.log(span.textContent));
});

Answer 2

您可以使用document.querySelectorAll('div span')來獲取所有<span>元素。

 document.querySelectorAll('div div').forEach(div => { console.log(div.style.transform); div.querySelectorAll('span').forEach(span => { console.log(span.textContent); }); }); 

 <div> <div style="transform: translateX(196%) translateY(109.6%);"> <span>196.00003051757812</span> <span>109.5999755859375</span> </div> </div>