select 如何使用js在同一個div中的所有跨度

Question

我的代碼可以 select 只有代碼中的第一個跨度，當我使用getElementsByTagName時出現錯誤

TypeError：無法在“Node”上執行“insertBefore”：參數 2 不是“Node”類型。 在 HTMLDivElement。

現在任何人都可以幫助我 select 卡中的所有跨度我也有很多卡包含跨度

const last = document.getElementById('last'); // define parent contain all cards

last.addEventListener("click", (event)=>      // add click event in parent
  {
  if(event.target.tagName === 'I')            // Write 'I' not 'i'tag name must be upper case
    {
    const icon = event.target;                       // define the target element
    const card = icon.parentNode;
    if(icon.getAttribute('value') === 'remove')      // get attribute from i element to remove target card
      {
      last.removeChild(card);                        // remove target card
      }
    else if(icon.getAttribute('value') === 'edit')   // get attribute from i element to edit target card
      {
      const span      = card.firstElementChild;
      const input     = document.createElement('input');  // create input text to carry span value and can edit it
      input.type      = 'text';                           // add type to input
      input.value     = span.textContent;                 // take the text from span to the input
      card.insertBefore(input, span);                     // change the place between input and span
      card.removeChild(span);                             // remove span and add input in the same place
      icon.className  = 'fa fa-check-circle';             // change icon from 'fa-edit' to 'fa-check-circle' to change icon shape
      icon.setAttribute('id','green-color');              // change ID from 'edit' to 'green-color' to make icon have green color when hover on it
      icon.setAttribute('value','');                      // remove value from icon to enter in the next 'if else'
      }
    else if(icon.getAttribute('value') === '')
      {
      const input      = card.firstElementChild;
      const span       = document.createElement('span'); // create span to carry the input value
      span.textContent = input.value;                    // take the text from input to the span
      card.insertBefore(span, input);                    // change the place between input and span
      card.removeChild(input);                           // remove span and add input in the same place
      icon.className   = 'fa fa-edit';                   // change icon from 'fa-check-circle' to 'fa fa-edit' to change icon shape
      icon.setAttribute('id','');                        // remove ID 'green-color' to make icon have blue color when hover on it
      icon.setAttribute('class','fa fa-edit edit');      // change ID from 'green-color' to 'edit' to make icon have green color when hover on it
      icon.setAttribute('value','edit');                 // Make value 'edit' to enter in first 'if else' condation
      }
    }
  })

<div class="row last" id="last">
  <h4 class="exam-header col-12">Schedule of exams dates</h4>
  <a class="exam-info teacher-link text-md-center col-8" id="teacher-link" href="#">
    <span class="subject subject-name">Computer Science</span>
    <span class="subject subject-date">2021/12/2</span>
    <span class="subject subject-time">9:00 AM</span>
    <span class="subject subject-duration">2h</span>
    <i class="fa fa-edit edit" value="edit"></i>
    <i class="fa fa-times remove" value="remove"></i>
  </a>
  <a class="exam-info teacher-link text-md-center col-8" id="teacher-link" href="#">
    <span class="subject subject-name">Computer Science</span>
    <span class="subject subject-date">2021/12/2</span>
    <span class="subject subject-time">9:00 AM</span>
    <span class="subject subject-duration">2h</span>
    <i class="fa fa-edit edit" value="edit"></i>
    <i class="fa fa-times remove" value="remove"></i>
  </a>
</div>

Answer 1

有一種更好的方法可以監聽多個 div/card 上的事件。 獲取對包含所有卡片的元素的引用，聽聽點擊。

const cardContainer = document.querySelector('div.card-list');
cardContainer.addEventListener("click", (event) => {
  const clickedElement = event.target;
  // put your event logic here - might need to verify the 'target' is the expected element.
});

要記住的另一個技巧是使用querySelectorAll來獲取多個匹配項，然后遍歷它們：

const allSpans = document.querySelectorAll('div span');

allSpans.forEach((span) => {
    // do stuff with the span 
})

Answer 2

• 如果您想通過getElementsByTagName或ClassName嘗試它，您可以嘗試以下方法

var div = document.getElementsByTagName("div")[0]
var spans = div.getElementsByTagName("span");
for(let i = 0; i < spans.length; i++) {
  spans[i].innerText = 123;
}