先上html文本标签的测试代码:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试html标签:a、p、span、h1、input、textarea、label的id、name、value属性及其val()、text()、html()、innerText、innerHTML</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<a href="" id="aid" name="ana" value="我是a标签的value">我在紧贴a内<span class="">我在a中的span中</span><div id="" class="">我在a中的div中<span class="">我在a中的div中的span中</span></div></a>
<p id="pid" name="pna" value="我是p标签的value">我在紧贴p内<span class="">我在p中的span中</span><div id="" class="">我在p中的div中<span class="">我在p中的div中的span中</span></div></p>
<span class="" id="spid" name="spna" value="我是span标签的value">我在紧贴span内<span class="">我在span中的span中</span><div id="" class="">我在span中的div中<span class="">我在span中的div中的span中</span></div></span>
<h1 id="h1" name="h1na" value="我是h1标签的value">我在紧贴h1内<span class="">我在h1中的span中</span><div id="" class="">我在h1中的div中<span class="">我在h1中的div中的span中</span></div></h1>
<input type="text" id="inid" name="inna" value="我是input标签的value"/>我在input标签后面
<textarea id="teid" name="txna" rows="5" cols="30" value="我是textarea标签的value">我在紧贴textarea内<span class="">我在textarea中的span中</span><div id="" class="">我在textarea中的div中<span class="">我在textarea中的div中的span中</span></div></textarea>
<label id="laid" name="lana" value="我是label标签的value">我在紧贴label内<span class="">我在label中的span中</span><div id="" class="">我在label中的div中<span class="">我在label中的div中的span中</span></div></label>
<div id="did" name="dna" value="我是div的value" class="">我在紧贴div内<span class="">我在div中的span中</span><div id="" class="">我在div中的div中<span class="">我在div中的div中的span中</span></div></div>
<script>
$(document).ready(function(){
//----------------------------1--------------------------------------------------------------------------------------------------------------------------------------------
//a标签
console.log($("#aid").val());//
console.log($("#aid").text());//我在紧贴a内我在a中的span中我在a中的div中我在a中的div中的span中
console.log($("#aid").html());//我在紧贴a内<span class="">我在a中的span中</span><div id="" class="">我在a中的div中<span class="">我在a中的div中的span中</span></div>
console.log($("#aid").innerText);//undefined
console.log($("#aid").innerHTML);//undefined
console.log(document.getElementById("aid").innerText);//我在紧贴a内我在a中的span中
//我在a中的div中我在a中的div中的span中
console.log(document.getElementById("aid").innerHTML);//我在紧贴a内<span class="">我在a中的span中</span><div id="" class="">我在a中的div中<span class="">我在a中的div中的span中</span></div>
console.log(document.getElementsByName("ana").innerText);//undefined
console.log(document.getElementsByName("ana").innerHTML);//undefined
//console.log(document.getElementById("aid").text());//Uncaught TypeError: document.getElementById(...).text is not a function
//console.log(document.getElementById("aid").html());//Uncaught TypeError: document.getElementById(...).html is not a function
//console.log(document.getElementsByName("ana").text());//Uncaught TypeError: document.getElementsByName(...).text is not a function
//console.log(document.getElementsByName("ana").html());//Uncaught TypeError: document.getElementsByName(...).html is not a function
//console.log(document.getElementById("aid").val());//Uncaught TypeError: document.getElementById(...).val is not a function
//console.log(document.getElementsByName("ana").val());//Uncaught TypeError: document.getElementsByName(...).val is not a function
console.log(document.getElementById("aid").value);//undefined
console.log(document.getElementById("aid").getAttribute("value"));//我是a标签的value
console.log(document.getElementsByName("ana").value);//undefined
//console.log(document.getElementsByName("ana").getAttribute("value"));//Uncaught TypeError: document.getElementsByName(...).getAttribute is not a function
console.log($("#aid").value);//undefined
//console.log($("#aid").getAttribute("value"));//Uncaught TypeError: $(...).getAttribute is not a function
//-------------------------2-----------------------------------------------------------------------------------------------------------------------------------------------
//p标签
console.log($("#pid").val());//
console.log($("#pid").text());//我在紧贴p内我在p中的span中
console.log($("#pid").html());//我在紧贴p内<span class="">我在p中的span中</span>
console.log($("#pid").innerText);//undefined
console.log($("#pid").innerHTML);//undefined
console.log(document.getElementById("pid").innerText);//我在紧贴p内我在p中的span中
console.log(document.getElementById("pid").innerHTML);//我在紧贴p内<span class="">我在p中的span中</span>
console.log(document.getElementsByName("pna").innerText);//undefined
console.log(document.getElementsByName("pna").innerHTML);//undefined
console.log(document.getElementById("pid").value);//undefined
console.log(document.getElementById("pid").getAttribute("value"));//我是p标签的value
console.log(document.getElementsByName("pna").value);//undefined
//console.log(document.getElementsByName("pna").getAttribute("value"));//Uncaught TypeError: document.getElementsByName(...).getAttribute is not a function
//---------------------------3---------------------------------------------------------------------------------------------------------------------------------------------
//span标签
console.log($("#spid").val());//
console.log($("#spid").text());//我在紧贴span内我在span中的span中我在span中的div中我在span中的div中的span中
console.log($("#spid").html());//我在紧贴span内<span class="">我在span中的span中</span><div id="" class="">我在span中的div中<span class="">我在span中的div中的span中</span></div>
console.log($("#spid").innerText);//undefined
console.log($("#spid").innerHTML);//undefined
console.log(document.getElementById("spid").innerText);//我在紧贴span内我在span中的span中
//我在span中的div中我在span中的div中的span中
console.log(document.getElementById("spid").innerHTML);//我在紧贴span内<span class="">我在span中的span中</span><div id="" class="">我在span中的div中<span class="">我在span中的div中的span中</span></div>
console.log(document.getElementsByName("spna").innerText);//undefined
console.log(document.getElementsByName("spna").innerHTML);//undefined
console.log(document.getElementById("spid").value);//undefined
console.log(document.getElementById("spid").getAttribute("value"));//我是span标签的value
console.log(document.getElementsByName("spna").value);//undefined
//----------------------------4--------------------------------------------------------------------------------------------------------------------------------------------
//h1标签
console.log($("#h1").val());//
console.log($("#h1").text());//我在紧贴h1内我在h1中的span中我在h1中的div中我在h1中的div中的span中
console.log($("#h1").html());//我在紧贴h1内<span class="">我在h1中的span中</span><div id="" class="">我在h1中的div中<span class="">我在h1中的div中的span中</span></div>
console.log($("#h1").innerText);//undefined
console.log($("#h1").innerHTML);//undefined
console.log(document.getElementById("h1").innerText);//我在紧贴h1内我在h1中的span中
//我在h1中的div中我在h1中的div中的span中
console.log(document.getElementById("h1").innerHTML);//我在紧贴h1内<span class="">我在h1中的span中</span><div id="" class="">我在h1中的div中<span class="">我在h1中的div中的span中</span></div>
console.log(document.getElementsByName("h1na").innerText);//undefined
console.log(document.getElementsByName("h1na").innerHTML);//undefined
console.log(document.getElementById("h1").value);//undefined
console.log(document.getElementById("h1").getAttribute("value"));//我是h1标签的value
console.log(document.getElementsByName("h1na").value);//undefined
//-----------------------------5-------------------------------------------------------------------------------------------------------------------------------------------
//input标签
console.log($("#inid").val());//我是input标签的value
console.log($("#inid").text());//
console.log($("#inid").html());//
console.log($("#inid").innerText);//undefined
console.log($("#inid").innerHTML);//undefined
console.log(document.getElementById("inid").innerText);//
console.log(document.getElementById("inid").innerHTML);//
console.log(document.getElementsByName("inna").innerText);//undefined
console.log(document.getElementsByName("inna").innerHTML);//undefined
console.log(document.getElementById("inid").value);//我是input标签的value
console.log(document.getElementById("inid").getAttribute("value"));//我是input标签的value
console.log(document.getElementsByName("inna").value);//undefined
console.log($("#inid").value);//undefined
//console.log($("#inid").getAttribute("value"));//Uncaught TypeError: $(...).getAttribute is not a function
//-----------------------------6-------------------------------------------------------------------------------------------------------------------------------------------
//textarea标签
console.log($("#teid").val());//我在紧贴textarea内<span class="">我在textarea中的span中</span><div id="" class="">我在textarea中的div中<span class="">我在textarea中的div中的span中</span></div>
console.log($("#teid").text());//我在紧贴textarea内<span class="">我在textarea中的span中</span><div id="" class="">我在textarea中的div中<span class="">我在textarea中的div中的span中</span></div>
console.log($("#teid").html());//我在紧贴textarea内<span class="">我在textarea中的span中</span><div id="" class="">我在textarea中的div中<span class="">我在textarea中的div中的span中</span></div>
console.log($("#teid").innerText);//undefined
console.log($("#teid").innerHTML);//undefined
console.log(document.getElementById("teid").innerText);//
console.log(document.getElementById("teid").innerHTML);//我在紧贴textarea内<span class="">我在textarea中的span中</span><div id="" class="">我在textarea中的div中<span class="">我在textarea中的div中的span中</span></div>
console.log(document.getElementsByName("txna").innerText);//undefined
console.log(document.getElementsByName("txna").innerHTML);//undefined
console.log(document.getElementById("teid").value);//我在紧贴textarea内<span class="">我在textarea中的span中</span><div id="" class="">我在textarea中的div中<span class="">我在textarea中的div中的span中</span></div>
console.log(document.getElementById("teid").getAttribute("value"));//我是textarea标签的value
console.log(document.getElementsByName("txna").value);//undefined
//----------------------------7--------------------------------------------------------------------------------------------------------------------------------------------
//label标签
console.log($("#laid").val());//
console.log($("#laid").text());//我在紧贴label内我在label中的span中我在label中的div中我在label中的div中的span中
console.log($("#laid").html());//我在紧贴label内<span class="">我在label中的span中</span><div id="" class="">我在label中的div中<span class="">我在label中的div中的span中</span></div>
console.log($("#laid").innerText);//undefined
console.log($("#laid").innerHTML);//undefined
console.log(document.getElementById("laid").innerText);//我在紧贴label内我在label中的span中
//我在label中的div中我在label中的div中的span中
console.log(document.getElementById("laid").innerHTML);//我在紧贴label内<span class="">我在label中的span中</span><div id="" class="">我在label中的div中<span class="">我在label中的div中的span中</span></div>
console.log(document.getElementsByName("lana").innerText);//undefined
console.log(document.getElementsByName("lana").innerHTML);//undefined
console.log(document.getElementById("laid").value);//undefined
console.log(document.getElementById("laid").getAttribute("value"));//我是label标签的value
console.log(document.getElementsByName("lana").value);//undefined
//-----------------------------8-------------------------------------------------------------------------------------------------------------------------------------------
//div标签
console.log($("#did").val());//
console.log($("#did").text());//我在紧贴div内我在div中的span中我在div中的div中我在div中的div中的span中
console.log($("#did").html());//我在紧贴div内<span class="">我在div中的span中</span><div id="" class="">我在div中的div中<span class="">我在div中的div中的span中</span></div>
console.log($("#did").innerText);//undefined
console.log($("#did").innerHTML);//undefined
console.log(document.getElementById("did").innerText);//我在紧贴div内我在div中的span中
//我在div中的div中我在div中的div中的span中
console.log(document.getElementById("did").innerHTML);//我在紧贴div内<span class="">我在div中的span中</span><div id="" class="">我在div中的div中<span class="">我在div中的div中的span中</span></div>
console.log(document.getElementsByName("dna").innerText);//undefined
console.log(document.getElementsByName("dna").innerHTML);//undefined
console.log(document.getElementById("did").value);//undefined
console.log(document.getElementById("did").getAttribute("value"));//我是div的value
console.log(document.getElementsByName("dna").value);//undefined
//------------------------------------------------------------------------------------------------------------------------------------------------------------------------
})
$().ready(function(){
//do something
})
$(function(){
})
</script>
</body>
</html>
显示效果如下图(为了方便对比查看,已红框加文字标示):
总结:
1.html中所有标签都有id和name属性。
3.原始js中无val()、text()、html()方法,仅属于jquery这个轻量级js框架里的对象。
4.innerText、innerHTML、.value、getAttribute("value")属于原始js的dom属性取值方法,jquery对象不能通过此属性取值。
5.仅input和textarea可用val()获取值,其中input取出的是其value属性的值,textarea取出的是中间文本框里的值(仅限jquery对象)。
2.在jquery中,a、p、span、h1、input、textarea、label标签中除input标签以外都有text()和html()方法,其中p标签的text()和html()方法会过滤掉div,input无text()和html()方法。
7.jquery中的text()会把当前标签里的所有文本取出来再拼接在一起。
6.实验得出a、p、span、h1、input、textarea、label、div都有value属性,通过id属性获取到的dom的getAttribute("value")方法能获取到value属性的值,其中input和textarea的通过id属性获取到的dom的.value能取到值,input取到的是其value属性的值,textarea取到的是其文本框里的值。所有这些标签通过name属性获取到的dom没有以上功能。jquery对象也没有以上功能。
8.除了textarea、input标签,其他都可以通过id获取到的dom的innerText和innerHTML取到值,innerText取到的值是过滤掉所有标签后的文本,遇到div会换行(与text()不同在此),而innerHTML不会过滤标签,同html()。textarea标签的innerText不能取到值,而innerHTML可以取到标签中间输入框里的内容,html()和innerHTML取到的值会转义:<转成< >转成>。p标签的innerText和innerHTML都会过滤掉div部分 不取值。input没有以上用法。
9.以上标签都不能通过name属性获取到的dom的innerText和innerHTML取到值。