입력 시 id와 name 속성의 차이에 대한 소개 및 분석 예시

아직 입력 시 이름과 ID의 차이를 파악하지 못했습니다. 공부하다가 이 문제가 발생했습니다. 수집된 정보는 나중에 활용하도록 하겠습니다. 오랫동안 웹사이트를 구축해 왔지만 입력 시 이름과 ID의 차이를 아직도 파악하지 못하고 최근에 jquery를 배우다가 또 이런 문제가 발생해서 온라인으로 정보를 수집했습니다. 이 글을 보고 나중에 활용하기 위해 정리했습니다.

웹 개발을 해본 거의 모든 사람들이 요소의 ID와 이름의 차이점이 무엇인지 물어봤다고 할 수 있습니다. ID가 있는데 왜 이름이 필요한가요?! 그리고 가장 고전적인 대답도 얻을 수 있습니다. ID는 사람의 ID 번호와 같고 이름은 ID와 같으며 이름은 반복 가능합니다.

지난 주에도 ID와 이름 문제가 발생했습니다. 페이지에 입력 유형="hidden"을 입력하고 ID='SliceInfo'만 작성하여 값을 할당한 후 요청을 제출하고 사용하세요. Params["SliceInfo"]는 값을 가져올 수 없습니다. 나중에 갑자기 Name으로 표시해야 한다는 것을 깨달았기 때문에 입력에 Name='SliceInfo'를 추가했는데 모든 것이 정상이었습니다.

첫 번째 문단의 ID와 Name에 대한 답변은 너무 일반적입니다. 물론 클라이언트측 HTML 요소의 ID인 ID에 대한 설명은 완전히 맞습니다. Name은 실제로 훨씬 더 복잡합니다. Name은 용도가 다양하고 ID로 완전히 대체할 수 없으므로 취소됩니다. 구체적인 용도는 다음과 같습니다.

사용 1: 입력, 선택, 텍스트 영역 및 버튼과 같이 서버와 상호 작용할 수 있는 HTML 요소의 서버 측 표시기로 사용됩니다. 서버 측 이름을 기반으로 Request.Params를 통해 요소가 제출한 값을 얻을 수 있습니다.
사용 2: HTML 요소 입력 유형='라디오' 그룹화, 라디오 버튼 컨트롤이 동일한 그룹화 클래스에 있고 확인 작업이 뮤텍스이며 동시에 하나의 라디오만 선택할 수 있다는 것을 알고 있습니다. 이 그룹화는 동일한 Name 속성을 기반으로 구현되었습니다.
목적 3: 페이지에 앵커 포인트를 만듭니다. 91d83b4822db6c9c4aabe5918601cc24링크5db79b134e9f6b82c0b36e0489ee08ed 대신 < ;a name="PageBottom">5db79b134e9f6b82c0b36e0489ee08ed과 같이 페이지 앵커를 얻습니다.
사용 4: Applet, Object, Embed 및 기타 요소와 같은 객체로서의 ID입니다. 예를 들어 Applet 객체 인스턴스에서는 이름을 사용하여 객체를 참조합니다.
목적 5: IMG 요소와 MAP 요소를 연관시킬 때 IMG의 핫스팟 영역을 정의하려면 해당 속성인 usemap을 사용해야 하므로 usemap="#name"(연관된 MAP 요소의 이름) ).
사용 6: 속성, 메타, 매개변수와 같은 특정 특정 요소의 속성. 예를 들어, 객체에 대해 c482d017ac37d0493b1edf90b225c0b5 또는 메타에서 db0f0129396a875c0f18375780d74f03

분명히 이러한 용도는 단순히 ID로 대체할 수 없으므로 HTML 요소의 ID와 이름의 차이는 ID 번호와 이름의 차이가 아닙니다.

물론 HTML 요소의 Name 속성도 페이지에서 ID 역할을 할 수 있습니다. 왜냐하면 DHTML 객체 트리에서는 document.getElementsByName을 사용하여 지정된 모든 Name을 포함하는 객체 배열을 얻을 수 있기 때문입니다. 페이지의 요소. Name 속성에는 또 다른 문제가 있습니다. Name 속성을 포함할 수 있는 요소를 동적으로 생성할 때 단순히 name 속성을 추가하기 위해 element.name = "..."을 사용할 수는 없습니다. 요소를 생성하면 'dc549ff4942b59c926c9e4e7a7132efea24c0203f0ae689239f065103120aae7') 요소에 Name 속성이 추가됩니다. 이것은 무엇을 의미합니까? 이해하려면 아래 예를 살펴보십시오.

코드는 다음과 같습니다.

<script language="JavaScript"> 
var input = document.createElement(&#39;INPUT&#39;); 
input.id = &#39;myId&#39;; 
input.name = &#39;myName&#39;; 
alert(input.outerHTML); 
< /script>

메시지 상자에 표시되는 결과는 7c4910ae3e1ff2731c00ced15cbfeb3c입니다.

코드는 다음과 같습니다.

< script language="JavaScript"> 
var input = document.createElement(&#39;<INPUT name="myName">&#39;); 
input.id = &#39;myId&#39;; 
alert(input.outerHTML); 
< /script>

消息框里显示的结果是：fcd57d8d6086a1073f231e2d47bdc82a。
初始化Name属性的这个设计不是IE的缺陷，因为MSDN里说了要这么做的，可是这样设计的原理什么呢？我暂时没有想太明白。

这里再顺便说一下，要是页面中有n(n>1)个HTML元素的ID都相同了怎么办？在DHTML对象中怎么引用他们呢？如果我们使用ASPX页面，这样的情况是不容易发生的，因为aspnet进程在处理aspx页面时根本就不允许有ID非唯一，这是页面会被抛出异常而不能被正常的render。要是不是动态页面，我们硬要让ID重复那IE怎么搞呢？这个时候我们还是可以继续使用document.getElementById获取对象，只不过我们只能获取ID重复的那些对象中在HTML Render时第一个出现的对象。而这时重复的ID会在引用时自动变成一个数组，ID重复的元素按Render的顺序依次存在于数组中。

表单元素(form input textarea select)与框架元素(iframe frame)用 name
这些元素都与表单(框架元素作用于form的target)提交有关, 在表单的接收页面只
接收有name的元素, 赋ID的元素通过表单是接收不到值的, 你自己可以验证一下.
有一个例外: A 可以赋 name 作为锚点, 也可以赋ID

当然上述元素也可以赋ID值, 赋ID值的时候引用这些元素的方法就要变一下了.
赋 name: document.formName.inputName document.frames("frameName")
赋 ID : document.getElementById("inputID") document.all.frameID

只能赋ID不能赋name的元素:(除去与表单相关的元素都只能赋ID)
body li table tr td th p p span pre dl dt dd font b 等等

更多input中id和name属性的区别示例介绍分析相关文章请关注PHP中文网！