有例外的清单

Question

我用 HTML 和 JavaScript 中的列表元素创建了一个 table，它工作得很好，但并非我的所有文档都有要获取的引文。我怎样才能使代码仅在找到 ELEMENT 元素时运行。

代码必须是，如果未找到此部分，则不会发生任何事情并且函数会继续。因此，如果文档中没有 ELEMENT1，它仍会查找 ELEMENT2。 Atm 它给了我一个错误，并在找不到 ELEMENT1 后停止。

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

table

的完整代码

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(', ');
                }
            )
}

Answer 1

如果没有找到元素，则返回空数组并将其存储在 ELEMENT 中，forEach 方法会简单地忽略它：

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

阅读更多：

当然，我也更喜欢使用复数名词来定义集合——例如，ELEMENTS 而不是 ELEMENT。

有例外的清单

List with exceptions

javascript

html

jquery

dom