我正在嘗試獲取具有特定 ID 的 div 的內容。但是，如果 div 嵌套在諸如<template>它的標簽內就找不到了。我無法控制頁面的 html 輸出，所以我需要找到一種方法來找到這個元素，無論它嵌套在哪里。我的理解document.getElementById是，無論它位于何處，都應該能夠找到具有給定 ID 的元素。javascript 代碼始終位于正文末尾的腳本標記中。
下面它按預期作業，嵌套在一個 div 中。
const str = document.getElementById("somethingsomething").innerText;
console.log(str);<html>
<body>
<div>
<div hidden="" id="somethingsomething">
<b>dark side</b>
</div>
</div>
</body>
</html>這是我希望以相同方式作業但沒有的示例。
const str = document.getElementById("somethingsomething").innerText;
console.log(str);<html>
<body>
<template>
<div hidden="" id="somethingsomething">
<b>dark side</b>
</div>
</template>
</body>
</html>uj5u.com熱心網友回復：
A<template>的孩子不會被渲染 - 他們并不是真的在頁面上。正如MDN 所說：
將模板視為存盤以供后續在檔案中使用的內容片段。雖然決議器
<template>在加載頁面時確實會處理元素的內容，但它這樣做只是為了確保這些內容是有效的；但是，不會呈現元素的內容。
它在 DOM 中沒有子級。
console.log(document.querySelector('template').children.length);<template>
<p>foo</p>
</template>因此，模板的任何后代都不會使用document.querySelector或任何其他方法來查找以檔案為根的元素。
我認為你需要在這里做兩件事：
- 首先檢查頁面上是否存在該元素
- 如果沒有，它可能在模板中；遍歷模板及其
.content以查看您要查找的內容是否在其中
const getText = doc => doc.getElementById("somethingsomething")?.textContent;
const getStr = () => {
const textOnPage = getText(document);
if (textOnPage !== undefined) return textOnPage;
for (const template of document.querySelectorAll('template')) {
const textInTemplate = getText(template.content);
if (textInTemplate !== undefined) return textInTemplate;
}
};
const str = getStr();
console.log(str);<html>
<body>
<template>
<div hidden="" id="somethingsomething">
<b>dark side</b>
</div>
</template>
</body>
</html>uj5u.com熱心網友回復：
元素包含<template>標記，但內容不是DOM 的一部分。頁面加載后，可以通過 JavaScript將內容添加到 DOM 一次或多次。
uj5u.com熱心網友回復：
該<template>標簽將其中的所有內容隱藏起來，直到真正需要它才被渲染。因此，您需要激活模板以獲取其中定義的任何元素，否則它們將回傳 null。
您可以使用document.importNode(externalNode, deep). WhereexternalNode參考模板元素本身并deep指示是否要匯入模板的整個子樹。
匯入節點后，您需要將其附加到檔案正文中，以便將其呈現到頁面上以便getElementById可以看到它。
您可以在以下鏈接中找到更深入的示例： document.getElementById 不適用于 <template> 自定義標簽 https://www.html5rocks.com/en/tutorials/webcomponents/template/#toc-using https:// /developer.mozilla.org/en-US/docs/Web/API/Document/importNode
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/489562.html
標籤：javascript dom