Web前端JS获取元素的八大方法

雨点打透心脏的1/2处 2021-09-08 03:54 617阅读 0赞

今天想聊聊在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 树完全替换调用元素原先的所有子节点。下面是一个例子：

This is a **paragraph** with a list following it.

*  Item 1
 *  Item 2
 *  Item 3

对于上面的

元素来说，它的 innerHTML 属性会返回如下字符串。

This is a **paragraph** with a list following it.

*  Item 1
 *  Item 2
 *  Item 3

**2、outerHTML 属性**

在读模式下，outerHTML 返回调用它的元素及所有子节点的 HTML 标签。在写模式下，outerHTML 会根据指定的 HTML 字符串创建新的 DOM 子树完全替换调用元素。下面是一个例子。

This is a **paragraph** with a list following it.

*  Item 1
 *  Item 2
 *  Item 3

如果在

元素上调用 outerHTML，会返回与上面相同的代码，包括

本身。

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

div.outerHTML = “

This is a paragraph.

”;

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

var p = document.(“p”);p.(document.createTextNode(“This is a paragraph.”));div.parentNode.replaceChild(p, div);

结果，就是新创建的

元素会取代 DOM 树中的

元素。

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

语法：

node.replaceChild(newnode,oldnode)

**3、innerText 属性**

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

**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, select 和 textarea。当在一个空集合上调用，它返回undefined；

1）无参 val() :

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

HTML代码：

控制台输出：

2）有参val（val）：

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

总结

对于这八大方法：innerHTML、outerHTML、innerText 、outerText、value、text()、html()，val()，现在是否已经很清晰了？  
今天爱创课堂小编的分享就到这了，想学习前端，了解前端更多的知识欢迎大家，关注，私信我！！！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lja3RweGNscw_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/0800ff972ad844529ac85c066b0b464c.png