textContent,innerText與innerHtml的區(qū)別以及Event事件兼容性問(wèn)題
1、innerText 打印標(biāo)簽之間的純文本信息，會(huì)將標(biāo)簽過(guò)濾掉，低版本的火狐瀏覽器不支持，而是支持textContent
打印結(jié)果是<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p>這是P標(biāo)簽</p>
<p>這是P標(biāo)簽</p>
<p>這是P標(biāo)簽</p>
</div>
</body>
<script>
var box = document.getElementById("box");
//打印標(biāo)簽之間的純文本信息，會(huì)將標(biāo)簽過(guò)濾掉
var str = box.innerText;
console.log(str);
</script>
</html>
這是P標(biāo)簽
這是P標(biāo)簽
這是P標(biāo)簽
2、innerHtml 打印標(biāo)簽之間的內(nèi)容，包括標(biāo)簽和文本信息，各瀏覽器都支持，但是高版本的瀏覽器會(huì)原樣打印
打印結(jié)果是<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p>這是P標(biāo)簽</p>
<p>這是P標(biāo)簽</p>
<p>這是P標(biāo)簽</p>
</div>
</body>
<script>
var box = document.getElementById("box");
//打印標(biāo)簽之間的內(nèi)容，包括標(biāo)簽和文本信息
var str = box.innerHTML;
console.log(str);
</script>
</html>
<p>這是P標(biāo)簽</p>
<p>這是P標(biāo)簽</p>
<p>這是P標(biāo)簽</p>
如果將div中的p標(biāo)簽不換行，打印的結(jié)果會(huì)原樣輸出
打印結(jié)果是<div id="box">
<p>這是P標(biāo)簽</p>
<p>這是P標(biāo)簽</p><p>這是P標(biāo)簽</p>
</div>
<p>這是P標(biāo)簽</p>
<p>這是P標(biāo)簽</p><p>這是P標(biāo)簽</p>
但是使用innerText 會(huì)有兼容性，低版本的火狐瀏覽器不支持使用，而是支持使用textContent，因此我們需要封裝一個(gè)兼容版本，以及調(diào)用方法
<pre class="html" name="code">// 獲取標(biāo)簽的對(duì)象
var box = document.getElementById("box");
// 調(diào)用方法
var str = getText(box);
console.log(str);
/**
* 封裝了一個(gè)獲取標(biāo)簽之間的文本信息兼容版本函數(shù)
* @param element 標(biāo)簽對(duì)象
* @returns {*}
*/
function getText(element) {
if(element.innerText) {
return element.innerText; //IE8及之前的瀏覽器支持，現(xiàn)在兩者都支持
}else {
return element.textContent; //低版本的火狐支持
}
}
textContent、innerText 以及Event事件兼容性問(wèn)題
今天在完成前端的簡(jiǎn)單練習(xí)時(shí)發(fā)現(xiàn)了一些兼容性的問(wèn)題,百度后得以解決.
這里主要討論Firefox與Chrome的兼容性問(wèn)題.
textContent與 innerText
在javascript中, 為了獲取節(jié)點(diǎn)的文本, 我們可以考慮使用節(jié)點(diǎn)的textContent、或者innerText,兩者都并不能很好對(duì)所有瀏覽器進(jìn)行兼容.
- textContent: 不支持低版本 IE; 兼容 Chrome / Firefox / Safari / Opera / IE9.
- innerText: 不支持Firefox; 兼容其他瀏覽器;
var div = document.getElementById("content");
function getInnerText(element) {
return (typeof element.textContent == "string") ? element.textContent : element.innerText;
}
function setInnerText(element, text) {
if (typeof element.textContent == "string") {
element.textContent = text;
} else {
element.innerText = text;
}
}
setInnerText(div, "Hello world!");
alert(getInnerText(div)); //"Hello world!"
event的兼容性問(wèn)題
開(kāi)發(fā)過(guò)程中,我們會(huì)給節(jié)點(diǎn)添加事件監(jiān)聽(tīng)器,例如:
為了在HandleClick()函數(shù)中獲取到觸發(fā)該函數(shù)的對(duì)象,我們可能會(huì)用到event.target, 這段代碼可以在Chrome上正常運(yùn)行,但在Firefox中出現(xiàn)報(bào)錯(cuò),element.addEventListener("click", HandleClick);
function HandleClick() {
console.log(event.target);
}
控制臺(tái)將顯示不存在event對(duì)象.
說(shuō)明: Firefox的event只能在事件發(fā)生的現(xiàn)場(chǎng)使用(來(lái)自百度).
解決方法:
1.我們可以通過(guò)修改html標(biāo)簽, 傳遞event參數(shù)給相應(yīng)的函數(shù):
<button onclick = "HandleClick(event)">
這樣便獲取了event, 接下來(lái)就可以在HandleClick()函數(shù)中愉快地使用event了;(當(dāng)然,event的某些屬性兼容性也需要另外考慮)
2.不傳遞event對(duì)象, 直接在 HandleClick()函數(shù)中獲取;
代碼來(lái)自另一位博主:
此時(shí)我們的html文件中不需要傳遞event給HandleClick函數(shù), 如下:unction HandleClick()
{
var evt = window.event || arguments.callee.caller.arguments[0]; // 獲取event對(duì)象
var src = evt.srcElement || evt.target; // 獲取觸發(fā)事件的源對(duì)象
var iKeyCode = evt.keyCode || evt.which; //獲取按鈕代碼
alert(src.value); // 打印該對(duì)象的value屬性
if (window.navigator.userAgent.indexOf("IE")>=1){
evt.keyCode =0;
evt.returnValue=false;
}else{
evt.preventDefault();
}
}
<button onclick = "HandleClick()"
如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答??！ 點(diǎn)擊進(jìn)入論壇
