-
value
value：value是表单元素特有的属性,输入输出的是字符串
如下面的例子，获取到的是他们的value值
<input type="text" id="inP">
<div id="P">
<p>
5566555
</p>
</div>
<button id="btn" value="123">确定</button>
<script>
var inP = document.getElementById("inP");
var P = document.getElementById("P");
var btn =document.getElementById("btn");
btn.onclick=function(){
console.log("===========input============")
console.log("value:==" inP.value);
console.log("===========P================")
console.log("value:==" P.value);
console.log("===========button================")
console.log("value:==" btn.value);
}
</script>input框输入：123456
最后输出如下：
-
innerHTML/outerHTML
(1) innerHTML设置或获取标签所包含的HTML 文本信息 (从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)
(2)outerHTML设置或获取标签自身及其所包含的HTML 文本信息（包括自身）
如下图所示
来个栗子吧：
<input type="text" id="inP">
<div id="P">
<p>5566555</p>
</div>
<button id="btn" value="123">确定</button>
<script>
var inP = document.getElementById("inP");
var P = document.getElementById("P");
var btn =document.getElementById("btn");
btn.onclick=function(){
console.log("===========input============")
console.log("innerHTML:==" inP.innerHTML);
console.log("outerHTML:==" inP.outerHTML);
console.log("===========P================")
console.log("innerHTML:==" P.innerHTML);
console.log("outerHTML:==" P.outerHTML);
console.log("===========button================")
console.log("innerHTML:==" btn.innerHTML);
console.log("outerHTML:==" btn.outerHTML);
}
-
innerText/outerText
（1） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）
innerText 打印标签之间的纯文本信息，会将标签过滤掉，低版本的火狐浏览器不支持，而是支持textContent
（2） outerText设置或获取标签自身及其所包含的文本信息（包括自身）
innerText和outerText在获取的时候是相同效果，
但在设置时，innerText仅设置标签所包含的文本，而outerText设置包含包括标签自身在内的文本
<input type="text" id="inP">
<div id="P"><p>5566555</p></div>
<button id="btn" value="123">确定</button>
<script>
var inP = document.getElementById("inP");
var P = document.getElementById("P");
var btn =document.getElementById("btn");
btn.onclick=function(){
console.log("===========input============")
console.log("innerText:==" inP.innerText);
console.log("outerText:==" inP.outerText);
console.log("===========P================")
console.log("innerText:==" P.innerText);
console.log("outerText:==" P.outerText);
console.log("===========button================")
console.log("innerText:==" btn.innerText);
console.log("outerText:==" btn.outerText);
}
如上图红框所示，innerText和outerText获取值得时候结果是一样的。
-
inner HTML和innerText的对比
-
innerText 打印标签之间的纯文本信息
-
innerHtml 打印标签之间的内容，包括标签和文本信息
-
<div id="P"><p>5566555</p></div>
<button id="btn" value="123">确定</button>
<script>
var inP = document.getElementById("inP");
var P = document.getElementById("P");
var btn =document.getElementById("btn");
btn.onclick=function(){
console.log("===========P================")
console.log("innerHTML:==" P.innerHTML);
console.log("innerText:==" P.innerText);
} 
如果将P标签的内容更改如下
inner HTML也会按照原格式进行输出；
结果如下：
尊重原创，转载请注明出处 https://home.cnblogs.com/u/lshdashi/
如有不当之处，请留言指出，谢谢！
更多专业前端知识，请上 【猿2048】www.mk2048.com