JS中innerHTML outerHTML innerText outerText 和 value

js基础

在这篇blog上，我想整理清楚JS中innerHTML outerHTML innerText outerText 和 value的区别。

innerHTML

属性设置或返回该标签内的HTML。也就是从对象的起始位置到终止位置的全部内容,包括Html标签

<script type="text/javascript">
            function getInnerHtml(){
                alert(document.getElementById("tr1").innerHTML);
            }
        </script>

        <table border="1">
            <tr id="tr1">
                <th>FirstName</th>
                <th>LastName</th>
            </tr>
            <tr id="tr2">
                <td>Mike</td>
                <td>Linda</td>
            </tr>
        </table>
        <br />
        <input type="button" onclick="getInnerHtml()" value="alert innerHTML of table row" />

alert出的内容是：

<th>FirstName</th>
<th>LastName</th>

outerHTML

属性设置或返回该标签及标签内的HTML。也就是从对象的该标签起始到终止位置的全部内容,包括Html标签
按照上面的案例，将innerHTML改为outerHTML，则，输出的结果会包括本身的标签在内
alert出的是：

            <tr id="tr1">
                <th>FirstName</th>
                <th>LastName</th>
            </tr>

innerText

从起始位置到终止位置的内容，但它去除html标签。（只能在IE和chrome下使用）
按照上面的的案例，将innerHTML改为innerText
alert出的结果是：
FirstNameLastName

outerText

设置(包括标签)或获取(不包括标签)对象的文本
按照上面的的案例，将innerHTML改为outerText
alert出的结果是：
FirstNameLastName

value

属性可设置或返回密码域的默认值。获取文本框的值
按照上面的的案例，将innerHTML改为value
alert出的结果是：
Undefined

特别说明

innerHTML是符合W3C标准的属性，而innerText、outerText、outerHTML只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>