• 회원가입
  • 로그인
  • 구글아이디로 로그인

[DOM_HTMLCollection] JS - namedItem() 메서드 - 지정 id 또는 name 갖는 요소 반환

namedItem() 예제

 

[정식코드]

 

<h1 id="hz">홈짱닷컴 Homzzang.com</h1>

<h1>홈페이지 제작관리 + 서버관리</h1>

<h1>HTML CSS JS JQ PHP SQL BS</h1>


<button onclick="homzzang()">클릭</button>


<script>

function homzzang() {

  var x = document.getElementsByTagName("H1").namedItem("hz");

  x.style.color = 'red';

}

</script>

 

결과보기


 

[단축코드]

<h1 id='hz'>홈짱닷컴 Homzzang.com</h1>

<h1>홈페이지 제작관리 + 서버관리</h1>

<h1>HTML CSS JS JQ PHP SQL BS</h1>


<button onclick="homzzang()">클릭</button>


<script>

function homzzang() {

  var x = document.getElementsByTagName("H1")["hz"];  

  x.style.color = 'red';

}

</script>

 

결과보기

 

 

namedItem() 정의

 

HTMLCollection에서 지정된 id 또는 name 갖는 요소 반환.

 


 

1.

id와 name이 동일한 여러 요소 있는 경우, 순서 상관없이  id 우선. (아래 예제1)

 

2.

name이 동일한 여러 요소만 있는 경우, 가장 첫 번째 name만 선택. (아래 예제2)

 

3.

단축코드 사용 가능하며, 동일 결과 반환.

 

4.

모든 브라우저 지원.

 

 

 

namedItem() 구문

 

[정식코드]

HTMLCollection.namedItem(name)

 

[단축코드]

HTMLCollection[name]

 


 

[반환값]

 

지정된 ID 또는 이름 갖는 요소 객체.

(요소가 존재 안 하면, null 반환.)

 

 

 

namedItem() 예제1 - 동일 명칭 갖는 id와 name이 여러 개 경우

 

<h1 id="hz">홈짱닷컴 Homzzang.com</h1>

<h1 name='hz'>홈페이지 제작관리 + 서버관리</h1>

<h1 name='hz'>HTML CSS JS JQ PHP SQL BS</h1>


<button onclick="homzzang()">클릭</button>


<script>

function homzzang() {

  var x = document.getElementsByTagName("H1").namedItem("hz");

  x.style.color = 'red';

}

</script>

 

결과보기

 

 

namedItem() 예제2 - 동일 name 갖는 요소가 여럿인 경우

 

<h1 name='hz'>홈짱닷컴 Homzzang.com</h1>

<h1 name='hz'>홈페이지 제작관리 + 서버관리</h1>

<h1 name='hz'>HTML CSS JS JQ PHP SQL BS</h1>


<button onclick="homzzang()">클릭</button>


<script>

function homzzang() {

  var x = document.getElementsByTagName("H1").namedItem("hz");

  x.style.color = 'red';

}

</script>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012