列出例外

我已經使用 JavaScript 從我的 HTML 中的串列元素創建了一個表格，它作業得非常好，但并不是我所有的檔案都有參考來獲取。如何使代碼僅在找到 ELEMENT 元素時才運行。

代碼必須是，如果未找到此部分，則不會發生任何事情并且功能會繼續。因此，如果檔案中沒有 ELEMENT1，它仍會查找 ELEMENT2。Atm 它給了我一個錯誤并在找不到 ELEMENT1 后停止。

const ELEMENT =  Array.from(document.getElementById('ID').getElementsByTagName('li'));

表的完整代碼

function myFunction{

            const ELEMENT1 =  Array.from(document.getElementById('ID').getElementsByTagName('li'));
            const nonPatCit_tbody = document.querySelector('#table tbody');

            ELEMENT1 .forEach(
                (ELEMENT1 ) => {
                    // a table row for each element 
                    const tr = nonPatCit_tbody.appendChild(document.createElement('tr'));
                   
                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = Array.from(nonPatCit.querySelectorAll('name'))
                            .map((name) => name.textContent)
                            .join(', ');
                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = nonPatCit.querySelector('atl')?.textContent || '';

                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = nonPatCit.querySelector('sertitle')?.textContent || '';

                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = nonPatCit.querySelector('sdate')?.textContent || '';
                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = nonPatCit.querySelector('vid')?.textContent || '';

                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = nonPatCit.querySelector('ino')?.textContent || '';

                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = nonPatCit.querySelector('ppf')?.textContent || '';
                    
                    // multiple authors, map nodes to strings and join them
                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = Array.from(nonPatCit.querySelectorAll('crossref'))
                            .map((crossref) => crossref.textContent)
                            .join(', ');
                }
            )

  const ELEMENT2 =  Array.from(document.getElementById('ID').getElementsByTagName('li'));
            const nonPatCit_tbody2 = document.querySelector('#table tbody');

            ELEMENT2 .forEach(
                (ELEMENT2 ) => {
                    // a table row for each element 
                    const tr = nonPatCit_tbody2.appendChild(document.createElement('tr'));
                   
                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = Array.from(ELEMENT2.querySelectorAll('name'))
                            .map((name) => name.textContent)
                            .join(', ');
                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = ELEMENT2 .querySelector('atl')?.textContent || '';

                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = ELEMENT2 .querySelector('sertitle')?.textContent || '';

                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = ELEMENT2 .querySelector('sdate')?.textContent || '';
                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = ELEMENT2 .querySelector('vid')?.textContent || '';

                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = ELEMENT2 .querySelector('ino')?.textContent || '';

                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = ELEMENT2 .querySelector('ppf')?.textContent || '';
                    
                    // multiple authors, map nodes to strings and join them
                    tr
                        .appendChild(document.createElement('td'))
                        .textContent = Array.from(ELEMENT2 .querySelectorAll('crossref'))
                            .map((crossref) => crossref.textContent)
                            .join(', ');
                }
            )
}

uj5u.com熱心網友回復：

如果未找到任何元素，則回傳空陣列并將其存盤在 中ELEMENT，該forEach方法會簡單地忽略它：

const ELEMENT = Array.from(document.getElementById('ID')?.getElementsByTagName('li') ?? Array())

閱讀更多：

• 空值合并運算子 (??)
• 大批（）

當然，我也更喜歡使用復數名詞來定義集合——例如，ELEMENTS而不是ELEMENT.

標籤：javascript html jQuery dom

上一篇：JavaScript表單驗證-textarea欄位在未輸入文本時顯示警報

下一篇：如何使用EJS和Mongoose在一個路徑中顯示兩個表格