Dom_DOM에서 하위 요소와 형제 요소를 작동하는 코드

먼저 하위요소가 무엇인지 정확하게 이해해야 합니다. 예를 들어 웹페이지에 SPAN 태그를 작성했습니다. 그리고 "Welcome to the Script House"라는 텍스트 콘텐츠를 범위에 작성합니다. 그러면 이 텍스트 콘텐츠는 범위의 하위 요소입니다. div에 범위가 포함된 경우에도 마찬가지입니다. 그런 다음 범위는 div의 하위 요소입니다. 다음 코드를 보세요:

<title>하위요소에 대한 올바른 이해</title> <div><span>스크립트 하우스에 오신 것을 환영합니다</span></div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

As 위 코드에서 "Welcome to the Script House"와 스팬이 모두 div에 포함되어 있음을 볼 수 있습니다. 하지만 div에서 "Welcome to the Script House"라는 텍스트를 직접 인용할 수는 없습니다. 제가 말씀드리고 싶은 것은 하위 요소 획득 시 교차 레벨 획득이 허용되지 않는다는 것입니다. 하위 요소는 직계 상위 요소에서만 참조할 수 있습니다. 마찬가지로 이 div도 body 태그의 하위 요소로 간주됩니다. 하지만 본문에서 직접 스팬 태그를 가져올 수는 없습니다. 본문에서 div를 가져온 다음 범위를 가져와야 합니다. 아래 예를 참조하세요.

<title>하위 요소를 올바르게 가져오기</title> <div><span>스크립트 하우스에 오신 것을 환영합니다</span></div> <input type="button" value="获取div" onclick="get_div()"> <input type="button" value="获取span" onclick="get_span()"> <input type="button" value="获取文字" onclick="get_text()">
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

Dom에서 얻은 내용을 나열하겠습니다. 하위 요소에 대한 여러 가지 방법:

현재 요소에서 첫 번째 하위 요소를 가져오는 방법은 다음과 같습니다. firstChild
현재 요소에서 마지막 하위 요소를 가져오는 방법 is: lastChild
현재 요소의 하위 요소 가져오기 모든 하위 요소의 메서드는 다음과 같습니다. childNodes
팁: 하위 요소를 처리하는 경우. 공간 문제에 직면하게 됩니다. 위의 코드는 body와 div 사이에 있기 때문입니다. div와 범위 사이에는 줄 바꿈이 없으므로 이 문제를 피할 수 있습니다. 하지만 항상 줄 바꿈 없이 코드를 입력하고 작성할 수는 없습니다. FF와 같은 브라우저에서는 줄 사이에 공백 요소가 형성됩니다. 이러한 공간을 유효한 요소로 처리합니다. 공간 필터링을 위한 돔 기술
하위 요소를 이해하세요. 형제 요소가 무엇인지 다시 이야기해 보겠습니다. 문자 그대로 이해할 수 있어야 합니다. 소위 형제 요소는 실제로 동일한 상위 요소를 가진 요소를 형제 요소라고 함을 의미합니다. 아래 코드를 보세요:

<title></title>형제요소 이해 <div> <div></div> <span></span><a></a> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

위 코드는 다음을 보여줍니다. div 태그에 div,span 및 a와 같은 요소가 포함된 경우 포함된 div,span 및 a는 모두 동일한 상위 요소에 포함되어 있기 때문에 서로의 형제 요소라고 부를 수 있습니다!
형제 간에 요소를 가져오는 방법을 보여드리겠습니다.

<title></title>형제요소 이해 <div> <div></div> <span id="s"></span><a></a> </div>
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]
위 코드에서는 범위 요소에 대한 id 속성을 설정했습니다. 아직 모르실 수도 있지만, 요소를 빠르게 가져오려면 해당 요소에 id 속성을 설정해야 합니다. 그런 다음 getElementById 메소드를 사용하여 id 속성 값을 기반으로 이를 가져옵니다.
span 요소를 얻은 후 다음 Dom 메서드를 사용하여 범위의 이전 형제 요소 div와 다음 형제 요소 a를 가져왔습니다.

Dom에서 PreviousSibling 메서드를 사용하여 현재 요소를 가져왔습니다. 형제 요소
Dom에서 nextSibling 메서드를 사용하여 현재 요소의 다음 형제 요소를 가져옵니다.
FF 브라우징의 경우 형제 요소를 가져올 때 공간 문제도 발생합니다. 참고하세요: 이 글을 통한 공간 필터링의 돔 스킬. 자식 요소와 형제 요소를 정확하게 이해하고 운용할 수 있어야 합니다. 재인쇄해야 하는 경우 다음 정보를 꼭 보관해 두십시오.
이 기사의 저작권: Web Circle 첫 번째 주소: http://www.web666.net/dom/dom_6.html