為什么string.length不更新？

Question

這是我自己完成的第一段代碼js。 我試圖有一個輸入字段，將項目添加到列表中，然后如果您按按鈕生成代碼，它將收集所有選中的項目並將文本復制到另一個div中。

基本上，我的問題是圍繞兩個變量：

const list = listUl.children;
const listCopy = listUl.querySelectorAll('span');

假設我在列表中有4個項目。 如果我將新項目添加到列表中，我可以看到list.length添加此新項目，它的范圍從4更改為5。但是listCopy.length不會發生，該值始終為4。

如果lstCopy在列表中，為什么會發生這種情況？ 我如何也可以更新listCopy ？

這是我的代碼：

 const addItemInput = document.querySelector('.addItemInput'); const addItemButton = document.querySelector('.addItemButton'); const copyText = document.querySelector('.generateCode'); const listUl = document.querySelector('.list'); const list = listUl.children; const listCopy = listUl.querySelectorAll('span'); const clonedCode = document.querySelector('.code p'); //FUNCTION: Generate value/items = Draggable, Checkbox, Remove button const attachItemListButton = (item) => { //Draggable item.draggable = "true"; item.classList.add("list--item"); //Checkbox let checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.className = 'checkbox'; checkbox.name = "chkboxName1"; checkbox.value = "value"; checkbox.id = "id"; item.insertBefore(checkbox, item.childNodes[0] || null); //Remove button let remove = document.createElement('button'); remove.className = 'remove'; remove.textContent = 'x'; item.appendChild(remove); }; for (let i = 0; i < list.length; i += 1) { attachItemListButton(list[i]); } //Cloning code if there are checked items copyText.addEventListener('click', () => { let copyTextFromList = ""; for (let i = 0; i < listCopy.length; i += 1) { if (listCopy[i].parentNode.querySelector("input:checked")) { copyTextFromList += listCopy[i].textContent + ','; } } clonedCode.innerHTML = copyTextFromList; }); //Add item from the input field to the list addItemButton.addEventListener('click', () => { let li = document.createElement('li'); let span = document.createElement('span'); span.textContent = addItemInput.value; listUl.appendChild(li); li.appendChild(span); attachItemListButton(li); addItemInput.value = ''; }); //FUNCTION: Remove button listUl.addEventListener('click', (event) => { if (event.target.tagName == 'BUTTON') { if (event.target.className == 'remove') { let li = event.target.parentNode; let ul = li.parentNode; ul.removeChild(li); } } }); 

 /* Google fonts */ @import url('https://fonts.googleapis.com/css?family=Heebo:300,400,700'); /* Root */ :root { --color-white: #fff; --color-black: #2D3142; --color-black-2: #0E1116; --color-gray: #CEE5F2; --color-gray-2: #ACCBE1; --color-gray-3: #CEE5F2; --color-green: #439775; --color-blue: #4686CC; } body { font-family: 'Heebo', sans-serif; font-weight: 400; font-size: 16px; color: black; } h2 { font-weight: 700; font-size: 1.5rem; } h3 { font-weight: 700; font-size: 1.25rem; } button { background: var(--color-blue); padding: 5px 10px; border-radius: 5px; color: var(--color-white); } [draggable] { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; -khtml-user-drag: element; -webkit-user-drag: element; } ul.list { list-style-type: none; padding: 0; max-width: 300px; } .list button { background: var(--color-black); } .list--item { display: flex; justify-content: space-between; align-items: center; width: auto; margin: 5px auto; padding: 5px; cursor: move; background: var(--color-gray); border-radius: 5px; } .list--item.draggingElement { opacity: 0.4; } .list--item.over { border-top: 3px solid var(--color-green); } button.remove { margin: auto 0 auto auto; } input#id { margin: auto 5px auto 0; } .button-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 300px; } .button-wrapper .addItemInput { width: 63%; border-radius: 5px 0 0 5px; } .button-wrapper .addItemButton { width: 35%; border-radius: 0 5px 5px 0; } .button-wrapper .generateCode { width: 100%; background: var(--color-green); margin-top: 5px; } .code p { background: var(--color-gray); padding: 5px; border: 1px solid var(--color-gray-2); min-height: 20px; font-weight: 300; } 

  <ul class="list"> <li><span>Header</span></li> <li><span>Hero</span></li> <li><span>Intro</span></li> <li><span>Footer</span></li> </ul> <div class="button-wrapper"> <input type="text" class="addItemInput" placeholder="Item description"> <button class="addItemButton">Add item</button> <button class="generateCode">Generate code</button> </div> <div class="code"> <h2>Code</h2> <p></p> </div> 

Answer 1

NodeList有兩種變體，實時的和非實時的。 querySelectorAll返回一個不活動的靜態NodeList 。 .children返回一個實時的（技術上它返回一個HTMLCollection但是您現在可以忽略此區別）。

為了使listCopy也可以listUl.getElementsByTagName('span') ，可以使用listUl.getElementsByTagName('span') …

要按類別選擇元素，請使用getElementsByClassName 。 但是，（我所知道的）沒有辦法通過CSS或XPath（即更復雜的）查詢獲得實時集合。

Answer 2

問題是const listCopy = listUl.querySelectorAll('span'); 從一開始就使用span數組啟動。

為了獲得更新的列表const listCopy = listUl.querySelectorAll('span'); 將let listCopy = listUl.querySelectorAll('span'); 而在你的職能

//Cloning code if there are checked items
copyText.addEventListener('click', () => {
  // add the following line - in this way you will select the span from the updated list
  listCopy = listUl.querySelectorAll('span');
  let copyTextFromList = "";
  for (let i = 0; i < listCopy.length; i += 1) {
    if (listCopy[i].parentNode.querySelector("input:checked")) {
      copyTextFromList += listCopy[i].textContent + ',';
    }
  }
  clonedCode.innerHTML = copyTextFromList;
});

Answer 3

如果您想使用querySelectorAll，這可能會有所幫助。 每次您檢查長度時，都會重新計算並返回值。 Symbol.iterator可幫助您處理...循環。

 const addItemInput = document.querySelector('.addItemInput'); const addItemButton = document.querySelector('.addItemButton'); const copyText = document.querySelector('.generateCode'); const listUl = document.querySelector('.list'); const list = listUl.children; const listCopy = { get length() { return listUl.querySelectorAll('span').length }, *[Symbol.iterator]() { let i = 0; const l = listUl.querySelectorAll('span'); while( i < l.length ) { yield l[i]; i++; } } }; const clonedCode = document.querySelector('.code p'); //FUNCTION: Generate value/items = Draggable, Checkbox, Remove button const attachItemListButton = (item) => { //Draggable item.draggable = "true"; item.classList.add("list--item"); //Checkbox let checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.className = 'checkbox'; checkbox.name = "chkboxName1"; checkbox.value = "value"; checkbox.id = "id"; item.insertBefore(checkbox, item.childNodes[0] || null); //Remove button let remove = document.createElement('button'); remove.className = 'remove'; remove.textContent = 'x'; item.appendChild(remove); }; for (let i = 0; i < list.length; i += 1) { attachItemListButton(list[i]); } //Cloning code if there are checked items copyText.addEventListener('click', () => { let copyTextFromList = ""; for (let item of listCopy) { if (item.parentNode.querySelector("input:checked")) { copyTextFromList += item.textContent + ','; } } clonedCode.innerHTML = copyTextFromList; }); //Add item from the input field to the list addItemButton.addEventListener('click', () => { let li = document.createElement('li'); let span = document.createElement('span'); span.textContent = addItemInput.value; listUl.appendChild(li); li.appendChild(span); attachItemListButton(li); addItemInput.value = ''; }); //FUNCTION: Remove button listUl.addEventListener('click', (event) => { if (event.target.tagName == 'BUTTON') { if (event.target.className == 'remove') { let li = event.target.parentNode; let ul = li.parentNode; ul.removeChild(li); } } }); 

 /* Google fonts */ @import url('https://fonts.googleapis.com/css?family=Heebo:300,400,700'); /* Root */ :root { --color-white: #fff; --color-black: #2D3142; --color-black-2: #0E1116; --color-gray: #CEE5F2; --color-gray-2: #ACCBE1; --color-gray-3: #CEE5F2; --color-green: #439775; --color-blue: #4686CC; } body { font-family: 'Heebo', sans-serif; font-weight: 400; font-size: 16px; color: black; } h2 { font-weight: 700; font-size: 1.5rem; } h3 { font-weight: 700; font-size: 1.25rem; } button { background: var(--color-blue); padding: 5px 10px; border-radius: 5px; color: var(--color-white); } [draggable] { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; -khtml-user-drag: element; -webkit-user-drag: element; } ul.list { list-style-type: none; padding: 0; max-width: 300px; } .list button { background: var(--color-black); } .list--item { display: flex; justify-content: space-between; align-items: center; width: auto; margin: 5px auto; padding: 5px; cursor: move; background: var(--color-gray); border-radius: 5px; } .list--item.draggingElement { opacity: 0.4; } .list--item.over { border-top: 3px solid var(--color-green); } button.remove { margin: auto 0 auto auto; } input#id { margin: auto 5px auto 0; } .button-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 300px; } .button-wrapper .addItemInput { width: 63%; border-radius: 5px 0 0 5px; } .button-wrapper .addItemButton { width: 35%; border-radius: 0 5px 5px 0; } .button-wrapper .generateCode { width: 100%; background: var(--color-green); margin-top: 5px; } .code p { background: var(--color-gray); padding: 5px; border: 1px solid var(--color-gray-2); min-height: 20px; font-weight: 300; } 

  <ul class="list"> <li><span>Header</span></li> <li><span>Hero</span></li> <li><span>Intro</span></li> <li><span>Footer</span></li> </ul> <div class="button-wrapper"> <input type="text" class="addItemInput" placeholder="Item description"> <button class="addItemButton">Add item</button> <button class="generateCode">Generate code</button> </div> <div class="code"> <h2>Code</h2> <p></p> </div>