文章导航

JavaScript outerHTML

2018-10-1 00:45| 作者: admin| 查看: 1165| 评论: 0|来自: 蚂蚁部落

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元素。

是不是有点奇怪,但事实的确如此。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部