本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-08-01jq获取属性的方法-jquery获取html的内容

今日我想讲的是Web前端工程师中常常采用的技术性:一系列获得原素特性的方式[innerHTML.outerHTML.innerText.outerText.value.Text().HTML().val ()]。

这种方式每一个人都应当应用。假如你讲出她们中间的一些差别和联络，你可以理解吗？让我们一起回首过去。

最先，大家必须对他们开展归类:

InnerHTML.outerHTML.innerText.outerText合值都归属于原生态的javascript方式。

Text().html().val()归属于jQuery中的方式。

1.innerHTML特性。

在载入方式下，innerHTML特性回到相匹配于启用原素的全部子连接点(包含原素.注解和文字连接点)的HTML标识。在撰写方式下，innerHTML会依据特定的值建立一个新的DOM树，随后用这一DOM树彻底更换启用原素的全部初始子连接点。下列是一个事例:

这是一个后边有目录的文章段落。

Item 1 Item 2 Item 3

针对上边的原素，其innerHTML特性回到下列字符串数组。

这是一个后边有目录的文章段落。

Item 1 Item 2 Item 3

2.外界HTML特性。

在载入方式下，外界HTML回到启用它的原素以及全部子连接点的HTML标识。在载入方式下，外界HTML将依据特定的HTML字符串数组建立一个新的DOM子树，以彻底更换启用原素。下列是一个事例。

这是一个后边有目录的文章段落。

Item 1 Item 2 Item 3

假如您在一个原素上启用outerHTML，它将回到与上边同样的编码，包含它自身。

应用OutLook HTMl特性以以下方法设定值:

div.outerHTML = "

这也是一段话。

";

这一行编码与下边的DOM脚本制作编码干了一样的事儿:

var p = document.createElement("p");p.appendChild(document.createTextNode("This is a paragraph."));div.parentNode.replaceChild(p, div);

因而，创好的因素将更换DOM树中的原素。

replaceChild()方式用新连接点更换子连接点。

英语的语法:

node.replaceChild(newnode,oldnode)

3.innerText特性

innerText特性容许您实际操作原素中包括的全部文字內容，包含子文本文档树中的文字。当根据innerText载入该值时，它将依照从浅到深的次序拼接子文本文档树中的全部文字。当根据innerText载入值时，結果将删掉要素的全部子连接点，并插进包括相对应文字值的文字连接点。下列是一个事例:

这是一个后边有目录的文章段落。

Item 1Item 2Item 3

针对本例中的原素，innerText特性回到下列字符串数组:

This is a paragraph with a list following it.Item 1Item 2Item 3

要应用innerText特性设定这一原素的內容，您只必须一行编码:

div.innerText = "Hello world!";

实行完这一行编码后，网页页面的HTML编码将如下所示所显示:

Hello world!

设定innerText特性将删掉全部事先存有的子连接点，并彻底变更DOM树。

设定innerText将自始至终只转化成当今进程的一个子文字连接点，可是为了更好地保证只转化成一个英语单词文字连接点，文字务必是HTML编号的。那样，能够根据innerText特性过虑掉HTML标识。方式是将innerText设定为innerText，那样就可以删掉全部的HTML标识，比如:

div.innerText = div.innerText;

实行完这一行编码后，器皿原素中的任何內容(包含子连接点，进而清除HTML标识)都被更换为初始文字內容。举例说明:

输入您北京今天空气指数：

輸出:

4.外界文本属性。

外界文字和內部文字大部分沒有差别，除开它的标准被拓展到包含启用它的连接点。读取文本值时，外界文字和內部文字具备完全一致的結果。可是，在写方式下，outtext彻底不一样:outtext不但更换启用它的原素的子连接点，还更换全部原素(包含子连接点)。比如:

div.outerText = "Hello world!";

这一行编码事实上等同于下边二行编码:

var text = document.createTextNode("Hello world!");div.parentNode.replaceChild(text,div);

实质上，新的文字连接点将彻底更换启用外界文字的原素。以后，该原素将从文本文档中删掉，而且无法打开。

5.值特性。

特性能够使用或回到登陆密码字段名的初始值。获得输入框的值。

6.text():设定或获得选定原素的文字內容。

1)无主要参数文字():

获得全部配对原素的內容。結果是包括在全部配对原素中的文字內容的组成。回到的是一个字符串数组。

2)含有参照文字(val):

设定全部配对原素的文字內容，类似html()，但对HTML开展编号(用相匹配的HTML实体线更换" ")。回到一个jquery目标。

7.html():设定或获得选定原素的內容(包含html标识)。

1)无主要参数html():

获得第一个配对原素的html內容。此涵数不可以用以XML文本文档。可是它还可以在XHTML文本文档中应用，而且它回到一个字符串数组。

2)带主要参数的html(val):

设定每一个配对原素的html內容。此涵数不可以用以XML文本文档。它还可以用以XHTML文本文档。回到一个jquery目标。

8.val()方式。

关键用以获得键入.挑选.文字地区等表单元素的值。当在空集合上启用时，它回到undefined；

1)没有主要参数的val():

获得配对原素结合中第一个原素的当今值。实例:

HTML编码:

控制面板輸出:

2)阀(val):

设定每一个配对原素的值。回到一个jquery目标。

引言

八种方式:內部HTML.外界HTML.內部文字.外界文字.值.文字().html().val()。你如今清晰了没有？