標籤:dom style width lan 元素 文檔 doctype logs val
1.innerHTML
寫入的標籤會被解析成元素
oBox.innerHTML = "<strong>123</strong>";
返回包括標籤在內的所有內容
console.log(oBox.innerHTML);
2.outerHTML
設定/修改包括自身元素在內的內容
會解析標籤
3.innerText
寫入的標籤不會被解析 當做文本插入
oBox.innerText = "<strong>123</strong>";
返回標籤中的常值內容(不包括標籤
console.log(oBox.innerText);
只擷取其中文字文件;
4.outerText
設定/修改包括自身元素在內的所有常值內容
不會解析標籤
5.nodeValue
不能直接操作某個dom元素,針對非元素節點設定值/傳回值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id = "box"> div <span>span</span> </div></body></html>
1.innerHTML
<script> var oBox = document.getElementById("box"); oBox.innerHTML = "<p><strong>123</strong></p><p>456</p>";</script>
2.outerHtTML
<script> var oBox = document.getElementById("box"); oBox.outerHTML = "<p><strong>123</strong></p><p>456</p>";</script>
注意布局發生的改變
3.innerText
<script> var oBox = document.getElementById("box"); oBox.innerText = "<p><strong>123</strong></p><p>456</p>"; </script>
4.outerText
<script> var oBox = document.getElementById("box"); oBox.outerText = "<p><strong>123</strong></p><p>456</p>"; </script>
5.nodeValue
只針對非元素節點進行操作
對元素節點操作無效 可能會報undefined錯誤
<script> var oBox = document.getElementById("box"); oBox.childNodes[0].nodeValue = "<p><strong>123</strong></p><p>456</p>"</script>
innerHTM,LouertHTML,innerText,outerText,nodeValue區別