"부모노드"
요소의 상위 노드를 가져오는 데 자주 사용됩니다. parentNodes를 컨테이너로 생각하면 컨테이너에 하위 노드가 있습니다.
예:
<div id="부모">
<b id="child">내 문자</b>
</div>
위 코드에서는 "Dad"가 div 컨테이너로 사용되고 컨테이너에 굵은 텍스트 부분인 "child"가 있는 것을 볼 수 있습니다. getElementById() 메소드를 사용하여 굵은 텍스트를 얻으려는 경우입니다. 요소를 알고 싶습니다. "아빠"는 누구입니까? 반환된 정보는 div입니다. 다음 스크립트를 시연하면 무슨 일이 일어나고 있는지 알 수 있습니다.
인용하다:
다음과 같이 코드 코드를 복사합니다.
<div id="부모">
<b id="child">내 문자</b>
</div>
<스크립트 유형="텍스트/자바스크립트">
<!--
Alert(document.getElementById("child").parentNode.nodeName);
//-->
</script>
parentNode를 사용한다고 해서 반드시 "아버지"만 찾는 것은 아니며, 다음 예에서처럼 "아들"도 "아버지"가 될 수 있습니다.
인용하다:
다음과 같이 코드 코드를 복사합니다.
<div id="부모">
<div id="자식부모">
<b id="child">내 문자</b>
</div>
</div>
위 코드에는 두 개의 "부모"와 두 개의 "자식"이 있습니다. 첫 번째 div(ID "부모")는 두 번째 div(자식 부모)의 "아버지"입니다.
"childparent" div의 "child"인 "childparent"에는 굵은 요소(id "child")가 있습니다. 그러면 "grandpa"(id "parent")에 액세스하는 방법은 매우 간단합니다. .
인용하다:
다음과 같이 코드 코드를 복사합니다.
<div id="부모">
<div id="자식부모">
<b id="child">내 문자</b>
</div>
</div>
<스크립트 유형="텍스트/자바스크립트">
<!--
Alert(document.getElementById("child").parentNode.parentNode.nodeName);
//-->
</script>
두 개의 parentNode가 함께 사용되는 것을 보셨나요? 첫 번째 parentNode는 div(id "childparent")입니다. 가장 바깥쪽 부모 요소를 가져오고 싶기 때문에 div(id "childparent")에 다른 parentNode를 추가합니다. ) "부모").
parentNode를 사용하면 요소의 nodeName을 찾는 것 이상의 작업이 수행됩니다. 예를 들어 많은 요소의 상위 노드를 가져오고 끝에 새 노드를 추가할 수 있습니다.
IE에는 "parentElement"라는 자체 이름이 있으며, 크로스 브라우저 스크립트의 경우 parentNode를 사용하는 것이 좋습니다.
두 단어 더:
html 파일의 헤드에 javascript를 넣으면 Firefox에서 다음과 같은 오류가 발생합니다.
document.getElementById("child")에는 속성이 없습니다.
IE의 경우 다음과 같습니다.
개체필수
그 이유는 JavaScript를 지원하는 모든 브라우저는 DOM을 완전히 구문 분석하기 전에 JavaScript를 실행하기 때문입니다. 실제 웹 프로그래밍에서 대부분의 JavaScript는 제대로 실행되기 위해 함수와 문서에 래핑되어야 합니다. 예를 들어, Body 태그에 추가한 후 함수를 호출하세요.
parentNode, parentElement, childNodes 및 children의 차이점은 무엇입니까?
parentElement 개체 계층 구조에서 상위 개체를 가져옵니다.
parentNode는 문서 계층 구조에서 상위 개체를 가져옵니다.
childNodes 지정된 개체의 직계 자손인 HTML 요소 및 TextNode 개체의 컬렉션을 가져옵니다.
children 객체의 직계 자손인 DHTML 객체의 컬렉션을 가져옵니다.
------------------------------------- ------
parentNode는 parentElement와 동일한 기능을 가지며, childNodes는 children과 동일한 기능을 갖습니다. 하지만 parentNode와 childNode는 W3C 표준을 준수하며 상대적으로 보편적이라고 할 수 있습니다. 나머지 두 개는 표준이 아닌 IE에서만 지원되며 Firefox에서는 지원되지 않습니다.
------------------------------------- ------
즉, parentElement와 children은 IE 고유의 것이며 다른 곳에서는 인식되지 않습니다.
그런 다음 표준 버전은 parentNode, childNodes입니다.
이 두 가지의 기능은 parentElement 및 children과 동일하며 표준적이고 보편적입니다.
------------------------------------- ------
다음은 간단한 설명입니다. 개별 단어의 차이에 주의하세요.
parentNode 속성: 문서 계층 구조에서 상위 개체를 검색합니다.
parentElement 속성: 개체 계층 구조에서 상위 개체를 검색합니다.
자식노드:
지정된 개체의 직계 자손인 HTML 요소 및 TextNode 개체의 컬렉션을 검색합니다.
어린이들:
개체의 직계 자손인 DHTML 개체 컬렉션을 검색합니다.
parentElement parentNode.parentNode.childNodes 사용 예
첫 번째 방법
다음과 같이 코드 코드를 복사합니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<헤드>
<TITLE> 새 문서 </TITLE>
<META NAME="생성기" C>
<META NAME="저자" C>
<META NAME="키워드" C>
<META 이름="설명" C>
<SCRIPT LANGUAGE="자바스크립트">
<!--
var 행 = -1;
함수 showEdit(obj){
var cell2 = obj.parentNode.parentNode.childNodes[1];
var rowIndex = obj.parentNode.parentNode.rowIndex;
cell2.innerHTML = "<input type='text' 값='"+ cell2.innerHTML +"'>";
if(행 != -1){
var oldCell2 = document.getElementById("tb").rows[row].cells[1];
oldCell2.innerHTML = oldCell2.childNodes[0].value;
}
행 = 행인덱스;
}
//-->
</SCRIPT>
</HEAD>
<본문>
<테이블 id="tb">
<TR>
<TD><input type="radio" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><input type="radio" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD><input type="radio" name="rad"></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>
두 번째 방법
다음과 같이 코드 코드를 복사합니다.
<테이블 테두리=1 너비=100%>
<tr>
<td><입력 이름=m 유형=체크박스 ></td>
<td>1111</td>
<td><입력 이름=aaa value="222" 비활성화됨></td>
<td><입력 이름=bbb value="333" 비활성화됨></td>
</tr>
<tr>
<td><입력 이름=m 유형=체크박스 ></td>
<td>1111</td>
<td><입력 이름=aaa value="222" 비활성화됨></td>
<td><입력 이름=bbb value="333" 비활성화됨></td>
</tr>
<tr>
<td><입력 이름=m 유형=체크박스 ></td>
<td>1111</td>
<td><입력 이름=aaa value="222" 비활성화됨></td>
<td><입력 이름=bbb value="333" 비활성화됨></td>
</tr>
</table>
<SCRIPT LANGUAGE="자바스크립트">
함수 mm(e)
{
var currentTr=e.parentElement.parentElement;
var inputObjs=currentTr.getElementsByTagName("input");
for(var i=0;i<inputObjs.length;i++)
{
if(inputObjs[i ]==e) 계속;
inputObjs[i ].disabled=!e.checked;
}
}
</SCRIPT>
HTML에서 상위 컨트롤 메서드 가져오기
다음과 같이 코드 코드를 복사합니다.
함수 설정값(v,o)
{
//var obj=document.getElementById(''batchRate'');
//창.
경고(o.parentNode.innerHTML);
Alert(o.parentNode); //parentNode도 여기서 부모 컨트롤을 얻습니다.
Alert(o.parentElement); //parentElement도 여기서 부모 컨트롤을 얻습니다.
Alert(o.parentElement.parentNode); //parentElement.parentNode도 여기에서 상위 컨트롤을 가져옵니다.
//o.parentNode.bgColor="빨간색";
o.parentElement.parentNode.bgColor="빨간색";
}
예:
다음과 같이 코드 코드를 복사합니다.
<html>
<머리>
<meta http-equiv="Content-Language" c>
<meta http-equiv="콘텐츠 유형" c>
<title>새 웹페이지 1</title>
</head>
<스크립트>
함수 설정값(v,o)
{
//var obj=document.getElementById(''batchRate'');
//창.
경고(o.parentNode.innerHTML);
경고(o.parentNode);
경고(o.parentElement);
//o.parentNode.bgColor="빨간색";
o.parentElement.parentNode.bgColor="빨간색";
}
</script>
<본문>
<테이블 id="테이블1">
<tr>
<td><a >dfsdfdsfdsa</a></td>
<td> </td>
<td> </td>
</tr>