如何使用js选择同一div中的所有跨区域

Question

当我使用GetElementsByTagName时，我的代码只能选择代码中的第一个跨距。我得到一个错误TypeError：在“Node”上执行“Insert Before”失败：参数2不是“Node”类型。在HTMLDivelement。

现在任何人都可以帮助我选择卡片中的所有跨度，我也有很多卡片包含跨度

JS

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

HTML

<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

尝试使用QuerySelectorAll获取多个匹配项，然后循环访问它们：

js prettyprint-override">const allSpans = document.querySelectorAll('div span');

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