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>

？