이 가이드에서는 JavaScript에서 HTML DOM 요소 “textContent” 속성에 액세스하고 조작하는 방법을 설명합니다.
먼저 HTML DOM “textContent” 속성의 기본 사항을 살펴보세요.
JavaScript의 HTML DOM “textContent” 속성은 무엇입니까?
“ 텍스트콘텐츠 ”는 모든 하위 항목을 포함하여 지정된 요소 또는 노드의 텍스트를 설정, 검색 및 수정하는 기본 제공 속성입니다. 하위 요소는 , , 등과 같은 하위 요소이며 서식 지정을 위해 사용됩니다. 'textContent' 속성을 사용하여 텍스트를 설정하는 동안 대상 요소의 하위 요소가 새 텍스트로 완전히 대체됩니다.
구문(텍스트 내용 설정)
“를 사용하여 요소/노드의 텍스트를 설정하는 기본 구문 텍스트콘텐츠 ” 속성은 아래와 같이 작성됩니다.
요소. 텍스트콘텐츠 = 텍스트 | 마디. 텍스트콘텐츠 = 텍스트
위 구문은 원하는 ' 텍스트 ”를 사용자가 요소나 노드에 대해 설정하려는 값으로 사용합니다.
구문(텍스트 내용 가져오기)
'를 통해 요소나 노드의 텍스트를 반환하는 일반화된 구문입니다. 텍스트콘텐츠 ” 속성은 여기에 명시되어 있습니다.
요소. 텍스트콘텐츠 | 마디. 텍스트콘텐츠반환 값: “ 텍스트콘텐츠 ” 속성은 “를 반환합니다. 텍스트 ” 공백은 있지만 내부 HTML 태그가 없는 요소나 노드의 경우입니다.
이제 위에서 정의한 구문을 실제로 사용하여 'textContent' 속성에 액세스하고 조작합니다.
JavaScript에서 HTML DOM 요소 'textContent' 속성에 액세스하고 조작하는 방법은 무엇입니까?
'innerHTML' 및 'innerText' 속성과 유사하게 ' 텍스트콘텐츠 ” 속성을 사용하면 사용자가 원하는 요소의 텍스트를 쉽게 설정, 액세스 및 수정할 수 있습니다. 이 섹션에서는 아래에 설명된 예를 사용하여 요소에 대해 이러한 모든 작업을 수행합니다.
예제 1: 'textContent' 속성을 적용하여 요소/노드 텍스트에 액세스
이 예에서는 'textContent' 속성을 적용하여 모든 하위 요소를 포함하는 특정 요소 또는 노드의 텍스트를 반환합니다.
HTML 코드
< div ID = '내 사업부' 마우스 오버 시 = 'getText()' 스타일 = '테두리: 3px 단색 검정색; 너비: 400px; 패딩: 5px 5px; 여백: 자동;' >< h1 > 첫 번째 제목 < / h1 >
< h2 > 두 번째 제목 < / h2 >
< h3 > 세 번째 제목 < / h3 >
< h4 > 네 번째 제목 < / h4 >
< h5 > 다섯 번째 제목 < / h5 >
< h6 > 여섯 번째 제목 < / h6 >
< / div >
위의 HTML 코드 줄에서:
- “ ” ID가 “myDiv”인 태그는 테두리, 너비, 패딩(상단 및 하단, 왼쪽 및 오른쪽) 및 여백 속성으로 스타일이 지정된 div 요소를 생성합니다. “라는 문구도 첨부합니다. 마우스 오버 시 '를 호출하는 ' 이벤트 getText() ” 사용자가 마우스를 위에 올리면 함수가 작동합니다.
- div 내에서 지정된 모든 제목(h1,h2,h3,h4,h5 및 h6) 태그는 지정된 수준에 따라 제목 요소를 삽입합니다.
자바스크립트 코드
< 스크립트 >
함수 getText ( ) {
요소였다 = 문서. getElementById ( '내 사업부' ) ;
알리다 ( 요소. 텍스트콘텐츠 ) ;
}
스크립트 >위에 작성된 JavaScript 코드 블록에서:
- '라는 이름의 함수를 정의합니다. getText() '.
- 이 함수 내에서 'elem' 변수는 ' getElementById() ” 메소드를 사용하여 해당 ID를 통해 div 요소에 액세스합니다.
- “ 알리다() ” 메소드는 “를 사용하는 경고 상자를 생성합니다. 텍스트콘텐츠 ” 속성을 사용하여 모든 종속 항목과 함께 상위 div의 텍스트를 반환합니다.
산출
아래 출력은 div 요소의 텍스트 콘텐츠를 표시하는 경고 상자를 표시합니다.
예 2: 'textContent' 속성을 적용하여 하위 요소를 포함한 텍스트 콘텐츠 요소 교체
이 예에서는 텍스트를 수정하는 동안 'textContent' 속성이 요소의 모든 하위 요소를 바꾸는 방법을 보여줍니다.
HTML 코드
< 센터 >
< h1 아이디 = '내 머리' 클릭하면 = '수정텍스트()' >< 비 > 이것 비 > ~이다 < 기간 > 표제 < 기간 > < 나 > 요소 나 > h1 >
센터 >위에서 언급한 코드 줄에서:
- “ ” 태그는 “가 첨부된 레벨 1의 제목 요소를 추가합니다. 클릭하면 '를 호출하는 ' 이벤트 수정텍스트() ” 사용자가 클릭하면 함수가 작동합니다.
- 표제 요소에는 “ <비> ', ' <스팬> ', 그리고 ' <나는> ” 태그를 하위 항목으로 지정합니다. ' ' 태그는 포함된 문자열을 굵게 표시하는 데 사용되며, 스타일링 속성이 없는 '' 태그는 주어진 문자열에 스타일을 적용하지 않는 데 사용되며 ' ' 태그는 문자열을 표시하는 데 사용됩니다. 문자열을 이탤릭체로 지정했습니다.
자바스크립트 코드
< 스크립트 >
여기서 h1 = 문서. getElementById ( '내 머리' ) ;
콘솔. 통나무 ( h1 ) ;
함수 수정텍스트 ( ) {
h1. 텍스트콘텐츠 = '리눅스힌트에 오신 것을 환영합니다!' ;
콘솔. 통나무 ( h1 )
}
스크립트 >위의 JavaScript 코드에서:
- 'h1' 변수는 ' document.getElementById() ” 할당된 ID를 통해 제목 요소에 액세스하는 메서드입니다.
- “ 콘솔.로그() ” 메서드는 콘텐츠를 변경하기 전에 액세스한 제목 요소를 콘솔에 표시합니다.
- '라는 이름의 함수 수정텍스트() ”는 “를 사용합니다. 텍스트콘텐츠 ” 속성을 사용하여 가져온 제목 요소의 텍스트를 수정합니다.
- 마지막 “console.log()” 메서드는 수정 후 다시 “h1” 값을 표시합니다.
산출
콘솔은 해당 제목 요소를 클릭하면 해당 제목 요소의 모든 하위 항목이 새로 지정된 텍스트로 대체되었음을 명확하게 보여줍니다.
예 3: 'textContent' 속성을 적용하여 요소 하위 요소의 텍스트 수정
이 예에서는 'textContent' 속성을 사용하여 특정 요소의 하위 요소 텍스트를 수정합니다.
HTML 코드
< div ID = '내 사업부' 스타일 = '테두리: 3px 단색 검정색; 너비: 400px; 패딩: 5px 5px; 여백: 자동;' >
< 센터 >
< 단추 ID = 'BTN' 마우스 오버 시 = '체인지텍스트()' > 이전 버튼 < / 단추 >
< / 센터 >
< / div >이 시나리오에서는:
- 'div' 요소에는 ''의 도움으로 생성된 '버튼' 요소가 있습니다.
” 태그. - 버튼 요소에는 할당된 ID와 ' 마우스 오버 시 '를 호출하는 ' 이벤트 변경텍스트() ” 마우스를 위에 올리면 작동합니다.
자바스크립트 코드
< 스크립트 >
parentElement였습니다. = 문서. getElementById ( '내 사업부' ) ;
변수 대상 = 문서. getElementById ( 'BTN' ) ;
find_me였어 = parentElement. 포함 ( 표적 ) ;
만약에 ( parentElement. 포함 ( 표적 ) == 진실 ) {
콘솔. 통나무 ( 나를 찾아 ) ;
기능 변경텍스트 ( ) {
표적. 텍스트콘텐츠 = '새 버튼' ;
}
} 또 다른 {
콘솔. 통나무 ( '존재하지 않는다' )
}
스크립트 >위의 코드 조각에서:
- “parentElement” 변수는 “ getElementById() ” 메서드를 사용하여 상위 div 요소에 액세스합니다. 'target' 변수는 'getElementById()' 메서드를 활용하여 해당 ID를 사용하여 추가된 버튼 요소를 가져옵니다.
- 'find_me' 변수는 ' 포함() ” 타겟 버튼 요소가 div의 하위 요소인지 확인하는 메서드입니다. 이 메서드는 “ 진실 ”이면 “예”이고 그렇지 않으면 “거짓”입니다.
- “ 다른 경우라면 ” 문은 코드 블록을 정의합니다.
- 대상 요소가 상위 요소의 하위 요소인 경우 ' 변경텍스트() ” 기능은 “를 통해 텍스트를 변경합니다. 텍스트콘텐츠 ' 재산. 그렇지 않으면 'else' 코드 블록이 실행되어 '를 사용하여 지정된 메시지를 표시합니다. 콘솔.로그() ' 방법.
산출
콘솔에 ' 진실 ” 버튼 요소가 지정된 div의 하위 요소인지 확인하는 부울 값이며 마우스를 해당 div 위로 가져가면 해당 텍스트가 변경됩니다.
textContent, innerText 및 innerHTML 속성의 차이점은 무엇입니까?
일반적으로 “ 텍스트콘텐츠 ', ' 내부텍스트 ', 그리고 ' 내부 HTML ” 속성은 요소나 노드의 텍스트를 설정하고 가져오는 방식으로 처리합니다. 그러나 이러한 속성은 몇 가지 요인에 따라 서로 다릅니다. 이 섹션에서는 이들 모두의 주요 차이점을 강조합니다.
자귀 '텍스트콘텐츠' '내부 텍스트' '내부HTML' 반환 유형 모든 하위 요소(형식 지정 태그), CSS 숨겨진 텍스트 및 공백을 포함하는 요소의 텍스트를 반환합니다. 요소의 HTML 태그를 반환하지 않습니다. 모든 하위 항목(형식 지정 태그)과 함께 대상 HTML 요소의 텍스트 콘텐츠를 반환합니다.