我们的日常前端开发工作中，经常会用到javascript技术，那么javascript获取元素的方法有哪些，大家都知道吗？目前获取元素属性的方法中最常见的有8个，包括innerHTML、outerHTML、innerText 、outerText、value、text()、html()，val()，让我们分别了解下应用方法吧。

1、innerHTML 属性

在读模式下，innerHTML属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的 HTML 标记。在写模式下，innerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。下面是一个例子：

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

2、outerHTML 属性

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

如果在元素上调用 outerHTML，会返回与上面相同的代码，包括本身。使用 outerHTML 属性以下面这种方式设置值：

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

结果，就是新创建的元素会取代 DOM 树中的元素。

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

语法：

3、innerText 属性

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

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

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

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

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

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

输出：

4、outerText 属性

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

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

本质上，新的文本节点会完全取代调用 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对象。

大家对以上的8个javascript获取元素的方法是否有了一些了解呢？根据获取元素方法的不同，所应用的场景也不相同。想要熟练地使用这8种方法，就需要了解它们各个特征。更多关于前端培训的问题，欢迎咨询云和数据官网。云和数据拥有多年IT培训服务经验，采用全程面授高品质、高体验培养模式，拥有国内一体化教学管理及学员服务，助力更多学员实现高薪梦

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

<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 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="<p>This is a paragraph.</p>";

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

node.replaceChild(newnode,oldnode)

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

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

div.innerText="Hello world!";

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

div.innerText=div.innerText;

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

div.outerText="Hello world!";

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

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

分享成果，随喜正能量】人生，有多少计较，就有多少痛苦。有多少宽容，就有多少欢乐。痛苦与欢乐都是心灵的折射，就像镜子里面有什么，决定于镜子面前的事物。心里放不下，自然成了负担，负担越多，人生越不快乐。计较的心如同口袋，宽容的心犹如漏斗。复杂的心爱计较，简单的心易快乐。

《VBA信息获取与处理》教程是我推出第六套教程，目前已经是第一版修订了。这套教程定位于最高级，是学完初级，中级后的教程。这部教程给大家讲解的内容有：跨应用程序信息获得、随机信息的利用、电子邮件的发送、VBA互联网数据抓取、VBA延时操作，剪贴板应用、Split函数扩展、工作表信息与其他应用交互，FSO对象的利用、工作表及文件夹信息的获取、图形信息的获取以及定制工作表信息函数等等内容。程序文件通过32位和64位两种OFFICE系统测试。是非常抽象的，更具研究的价值。

教程共两册，八十四讲。今日的内容是专题八“VBA与HTML文档”的第二节上半部分：HTML文档元素

第二节 HTML文档的元素分析之一

大家好，我们这讲开始HTML的讲解，为了认识这种特殊的语言，我们要先看看这种语言中的各种元素个代表什么意义。上节中在讲这种语言的特征时讲过，标签是用来描述网页的。浏览器读取HTML文档，识别标签，并按标签要求以网页进行显示文本。大部分标签都是成队出现的。

起始标签和结束标签之间的所有文本，都叫做元素。也就是这个格式就是：

<起始标签:也叫元素名>元素的内容<结束标签:/+元素名>

标签是可以拥有属性的，属性提供了元素的一些附加信息，起始标签，有时候格式如下：

<元素名 属性名称=”属性值”>

同时，元素是可以拥有元素的，即某个元素的内容有时候是一个子元素。

元素这东西，比较抽象，我们可以把它且当作一个对象来理解，例如工作簿对象，每个工作簿的名称都不一样（属性），每个工作簿里面都有工作表（子元素），每个表都有名称（属性），里面填写的内容也不一样（元素的内容）。

1 HTML文档构成的整体框架结构

在上一讲中我们举了一个最为简单的实例来说明HTML文档：

<html>

<body>

<h1>学习VBA语言</h1>

<p>为了更好的掌握VBA的各个知识点，您可以参考我的第一套教程：VBA代码解决方案</p>

</body>

</html>

我们将上面的格式修正一下，如下面：

<html>

<head> <!--注释：文档头部，文档相关消息，并不提供文档内容-->

<title>

VBA应用提高篇

</title>

</head>

<body> <!--注释：文档主体-->

<h1>学习VBA语言</h1>

<p>为了更好的掌握VBA的各个知识点，您可以先参考我的第一套教程：VBA代码解决方案</p>

</body>

</html>

将上面的内容写入记事本中保存为.html文件：HTML基础学习-1.html

然后我们双击打开这个文件，看看浏览器的翻译效果：

我们再看看网页的源码：

从上面的框架代码，我们可以看出，一般的页面，都有html元素，其一般内含两个元素，一个是head元素，一个是body元素。Head元素仅仅说明文档的相关消息，并不展示文档实体，body元素才是真正展示文档主体的，所有要在页面展示的元素，都要在body內进行书写。

2 HTML文档常用元素的构成

1）HTML标题 <h1> - <h6>

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1> 定义最大的标题。<h6> 定义最小的标题。浏览器会自动地在标题的前后添加空行。标题很重要，将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。在HTML基础学习.HTML文件中我们已经用到了标题的元素

2）HTML水平线 <hr />

<hr /> 标签在 HTML 页面中创建水平线。可用于分隔内容。

[待续]

本节参考文件：HTML基础学习-1.html；HTML基础学习-2.html

我20多年的VBA实践经验，全部浓缩在下面的各个教程中，教程学习顺序：

【分享成果，随喜正能量】人生，一岁有一岁的味道，一站有一站的风景，你的年龄应该成为你生命的勋章而不是你伤感的理由。 ??