控件Name和id的区别

最新推荐文章于 2021-06-28 14:52:52 发布

anbs01

最新推荐文章于 2021-06-28 14:52:52 发布

阅读量2k

点赞数

分类专栏： web 开发文章标签： stylesheet javascript table 框架 iframe div

本文链接：https://blog.csdn.net/anbs01/article/details/4802415

版权

web 开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

下午在用select的时候，突然发现一个很怪的问题，无论name和id如何指定，调用的时候都可以混用，在name和id不同的情况下，使用getElementById和getElementsByName 用name和id都可以达到目标，比如下面这段测试代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="iserver.css" rel="stylesheet" type="text/css">
<title>select控件的用法</title>
</head>
<script language="javascript">

function dispSel(opvalue)
{
   if(opvalue == 1){hidiv.style.display="" ;}
  if(opvalue == 2){hidiv.style.display="none" ;}
}

//增加一个option项
function addSel_1()
{
    //var oOption = document.createElement("OPTION");
    var oOption = document.createElement("option" );
    oOption.text="显示" ;
    oOption.value="1" ;
    // document.getElementsByName('oSelect').oSelect.add(oOption);
    // document.getElementsByName('isHide').oSelect.add(oOption);
    // document.getElementsByName('isHide').isHide.add(oOption);
    // document.getElementsByName('oSelect').isHide.add(oOption);
    // document.getElementById('isHide').add(oOption);
    // document.getElementById('oSelect').add(oOption);
    // document.all.f_test.oSelect.add(oOption);
    // document.all.oSelect.add(oOption);
    // document.f_test.oSelect.add(oOption);
    //f_test.oSelect.add(oOption);
}

function addSel_2()
{
    var option = window.Option;

    // document.getElementsByName('isHide').oSelect.options.add(option.create("隐藏","2"));
    // document.getElementsByName('oSelect').isHide.options.add(option.create("隐藏","2"));
    // document.getElementsByName('isHide').isHide.options.add(option.create("隐藏","2"));
    // document.getElementsByName('oSelect').oSelect.options.add(option.create("隐藏","2"));
    // document.getElementById("oSelect").options.add(option.create("隐藏","2"));
    // document.getElementById("isHide").options.add(option.create("隐藏","2"));
    // document.all.f_test.oSelect.options.add(option.create("隐藏","2"));
    // document.f_test.oSelect.options.add(option.create("隐藏","2"));
    // document.all.oSelect.options.add(option.create("隐藏","2"));
    //f_test.oSelect.options.add(option.create("隐藏","2"));
}

window.attachEvent('onload' ,addSel_1);
window.attachEvent('onload' ,addSel_2);

</script>
<body>
<form method="post" name="f_test">
<table class="table" width="100%">
<tr><td>
<select id="oSelect" name="isHide" onChange="dispSel(this.value)">
   <option value="1">显示</option>
   <option value="2">隐藏</option>
</select><span id="hidiv">this is test</span>
</td></tr>
</table>
</form>
</body>
</html>

注意其中getElementsByName和getElementById的调用，当name传给getElementById，id传给getElementsByName都是可以的。于是上网查找原因，大致有下面几种看法：
1。表单元素(form input textarea select)与框架元素(iframe frame)用name
      这些元素都与表单(框架元素作用于form的target)提交有关, 在表单的接收页面只接收有name的元素, 赋ID的元素通过表单是接收不到值的
      当然上述元素也可以赋ID值,具体调用看上面的例子
2。只能赋ID不能赋name的元素:(除去与表单相关的元素都只能赋ID)  body li a table tr td th p div span pre dl dt dd font b 等等
3。id一般用在客户端编程;name则是在服务器使用
4。对某些元素，如div,span等，设置了name也没用，只能用id访问，
5。name可以相同，id唯一