찾다

집  >  기사  >  웹 프론트엔드  >  자바스크립트에서 parentNode, childNodes, children 적용에 대한 자세한 설명

자바스크립트에서 parentNode, childNodes, children 적용에 대한 자세한 설명

巴扎黑
巴扎黑원래의
2017-06-21 10:50:511994검색

이 글은 javascript에 있는 parentNode, childNodes, children의 응용 프로그램을 소개합니다. 필요한 친구들이 와서 참고하면 좋습니다.

"parentNode"

를 자주 사용하세요. 특정 요소를 얻으려면 parentNodes를 컨테이너로 이해하고 컨테이너에는 하위 노드가 있습니다.

26c773278536a89341a7f7963f9a4e69

07567a838ba66bec9f1820bfbf21ff6bMy text0d36329ec37a2cc24d42c7229b69747a
< ;/p>

위 코드에서 "Dad"가 p 컨테이너로 사용되고 컨테이너에 굵은 텍스트 부분인 "child"가 있는 것을 볼 수 있습니다. getElementById() 메서드를 사용하여 굵은 텍스트의 Volume 요소를 가져오고 해당 요소의 "아버지"가 누구인지 알고 싶으면 반환된 정보는 p가 됩니다. 다음 스크립트를 시연하면 무슨 일이 일어나고 있는지 알 수 있습니다...

인용문:


코드는 다음과 같습니다.

<p id="parent">
<b id="child">My text</b>
</p>
<script type="text/javascript">
<!--
alert(document.getElementById("child").parentNode.nodeName);
//-->
</script>

parentNode를 사용한다고 해서 반드시 "아버지"만 찾는 것은 아니며, "아들"도 다음 예에서와 같이 "아버지"가 될 수 있습니다...


인용문:


코드는 다음과 같습니다.

<p id="parent">
         <p id="childparent">
           <b id="child">My text</b>
         </p>
</p>

위 코드에는 "아빠" 2개와 "자녀" 2개가 있습니다. 첫 번째 p(id "parent")는 두 번째 p( childparent).       "childparent"에는 굵은 요소(id "child")가 있는데, "childparent" p의 "child"입니다. 그러면 "grandpa"(id "parent")에 액세스하는 방법은 매우 간단합니다.. ..


인용문:

코드는 다음과 같습니다.

<p id="parent">
          <p id="childparent">
             <b id="child">My text</b>
          </p>
</p>
<script type="text/javascript">
<!--
alert(document.getElementById("child").parentNode.parentNode.nodeName);
//-->
</script>

두 개의 parentNode가 함께 사용된다는 점에 유의하세요. 알겠습니다. 첫 번째 parentNode는 p(id "childparent")입니다. 가장 바깥쪽 부모 요소를 얻으므로 p(id "parent")에 또 다른 parentNode를 추가합니다.

parentNode를 사용하면 요소의 nodeName을 찾을 수 있을 뿐만 아니라 훨씬 더 많은 것을 찾을 수 있습니다.

IE에는 "parentElement"라는 자체 이름이 있습니다. 브라우저 스크립트에는 parentNode를 사용하는 것이 좋습니다.



몇 마디 더:

자바스크립트를 넣으면 html 파일의 선두에 있으면 오류가 발생합니다. Firefox는 다음 오류를 보고합니다.
document.getElementById("child")에는 속성이 없습니다.

그리고 IE는 다음과 같습니다.

Object Require

d

이유 javascript를 지원하는 모든 브라우저는 DOM을 완전히 구문 분석하기 전에 javascript를 실행합니다. 실제 웹 프로그래밍에서는 대부분의 javascript가 head 태그에 배치될 수 있습니다. 정상적으로 실행하려면 함수에 경고를 래핑하고 함수를 호출해야 합니다. 예를 들어 Body 태그에

parentNode, parentElement, childNodes 및 children 태그를 추가하세요.

parentElement 개체 계층 구조에서 상위 개체를 가져옵니다.
parentNode는 문서 계층 구조에서 상위 개체를 가져옵니다. childNodes 지정된 개체의 직계 자손인 HTML 요소 및 TextNode 개체의 컬렉션을 가져옵니다. children 개체의 직계 자손인 DHTML 개체 컬렉션을 가져옵니다.


-------------------------------------------------- --- ---------

parentNode는 parentElement와 동일한 기능을 갖고, childNodes는 children과 동일한 기능을 갖습니다. 그러나 parentNode와 childNode는 W3C 표준을 준수하므로 비교적 보편적이라고 할 수 있습니다. 나머지 두 가지는 표준이 아닌 IE에서만 지원되며 Firefox에서는 지원되지 않습니다

------------------ --- ----------

즉, parentElement와 자식은 IE 고유의 것이며 다른 곳에서는 인식되지 않습니다.

그럼 표준 버전은 parentNode, childNodes입니다.

이 두 기능은 parentElement 및 children과 동일하며 표준적이고 보편적입니다.


-------------------------------------- --------

다음은 간단한 설명입니다. 개별 단어의 차이에 주의하세요.

parentNode 속성: 문서 계층 구조에서 상위 개체를 검색합니다.
parentElement 속성: 개체 계층 구조의 상위 개체입니다.

childNodes:

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

다음 개체의 직계 후손인 DHTML 개체 컬렉션을 검색합니다.
parentElement parentNode.parentNode.childNodes 사용 예


첫 번째 방법


코드는 다음과 같습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" C>
<META NAME="Author" C>
<META NAME="Keywords" C>
<META NAME="Description" C>
<SCRIPT LANGUAGE="JavaScript">
<!--
var row = -1;
function showEdit(obj){
var cell2 = obj.parentNode.parentNode.childNodes[1];
var rowIndex = obj.parentNode.parentNode.rowIndex;
cell2.innerHTML = "<input type=&#39;text&#39; value=&#39;"+ cell2.innerHTML +"&#39;>";
if(row != -1){
var oldCell2 = document.getElementById("tb").rows[row].cells[1];
oldCell2.innerHTML = oldCell2.childNodes[0].value;
}
row = rowIndex;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE 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>

두 번째 방법



코드는 다음과 같습니다.

<table border=1 width=100%>
<tr>
    <td><input name=m type=checkbox ></td>
    <td>1111</td>
    <td><input name=aaa value="222" disabled></td>
    <td><input name=bbb value="333" disabled></td>
</tr>
<tr>
    <td><input name=m type=checkbox ></td>
    <td>1111</td>
    <td><input name=aaa value="222" disabled></td>
    <td><input name=bbb value="333" disabled></td>
</tr>
<tr>
    <td><input name=m type=checkbox ></td>
    <td>1111</td>
    <td><input name=aaa value="222" disabled></td>
    <td><input name=bbb value="333" disabled></td>
</tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
function mm(e)
{
var 
current
Tr=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>

HTML 방식으로 상위 컨트롤 가져오기


코드는 다음과 같습니다.

function setvalue(v,o)
    { 
        //var obj=document.getElementById(&#39;&#39;batchRate&#39;&#39;);
        //windows.
        alert(o.parentNode.innerHTML);
        alert(o.parentNode); //parentNode此处也是获取父控件
        alert(o.parentElement); //parentElement此处也是获取父控件
        alert(o.parentElement.parentNode); //parentElement.parentNode此处也是获取父控件
        //o.parentNode.bgColor="red";

         o.parentElement.parentNode.bgColor="red";
    }

인스턴스:


코드는 다음과 같습니다.

<html>
<head>
<meta http-equiv="Content-Language" c>
<meta http-equiv="Content-Type" c>
<title>新建网页 1</title>
</head>
<script>
    function setvalue(v,o)
    { 
        //var obj=document.getElementById(&#39;&#39;batchRate&#39;&#39;);
        //windows.
        alert(o.parentNode.innerHTML);
        alert(o.parentNode);
        alert(o.parentElement);
        //o.parentNode.bgColor="red";

       o.parentElement.parentNode.bgColor="red";
    }
</script>
<body>
<table border="1" width="100%" id="table1">
<tr>
<td width="250"><a >dfsdfdsfdsa</a></td>
<td>　</td>
<td>　</td>
</tr>

위 내용은 자바스크립트에서 parentNode, childNodes, children 적용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：jQuery 하위 선택기 상위 > 하위 사용법에 대한 자세한 설명다음 기사：jQuery 하위 선택기 상위 > 하위 사용법에 대한 자세한 설명

관련 기사

더보기