探讨JS中获取元素属性8大方法

今天想聊聊在Web前端开发中经常用到的技术：获取元素属性的一系列方法【innerHTML、outerHTML、innerText 、outerText、value、text()、html()，val()】。

这些方法，大家应该用过，如果让你说出它们的一些区别和联系，能答得上来吗?接下来让我们一起来温故下。

首先我们需要把它们归类下：

• innerHTML、outerHTML、innerText 、outerText、value 属于原生javascript的方法。
• text()、html()，val()属于jQuery中的方法。

1. innerHTML 属性

在读模式下，innerHTML属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的 HTML 标记。在写模式下，innerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。下面是一个例子：

<div id="content"> 
    <p>This is a <strong>paragraph</strong> with a list following it.</p> 
    <ul> 
        <li>Item 1</li> 
        <li>Item 2</li> 
        <li>Item 3</li> 
    </ul> 
</div>