讨论JS中获取元素属性的8种方法

时间：2023-03-21 21:34:14 科技观察

今天要说的是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树。这是一个示例：

Thisaparagraphwithalistfollowingit.

Item1
Item2
Item3

对于上述元素，其innerHTML属性将返回以下字符串。

这是一个段落，后面跟着它。

Item1
Item2
Item3

2.outerHTML属性在读取模式下，outerHTML返回调用它的元素及其所有子节点的HTML标签。在写入模式下，outerHTML创建一个新的DOM子树，完全替换基于指定HTML字符串的调用元素。下面是一个例子。

这是一个段落后面有一个列表。

Item1
Item2
Item3

如果在元素上调用outerHTML，它将返回与上面相同的代码，包括它自己。使用outerHTML属性以这种方式设置值：div.outerHTML="

Thisisaparagraph.

";这行代码与以下DOM脚本代码的作用相同：varp=document.createElement("p");p.appendChild(document.createTextNode("Thisaparagraph."));div.parentNode.replaceChild(p,div);结果，新创建的元素将替换DOM树中的元素。replaceChild()方法用新节点替换子节点。语法：node.replaceChild(newnode,oldnode)3.innerText属性通过innerText属性，可以操作元素包含的所有文本内容，包括子文档树中的文本。通过innerText读取值时，会将子文档树中的所有文本按降序拼接起来。当通过innerText写入一个值时，元素的所有子节点都会被删除，并插入一个包含相应文本值的文本节点。这是一个示例：

Thisaparagraphwithalistfollowingit.

Item1
Item2
Item3

对于本例中的元素，innerText属性会返回如下字符串：Thisisaparagraphwithalistfollowingit.Item1Item2Item3使用innerText属性设置该元素的内容，并且只有一行需要代码：div.innerText="Helloworld!";执行这行代码后，页面的HTML代码会变成如下：设置innerText将始终只生成当前节点的子文本节点，并且要确保只生成子文本节点，文本必须是HTML编码的。利用这一点，可以通过innerText属性过滤掉HTML标签。方法是设置innerText等于innerText，这样就可以去掉所有的HTML标签，例如：divdiv.innerText=div.innerText；执行这行代码后，容器元素中的所有内容（包括子节点）将被替换为原来的文本内容，从而去除HTML标签）。举个栗子：请输入北京今天的空气质量：输出：4.除了outerText的范围attribute，扩展到包括调用它的节点之外，outerText和innerText基本没有区别。读取文本值时，outerText给出与innerText完全相同的结果。但是在写入模式下，outerText就完全不同了：outerText不只是替换调用它的元素的子节点，而是替换整个元素（包括子节点）。例如：div.outerText="Helloworld!";这行代码其实相当于下面两行代码：vartext=document.createTextNode("Helloworld!");div.parentNode.replaceChild(text,div);本质上，新的文本节点将完全替换调用outerText的元素。此后，该元素从文档中删除并且无法访问。5、value属性属性可以设置或返回密码字段的默认值。获取文本框的值。6、text()：设置或获取被选元素的文本内容(1)无参数text()：获取所有匹配元素的内容。结果是所有匹配元素包含的文本内容组合而成的文本。返回的是一个字符串。(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)with参数val(val)：设置每个匹配元素的值。返回一个jQuery对象。