html标签：a、p、span、h1、input、textarea、label、div的id、name、value属性及val()、text()、html()、innerText、innerHTML

来源：互联网发布：华针数据恢复编辑：程序博客网时间：2024/05/17 08:19

先上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);//undefinedconsole.log($("#aid").innerHTML);//undefinedconsole.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);//undefinedconsole.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 functionconsole.log(document.getElementById("aid").value);//undefinedconsole.log(document.getElementById("aid").getAttribute("value"));//我是a标签的valueconsole.log(document.getElementsByName("ana").value);//undefined//console.log(document.getElementsByName("ana").getAttribute("value"));//Uncaught TypeError: document.getElementsByName(...).getAttribute is not a functionconsole.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);//undefinedconsole.log($("#pid").innerHTML);//undefinedconsole.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);//undefinedconsole.log(document.getElementsByName("pna").innerHTML);//undefinedconsole.log(document.getElementById("pid").value);//undefinedconsole.log(document.getElementById("pid").getAttribute("value"));//我是p标签的valueconsole.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);//undefinedconsole.log($("#spid").innerHTML);//undefinedconsole.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);//undefinedconsole.log(document.getElementsByName("spna").innerHTML);//undefinedconsole.log(document.getElementById("spid").value);//undefinedconsole.log(document.getElementById("spid").getAttribute("value"));//我是span标签的valueconsole.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);//undefinedconsole.log($("#h1").innerHTML);//undefinedconsole.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);//undefinedconsole.log(document.getElementsByName("h1na").innerHTML);//undefinedconsole.log(document.getElementById("h1").value);//undefinedconsole.log(document.getElementById("h1").getAttribute("value"));//我是h1标签的valueconsole.log(document.getElementsByName("h1na").value);//undefined//-----------------------------5-------------------------------------------------------------------------------------------------------------------------------------------//input标签console.log($("#inid").val());//我是input标签的valueconsole.log($("#inid").text());//console.log($("#inid").html());//console.log($("#inid").innerText);//undefinedconsole.log($("#inid").innerHTML);//undefinedconsole.log(document.getElementById("inid").innerText);//console.log(document.getElementById("inid").innerHTML);//console.log(document.getElementsByName("inna").innerText);//undefinedconsole.log(document.getElementsByName("inna").innerHTML);//undefinedconsole.log(document.getElementById("inid").value);//我是input标签的valueconsole.log(document.getElementById("inid").getAttribute("value"));//我是input标签的valueconsole.log(document.getElementsByName("inna").value);//undefinedconsole.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);//undefinedconsole.log($("#teid").innerHTML);//undefinedconsole.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);//undefinedconsole.log(document.getElementsByName("txna").innerHTML);//undefinedconsole.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标签的valueconsole.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);//undefinedconsole.log($("#laid").innerHTML);//undefinedconsole.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);//undefinedconsole.log(document.getElementsByName("lana").innerHTML);//undefinedconsole.log(document.getElementById("laid").value);//undefinedconsole.log(document.getElementById("laid").getAttribute("value"));//我是label标签的valueconsole.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);//undefinedconsole.log($("#did").innerHTML);//undefinedconsole.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);//undefinedconsole.log(document.getElementsByName("dna").innerHTML);//undefinedconsole.log(document.getElementById("did").value);//undefinedconsole.log(document.getElementById("did").getAttribute("value"));//我是div的valueconsole.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取到值。

阅读全文

0 0