innerText,innerHTML和value的区别，以及如何获取下拉框中选中的项的文本内容。

一、innerText和innerHTML异同点： 

相同点：二者都可以获取到标签内包含的文本值。

 

 

    从结果可以看出二者都是获取到了h1标签内的文本h1，并且二者相等，说明两个方法拿出来的内容都是以相同的形式展现。

不同点：innerText是获取到标签内的文本节点的值，而innerHTML是获取到标签内所有的内容，包括了子元素标签本身也会被获取到，如下图：

 

    从输出结果可以看出innerText可以获取到本身标签内部包含的所有文本值，但是不包含子元素的标签，而innerHTML包含了标签内部的所有的文本内容还同时包含了子元素本身的标签。

二、innerText、innerHTML和value的区别

    innerText、innerHTML都可以用于获取双标签内部的文本值，但无法获取单表签的文本值。比如：input标签。具体区别如下图所示

     从上面可以得到结果是innerText、innerHTML无法获取到input框内容的文本内容，而value可以。

三、如何获取下拉框中选中的文本内容

    前面说了innerText、innerHTML是获取双标签的的文本内容，value获取的是单表签的文本内容所以想要获取下拉框中的文本内容需要使用的是innerText和innerHTML而不是使用value。

    在这里我们需要使用到select标签的selectedIndex属性，帮助我们确认选中的下拉框选项的下标。如果你觉得在下拉框中使用onclick方法感到变扭可以使用onchange方法代替。

    当我们选中第一项是输出下标0

 

    当我们选中第二项时，输出下标1

 

    当我们选中第三项时，输出下标2    

    现在获取用户选中的下拉框下面的所有option，并使用到刚才的下标，得到用户选中的标签

 

    现在拿到的option是双标签，所有可以使用innerText/HTML来获取里面的文本值 ，同时我们输出option的value值看看。

    可以发现innerText和innerHTML都获取到了'男'这个文本值，但是value获取到的是空，这也验证了我们前面的说法。大功告成！