JavaScript outerHTML

admin發表於2018-10-01
JavaScriptHTML

outer翻譯成漢語具有“外部的”的意思。

結合innerHTML和innerText兩個屬性有利於對本屬性的理解。

關於這兩個屬性基本用法參閱如下兩篇文章：

（1）.innerHTML屬性可以參閱JavaScript innerHTML一章節。

（2）.innerText屬性可以參閱JavaScript innerText一章節。

innerHTML屬性用來設定或者返回指定元素內部HTML內容，那麼很容易聯想到outerHTML會不是用來設定或者返回指定元素外部HTML內容，這個猜想有點靠譜，圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/01/004644zbxxh3r6clr4u140.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

由圖示可見，這個outer並沒有超越元素本身的界限，而僅是包括元素本身。

那此屬性的功能總結如下：

outerHTML屬性用來設定或者返回元素本身以及其後代HTML內容。

語法結構一：

[JavaScript] 純文字檢視 複製程式碼
outerContent=domObj.outerText

返回元素本身及其後代HTML內容。

語法結構二：

[JavaScript] 純文字檢視 複製程式碼
domObj.outerText=outerContent

使用指定的HTML內容替換元素本身以及其後代HTML內容。

瀏覽器相容：

（1）.IE瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.opera瀏覽器支援此屬性。

（5）.火狐瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
span{
  color:blue;
}    
</style>    
<script type="text/javascript"> 
window.onload=function(){
  let op = document.getElementById("ant");
  op.outerHTML="<span>青島市南區</span>";
}
</script>
</head>
<body>
<div id="box">
  <p id="ant">螞蟻部落</p>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/01/004748mnhyshywgaw6vsxe.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到outerHTML屬性替換的內容與innerHTML屬性不同，元素本身也會被替換。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
span{
  color:blue;
}    
</style>    
<script type="text/javascript"> 
window.onload=function(){
  let op = document.getElementById("ant");
  op.outerHTML="<span><a href='#'>青島市南區</></span>";
}
</script>
</head>
<body>
<div id="box">
  <p id="ant">螞蟻部落</p>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/01/004816pnyhex3nh8l8hyge.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼沒有更多的含義，只是在span中巢狀了一個連結<a>元素。

由上述兩個程式碼演示可以看出，替換內容中的HTML元素會被瀏覽器解析渲染。

下面再來看此屬性返回的內容，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
span{
  color:blue;
}    
</style>    
<script type="text/javascript"> 
window.onload=function(){
  let obox = document.getElementById("box");
  alert(obox.outerHTML)
}
</script>
</head>
<body>
<div id="box">
  <p id="ant">螞蟻部落</p>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/01/004848tbb31ey311yzqnnb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

outerHTML屬性可以返回元素自身以及其後代HTML元素內容。

此屬性還有一個重要特點，那就是存放原始元素的變數，即便通過outerHTML對齊進行重置，但是此變數依然存放的是原始元，看如下程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
span{
  color:blue;
}
</style>    
<script type="text/javascript"> 
window.onload=function(){
    let op = document.getElementById("ant");
    console.log(op.nodeName);
    op.outerHTML="<span>青島市南區</span>";
    console.log(op.nodeName);
}
</script>
</head>
<body>
<div id="box">
  <p id="ant">螞蟻部落</p>
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/01/004913us5cxjmmmslx5rxi.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

首先獲取p元素之後，再去設定p元素的outerHTML屬性值。

雖然P元素也被整個替換掉了，但是op變數所指向的元素依然是原始的p元素。

是不是有點奇怪，但事實的確如此。

相關文章