>  기사  >  웹 프론트엔드  >  HTML 요소의 ID와 Name 속성의 차이점에 대한 자세한 소개

HTML 요소의 ID와 Name 속성의 차이점에 대한 자세한 소개

高洛峰
高洛峰원래의
2017-03-20 16:53:341436검색

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

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

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

목적 1: 입력, 선택, 텍스트 영역 및 버튼과 같이 서버와 상호 작용할 수 있는 HTML 요소의 서버측 표시기로 사용됩니다. 서버 측 이름을 기반으로 Request.Params를 통해 요소가 제출한 값을 얻을 수 있습니다.
사용 2: HTML 요소 입력 유형='radio'그룹, 라디오 버튼 컨트롤이 동일한 그룹 클래스에 있고 확인 작업이 뮤텍스이며 하나의 라디오만 선택할 수 있다는 것을 알고 있습니다. 동시에 이 그룹은 동일한 Name속성을 기반으로 구현됩니다.
목적 3: 페이지에 앵커 를 만듭니다. 목적 4: Applet, Object, Embed 및 기타 요소와 같은 Object의 정체성. 예를 들어 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里说了要这么做的,可是这样设计的原理什么呢?我暂时没有想太明白HTML 요소의 ID와 Name 속성의 차이점에 대한 자세한 소개

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

위 내용은 HTML 요소의 ID와 Name 속성의 차이점에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.