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

 

[정식코드]

 

<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>

 

결과보기