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

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

WBOY
풀어 주다: 2016-05-16 17:08:46
원래의
1337명이 탐색했습니다.

"상위 노드"

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






관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿