요소 ID와 name_javascript 기술을 통해 요소를 직접 얻는 JavaScript 방법

이 기사의 예에서는 JavaScript가 요소 ID와 이름을 통해 요소를 직접 얻을 수 있는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

우리는 일부 타사 js 라이브러리가 html에서 요소를 빠르게 선택하는 방법을 단순화했다는 것을 알고 있습니다. 매우 신비해 보이지만 실제로는 그렇지 않습니다. 게다가 js 자체에는 특수 요소를 선택하는 간단한 방법도 포함되어 있습니다. 아래에서 간단히 소개하겠습니다.

HTML에서 HTML 요소를 식별하는 가장 직접적인 방법은 일반적으로 이름과 ID 속성이 약간 다른데, ID는 페이지에 대해 고유해야 하지만 이름은 반복될 수 있습니다.

js에서는 id 이름이 내장 속성이나 전역 변수와 동일하지 않으면 그 이름은 자동으로 window 객체의 속성이 되며, html 페이지의 최상위 환경에는 :

this === window

따라서 다음과 같은 html 요소 코드를 작성하면 다음과 같이 참조할 수 있습니다.

<input type="button" id="btn_ok" value="Ok" onclick="..." />
//可以这样引用
btn_ok.onclick = function(){};
//或者下面也是一样的
window.btn_ok.style = ...;

name 속성의 경우 특정 유형의 html 요소에만 유사한 메소드(예: form, img, iframe, applet, embed, object 등)가 있습니다. 이러한 요소에서 특정 이름 속성을 가진 요소는 전역 변수 또는 문서 속성을 통해 액세스할 수 있습니다. 동일한 이름 속성을 가진 여러 요소가 있는 경우 다음 코드와 같이 NodeList와 유사한 읽기 전용 배열 개체가 반환됩니다. >

<div>
  <img name="pic" src="#" alt="pic_0" />
  <img name="pic" src="#" alt="pic_1" />
  <img name="pic" src="#" alt="pic_2" />
</div>
//我们可以这样引用name为pic的元素：
for(x in pic)
 console.log(pic[x].alt);
//或者是非"标准"语法each语句方式
for each(img in pic)
 console.log(img.alt);

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.