jq获取属性的方法（jquery获取html的内容）

今天想聊聊在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>

对于上面的<div>元素来说，它的 innerhtml 属性会返回如下字符串。

<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>

2、outerhtml 属性

在读模式下，outerhtml 返回调用它的元素及所有子节点的 html 标签。在写模式下，outerhtml 会根据指定的 html 字符串创建新的 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>

如果在<div>元素上调用 outerhtml，会返回与上面相同的代码，包括<div>本身。

使用 outerhtml 属性以下面这种方式设置值：

div.outerhtml = "<p>this is a paragraph.</p>";

这行代码完成的操作与下面这些 dom 脚本代码一样：

var p = document.createelement("p");p.appendchild(document.createtextnode("this is a paragraph."));div.parentnode.replacechild(p, div);

结果，就是新创建的<p>元素会取代 dom 树中的<div>元素。

replacechild() 方法用新节点替换某个子节点。

语法：

node.replacechild(newnode,oldnode)

3、innertext 属性

通过 innertext 属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。在通过 innertext 读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。在通过 innertext 写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。下面是一个例子：

<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>

对于这个例子中的 <div> 元素而言，其中 innertext 属性会返回下列字符串：

this is a paragraph with a 退化的反义词list following it.item 1item 2item 3

使用 innertext 属性设置这个<div>元素内容，则只需一行代码：

div.innertext = "hello world!";

执行这行代码后，页面的 html 代码就会变成如下所示：

<div id="content">hello world!</div>

设置 innertext 属性移除了先前存在的所有子节点，完全改变了 dom 树。

设置 innertext 永远只会生成当前节点的一个子文本节点，而为了确保只生成一个字文本节点，就必须要对文本进行 html 编码。利用这一点，可以通过 innertext 属性过滤掉 html 标签。方法是将 innertext 设置等于 innertext，这样就可以去掉所有 html 标签，比如：

div.innertext = div.innertext;

执行这行代码后，就用原来的文本内容替换了容器元素中的所有内容（包括子节点，因而也就去掉了 html 标签）。举个栗子：

<label id="lab">请输入北京今天空气质量：<input id="aqi-input" type="text"></label>

输出：

4、outertext 属性

除了作用范围扩大到了包含 调用它的节点之外，outertext 与innertext 基本上没有多大区别。在读取文本值时，outertext 与 innertext 的结果完全一样。但在写模式下，outertext 就完全不同了：outertext 不只是替换调用它的元素的子节点，而是会替换整个元素（包括子节点）。比如：

div.outertext = "hello world!";

这行代码实际上相当于如下两行代码：

var text = document.createtextnode("hello world!");div.parentnode.replacechild(text,div);

本质上，新的文本节点会完全取代调用 outertext 的元素。此后，该元素就从文档中被删除，无法访问。

5、value 属性

属性可设置或返回密码域的默认值。获取文本框的值。

6、text():设置或者获取所选元素的文本内容

1）无参text（）：

取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个string。

2）有参text（val）：

设置所有匹配元素的文本内容,与 html() 类似, 但将编码 html (将 “<” 和 “>” 替换成相应的html实体).返回一个jquery对象。

7、html():设置或者获取所选元素的内容（包数学题目括html标记）

1）无参html（）：

取得第一个匹配元素的html内容。这个函数不能用于xml文档。但可以用于xhtml文档，返回的是一个string。

2）有参html（val）：

设置每一个匹配元素的html内容。这个函数不能用于xml文档。但可以用于xhtml文档。返回一个jquery对象。

8、val()方侠客风云传 洛阳法

主要用于获取表单元素的值如input, lect 和 textarea。当在一个空集合上调用，它返回undefined；

1）无参 val() :

获取匹配的元素集合中第一个元素的当前值。例子：

html代码：

<input type="text" value="你好啊"><input type="text" value="啊哈哈哈"><input type="text" value="嘻嘻嘻嘻">

控制台输出：

2）有参val（val）：

设置每一个匹配元素的值。返回一个jquery对象。

总结

对于这八大方法：innerhtml、outerhtml、innertext 、outertext、value、t长扇舞ext()、html()，val()。您现在是否已经很清晰了？