자바스크립트에서 parentNode, childNodes, children 적용에 대한 자세한 설명-JS 튜토리얼-php.cn

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

巴扎黑

풀어 주다： 2017-06-21 10:50:51

원래의

2020명이 탐색했습니다.

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

"parentNode"

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

My text
< ;/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

이유 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!