javascript - 获取span文本内容

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));
});