이 게시물은 JavaScript를 사용하여 HTML DOM 요소 'previousElementSibling' 속성을 설명합니다.
HTML DOM 요소 'previousElementSibling' 속성은 무엇입니까?
DOM(문서 개체 모델) 요소 ' 이전요소형제자매 ”는 동일한 트리에서 요소의 이전 형제를 검색하는 데 도움이 되는 읽기 전용 속성입니다. 이 속성은 이전 형제의 콘텐츠를 반환합니다.
통사론
요소. 이전요소형제자매
이 구문은 ' 끈 ” 이전 형제의 HTML 콘텐츠를 포함하고 “ 없는 ” 존재하지 않는 경우.
위에서 정의한 구문을 실제로 사용하여 'previousElementSibling' 속성의 작동을 보여줍시다.
예: 'previousElementSibling' 속성을 적용하여 이전 형제 콘텐츠 반환
이 예제는 JavaScript 'previousElementSibling' 속성을 적용하여 이전 형제의 HTML 콘텐츠를 가져옵니다.
HTML 코드
먼저 다음 HTML 코드에 대한 개요입니다.
< 울 >< 저것 ID = '첫 번째' > HTML < / 저것 >
< 저것 ID = '두번째' > CSS < / 저것 >
< 저것 ID = '제삼' > 자바스크립트 < / 저것 >
< / 울 >
< 피 ID = '을 위한' >< / 피 >
위의 코드 라인에서:
- “
- 정렬되지 않은 목록 내에서 여러 항목은 ' <그> ” 태그를 할당된 ID로 지정합니다.
- 마지막으로 “ ” 태그는 고유 ID “para”가 있는 빈 단락을 포함합니다.
자바스크립트 코드
이제 JavaScript 코드를 계속 사용하십시오.
< 스크립트 >항목을 보자 = 문서. getElementById ( '제삼' ) . 이전요소형제자매 . innerHTML ;
문서. getElementById ( '을 위한' ) . innerHTML = ' 세 번째 항목의 이전 형제는 : ' + 안건 ;
스크립트 >
위의 코드 조각에 따르면:
- 'item' 변수는 먼저 ' getElementById() ” 메서드를 사용하여 대상 목록 항목에 id “third”를 사용하여 액세스한 다음 “ 이전요소형제자매 ” 속성을 사용하여 이전 형제를 가져옵니다.
- 그 후, “ getElementById() ” 메서드는 id “para”를 사용하여 추가된 빈 단락에 액세스하여 “item” 변수의 값, 즉 이전 형제를 추가합니다.
산출
보시다시피 결과는 대상 항목의 이전 형제 항목, 즉 (JavaScript)를 보여줍니다.
결론
JavaScript는 미리 정의된 DOM 요소를 제공합니다. 이전요소형제자매 ” 요소의 이전 형제를 검색하는 속성입니다. 대상 요소가 있는 동일한 트리 수준에서 요소의 이전 형제를 반환합니다. 이 게시물은 JavaScript의 HTML DOM 요소 'previousElementSibling' 속성에 대해 자세히 설명했습니다.