先看這個固定例子
輸入固定包含 <strong> 和 </strong>。用 textContent 放入後，標記字眼本身也應看得到。
<style>html{font-size:16px}body{margin:12px;font:1rem/1.5 system-ui,sans-serif;color:#17332d;background:#fff}p{overflow-wrap:anywhere}output{display:block;margin-block:12px;overflow-wrap:anywhere;white-space:pre-wrap}button,input{font:inherit;max-width:100%;box-sizing:border-box}button{margin:4px;padding:8px}label{display:block;margin-block:8px}button:focus-visible,input:focus-visible{outline:3px solid #23715d;outline-offset:2px}ul{padding-inline-start:24px}li{overflow-wrap:anywhere}.highlight{border:2px solid green}</style>
<p id="note"></p><output id="result"></output>
<script>const note=document.querySelector('#note');note.textContent='<strong>工作坊筆記</strong>';
const result={text:note.textContent,strongCount:note.querySelectorAll('strong').length};
document.querySelector('#result').textContent=JSON.stringify(result);
console.log(JSON.stringify(result));
</script>{"text":"<strong>工作坊筆記</strong>","strongCount":0}| 核對項目 | 所給輸入或動作 | 結果 |
|---|---|---|
| 文字 | <strong>工作坊筆記</strong> | 標記字元原樣保留 |
| 子元素 | querySelectorAll("strong") | 0 |
原生機制怎樣處理
這個非空值交給 textContent，子節點會換成文字節點，沒有經 HTML 解析器。例子只用固定無害字串；插入機制不等於完整清理或信任規則。
比較另一寫法
同一字串交給 innerHTML，標記變成真正 strong 子元素，textContent 則只剩內文。
<style>html{font-size:16px}body{margin:12px;font:1rem/1.5 system-ui,sans-serif;color:#17332d;background:#fff}p{overflow-wrap:anywhere}output{display:block;margin-block:12px;overflow-wrap:anywhere;white-space:pre-wrap}button,input{font:inherit;max-width:100%;box-sizing:border-box}button{margin:4px;padding:8px}label{display:block;margin-block:8px}button:focus-visible,input:focus-visible{outline:3px solid #23715d;outline-offset:2px}ul{padding-inline-start:24px}li{overflow-wrap:anywhere}.highlight{border:2px solid green}</style>
<p id="note"></p><output id="result"></output>
<script>const note=document.querySelector('#note');note.innerHTML='<strong>工作坊筆記</strong>';
const result={text:note.textContent,strongCount:note.querySelectorAll('strong').length};
document.querySelector('#result').textContent=JSON.stringify(result);
console.log(JSON.stringify(result));
</script>{"text":"工作坊筆記","strongCount":1}試清邊界
已有 strong 子元素，再把 textContent 設成空字串，會留下甚麼？
查看參考答案
所有子節點都移除，文字變空，childNodes 也變零。
<style>html{font-size:16px}body{margin:12px;font:1rem/1.5 system-ui,sans-serif;color:#17332d;background:#fff}p{overflow-wrap:anywhere}output{display:block;margin-block:12px;overflow-wrap:anywhere;white-space:pre-wrap}button,input{font:inherit;max-width:100%;box-sizing:border-box}button{margin:4px;padding:8px}label{display:block;margin-block:8px}button:focus-visible,input:focus-visible{outline:3px solid #23715d;outline-offset:2px}ul{padding-inline-start:24px}li{overflow-wrap:anywhere}.highlight{border:2px solid green}</style>
<p id="note"><strong>舊筆記</strong></p><output id="result"></output>
<script>const note=document.querySelector('#note');note.textContent='';
const result={text:note.textContent,children:note.childNodes.length};
document.querySelector('#result').textContent=JSON.stringify(result);
console.log(JSON.stringify(result));
</script>{"text":"","children":0}