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>
결과보기
