javascript对内容的操作
我在这里介绍innerHTML、innerText、innerContent
一,innerHTML(可以识别标签):
案例1:替换掉整个标签
<!--innerHTML--> <p id="innerHtml" onclick="setInnerHtml(this.id)">这个是对innerHTML的操作</p> <script type="text/javascript"> function setInnerHtml(obj){ var x = document.getElementById(obj); x.innerHTML = '<h1>这个是innerHTML替换之后的内容</h1>' } </script>
案例2:用js的innerHTML来改变div值
<p>Welcome to the site <b id='boldStuff'>dude</b> </p> <input type='button' onclick='changeText()' value='Change Text' /> <script type="text/javascript"> function changeText() { document.getElementById('boldStuff').innerHTML = 'Fred Flinstone'; } </script>
二,innerText:用来设置或者获取对象起始标签和结束标签内的文字内容;(火狐不兼容)
浏览器支持:IE、Chrome
赋值操作:先将ASCII实体对应的字符(<、>、&、'和")转换为实体名,然后把处理后的值赋予给innerHTML属性。
取值操作:innerText的取值实际上就是对innerHTML的属性值进行一系列处理,然后返回,具体步骤如下
1. 对HTML标签进行解析;
2. 对CSS样式进行带限制的解析和渲染;
3. 将ASCII实体转换为对应的字符;
4. 剔除格式信息(如\t、\r和\n等),将多个连续的空格合并为一个。
<p id="innerText">这是对innerText的操作</p> <input type="button" onclick="setInnerText('innerText')" value="替换innerText"/> <input type="button" onclick="getInnerText('innerText')" value="获取innerText"/> <script type="text/javascript"> function setInnerText(id){ document.getElementById(id).innerText = "这个是替换好的文字"; } function getInnerText(id){ var _innerText = document.getElementById(id).innerText; alert(_innerText); } </script>
三、innerContent:用来设置或者获取对象起始标签和结束标签内的文字内容,用法同innerText;
浏览器支持:IE9~11、FireForx、Chrome;
赋值操作:先将ASCII实体对应的字符(<、>、&、'和")转换为实体名,然后把处理后的值赋予给innerHTML属性。
取值操作:textContent的取值实际上就是对innerHTML的属性值进行一系列处理,然后返回,具体步骤如下
1. 对HTML标签进行剔除;
2. 将ASCII实体转换为相应的字符。
注意:
a). 对HTML标签是剔除不是解析,也不会出现CSS解析和渲染的处理,因此<br/>等元素是不生效的。
b). 不会剔除格式信息和合并连续的空格,因此\t、\r、\n和连续的空格将生效。
四、综上所述,我们总结如下:
1、IE、Safari、Opera和Chrome支持innerText属性。Firefox虽然不支持innerText,但支持作用类似的textContent属性。textContent是DOM3级规定的一个属性,而且也得到了safari、opera和Chrome的支持。为了确保跨浏览器兼容,有必要想下面这样通过函数来检测可以使用哪个属性:
<div id="content">综合测试</div> <input type="button" value="获取元素内容" onclick="getText('content')" /> <input type="button" value="设置元素内容" onclick="setText('content', 'hello world!!!')" /> <script type="text/javascript"> //获取元素的内容 function getText(el) { var obj = document.getElementById(el); var result = (typeof obj.textContent == "string") ? obj.textContent : obj.innerText; alert(result); return result; }; //设置元素的内容 function setText(el, text) { var obj = document.getElementById(el); if(typeof obj.textContent == "string") { obj.textContent = text; } else { obj.innerText = text; } }; </script>
2、可以封装成一个函数,如果传入对象,则表示获取;如果传入一个对象和一个字符串,表示设置;
<!--封装函数--> <div id="pack-function">把innerHTML、innerText封装成为函数</div> <input type="button" value="封装成函数之后获取内容" id="get-text" /> <input type="button" value="封装成函数之后设置内容" id="set-text" /> <script type="text/javascript"> /* * 如果传入一个对象,就是获取值, * 如果传入一个对象和一个字符串,就是设置值 */ function setText(obj, str) { if(obj.innerText) { //console.log(Boolean(str)); if (str) { obj.innerText = str; } else{ return obj.innerText; } } else { if (str) { obj.textContent = str; } else{ return obj.textContent; } }; }; //调用函数 var ele = document.getElementById('pack-function'), _getText = document.getElementById('get-text'), _setText = document.getElementById('set-text'); _getText.onclick = function (){ var result = setText(ele); alert(result); } _setText.onclick = function(){ setText(ele, 'hello world!'); } </script>
?