js获取htmlelement对象方法JS中获取元素属性的8年夜办法

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

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

innerHTML、outerHTML、innerText 、outerText、value 属于原生javascript的方法。

js获取htmlelement对象方法JS中获取元素属性的8年夜办法 GraphQL

（图片来自网络侵删）

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标记）