집 >웹 프론트엔드 >JS 튜토리얼 >javascript_javascript 스킬의 parentNode, childNodes 및 children 적용에 대한 자세한 설명

javascript_javascript 스킬의 parentNode, childNodes 및 children 적용에 대한 자세한 설명

WBOY원래의: 2016-05-16 17:08:461323검색

"상위 노드"

은 요소의 상위 노드를 가져오는 데 자주 사용됩니다. parentNodes를 컨테이너로 이해하고 컨테이너에 하위 노드가 있습니다.

예:

내 텍스트

위 코드에서 "Dad"가 div 컨테이너로 사용되고 컨테이너에 굵은 텍스트 부분인 "child"가 있는 것을 볼 수 있습니다. 굵은 글씨 요소를 얻고 그 "아버지"가 누구인지 알고 싶다면 반환된 정보는 div가 될 것입니다. 다음 스크립트를 시연하면 무슨 일이 일어나고 있는지 알 수 있습니다...

인용문:

코드 복사 코드는 다음과 같습니다.

내 텍스트

parentNode를 사용한다고 해서 반드시 그런 것은 아닙니다. 다음 예와 같이 "아버지"만 찾으면 "아들"도 "아버지"가 될 수 있습니다...

인용문:

코드 복사 코드는 다음과 같습니다.

                                                                    >

두 명의 "부모"가 있습니다. 위 코드에서 두 개의 "자식"은 첫 번째 div(ID "부모")의 "아버지"입니다. 두 번째 div(childparent). 
"childparent" div의 "child"에 굵은 요소(id "child")가 있습니다. 따라서 "grandpa"(id ")에 액세스하는 방법은 다음과 같습니다. parent")? 아주 간단해요... . 

인용문:

코드 복사

코드는 다음과 같습니다.

;

두 개의 parentNode가 함께 사용된다는 점을 알고 계셨습니까? 첫 번째 parentNode는 div(ID "childparent")입니다. 가장 바깥쪽 상위 요소를 가져오고 싶기 때문에 여기에 있습니다. .div (id "parent").
parentNode를 사용하면 요소의 nodeName뿐만 아니라 더 많은 요소를 찾을 수 있습니다. 예를 들어, 많은 수의 요소가 포함된 상위 노드를 가져오고 새 노드를 추가할 수 있습니다.
IE에는 "parentElement"라는 자체 이름이 있으며, 크로스 브라우저 스크립트의 경우 parentNode를 사용하는 것이 좋습니다.

몇 마디 더:
html 파일의 헤드에 javascript를 넣으면 Firefox에서 다음 오류가 보고됩니다.

document.getElementById("child")에는 속성이 없습니다

IE는 다음과 같습니다.

필수 개체

이유는 자바스크립트를 지원하는 모든 브라우저는 DOM을 완전히 파싱하기 전에 자바스크립트를 실행하기 때문입니다. 실제 웹 프로그래밍에서는 대부분의 자바스크립트가 제대로 실행되기 위해서는 경고가 함수에 래핑되어야 합니다. 예를 들어 문서가 로드된 후 함수를 호출하세요.

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 속성: 개체 계층 구조에서 상위 개체를 검색합니다.

childNodes:
지정된 개체의 직계 자손인 HTML 요소 및 TextNode 개체 컬렉션을 검색합니다.

children:
객체의 직계 자손인 DHTML 객체 컬렉션을 검색합니다.

parentElement parentNode.parentNode.childNodes 사용 예

첫 번째 방법

코드 복사 코드는 다음과 같습니다.

</ TITLE> <META NAME="Generator" C> <META NAME="Author" C> <META NAME="Keywords" C> <META NAME=" 설명" C> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> < ;BODY> <TABLE id="tb"> <TR> <TD><input type="radio" name="rad">< /TD> <TD></TD> <TD></TD> </TR> <TR> <td name="rad"><TD></TD> <TD></TD> </TR> ; <TR> <TD><input type="radio" name="rad"></TD> </td> <td> <TD></TD> </TR> </TABLE> </BODY> </HTML> 두 번째 방법 <div class="codetitle"> <a style="CURSOR: pointer" data="79486" class="copybut" id="copybut79486" onclick="doCopy('code79486')">코드 복사</a> 코드는 다음과 같습니다.</div> <div class="codebody" id="code79486"> <테이블 테두리=1 너비=100%> <tr> <td><입력 이름=m 유형=체크박스 ></td> <td>1111</td> <td><입력 이름=aaa value="222" 비활성화됨></td> <td><입력 이름=bbb 값= "333" 비활성화됨></td> </tr> <tr> <td><input name=m type=checkbox ></td> <td>1111</td> <td><입력 이름=aaa value="222" 비활성화됨></td> <td><입력 이름=bbb 값= "333" 비활성화됨></td> </tr> <tr> <td><input name=m type=checkbox ></td> <td>1111</td> <td><입력 이름=aaa value="222" 비활성화됨></td> <td><입력 이름=bbb 값= "333" 비활성화됨></td> </tr> </table> <SCRIPT LANGUAGE="JavaScript"> mm(e) 함수 { var currentTr=e.parentElement.parentElement; var inputObjs=currentTr.getElementsByTagName("input"); for(var i=0;i<inputObjs.length;i ) { if(inputObjs[i ]==e) continue; inputObjs[i ].disabled=!e.checked; } } </SCRIPT> </div> 获取HTML中的父控件方法 <div class="codetitle"> <a style="CURSOR: pointer" data="61733" class="copybut" id="copybut61733" onclick="doCopy('code61733')">复代码</a> 代码如下:</div> <div class="codebody" id="code61733"> function setvalue(v,o) { //var obj=document.getElementById(''batchRate''); //windows. Alert(o.parentNode.innerHTML); 경고(o.parentNode); //parentNode此处也是获取父控件 경고(o.parentElement); //parentElement此处也是获取父控件 경고(o.parentElement.parentNode); //parentElement.parentNode此处也是获取父控件 //o.parentNode.bgColor="red"; o.parentElement.parentNode.bgColor="red"; } </div> 实例: <div class="codetitle"> <a style="CURSOR: pointer" data="88436" class="copybut" id="copybut88436" onclick="doCopy('code88436')">复aze代码</a> 代码如下:</div> <div class="codebody" id="code88436"> <html> <head> <meta http-equiv="Content-Language" c> <meta http-equiv="Content-Type" c> <title>New建网页 1
< /head>
<script> function setvalue(v,o) { //var obj=document.getElementById(''batchRate''); //windows. 경고(o.parentNode.innerHTML); 경고(o.parentNode); 경고(o.parentElement); //o.parentNode.bgColor="red"; o.parentElement.parentNode.bgColor="red"; } </script>
< body>

성명：

이전 기사：javascript 디버깅 중에 찾을 수 없는 오류의 가능한 원인_javascript 팁다음 기사：javascript 디버깅 중에 찾을 수 없는 오류의 가능한 원인_javascript 팁

javascript_javascript 스킬의 parentNode, childNodes 및 children 적용에 대한 자세한 설명

관련 기사