자바스크립트 태그 아래에 여러 텍스트를 검색하는 방법

JavaScript는 일반적으로 사용되는 스크립팅 언어로 웹 개발자가 HTML 텍스트를 쉽게 조작하는 데 도움이 될 수 있습니다. 레이블 아래에 여러 텍스트 콘텐츠를 가져와야 하는 경우 몇 가지 간단한 JavaScript 메서드와 명령문을 사용하여 이를 달성할 수 있습니다.

innerHTML 속성 사용

JavaScript에서는 innerHTML 속성을 사용하여 HTML 태그 아래의 텍스트 콘텐츠를 가져올 수 있습니다. innerHTML 속성은 중첩된 태그의 텍스트 콘텐츠를 포함하여 태그에 포함된 모든 텍스트를 가져올 수 있습니다.

예를 들어 다음과 같은 HTML 구조가 있다고 가정해 보겠습니다.

<div id="container">
  <p>这是第一段文本</p>
  <p>这是第二段文本</p>
  <p>这是第三段文本</p>
</div>

다음 코드를 사용하여 모든 p 태그 아래의 텍스트 콘텐츠를 가져올 수 있습니다.

var container = document.getElementById("container");
var innerText = container.innerHTML;

console.log(innerText);

출력 결과는 다음과 같습니다.

<p>这是第一段文本</p>
<p>这是第二段文本</p>
<p>这是第三段文本</p>

하지만 주의해야 할 점은 innerHTML 속성은 텍스트 콘텐츠를 가져올 뿐만 아니라 태그의 속성과 이벤트를 포함하여 태그 자체의 요소도 가져옵니다. 따라서 텍스트 콘텐츠를 가져오기 위해 innerHTML 속성을 사용할 경우 태그에서 HTML 요소를 제거해야 합니다. 원하는 텍스트를 얻으려면 먼저 태그를 지정하세요.

innerText 속성을 사용하세요

innerHTML 속성 외에도 innerText 속성을 사용하여 HTML 태그 아래의 일반 텍스트 콘텐츠를 가져올 수도 있습니다. 그러면 HTML 태그를 무시하고 텍스트 콘텐츠 부분만 반환됩니다. 이 속성은 하위 요소의 텍스트 콘텐츠가 아닌 현재 요소 내부의 텍스트 콘텐츠만 가져올 수 있습니다.

따라서 HTML 태그 아래에 여러 텍스트 콘텐츠를 가져오려면 for 루프를 사용하여 하위 요소의 innerText 속성을 하나씩 가져와야 합니다. 예:

var container = document.getElementById("container");
var paragraphs = container.getElementsByTagName("p");
var innerText = "";

for (var i = 0; i < paragraphs.length; i++) {
  innerText += paragraphs[i].innerText + "
";
}

console.log(innerText);

출력 결과는 다음과 같습니다.

这是第一段文本
这是第二段文本
这是第三段文本

textContent 속성 사용

위의 두 가지 방법 외에도 textContent 속성을 사용하여 HTML 태그 아래의 텍스트 콘텐츠를 얻을 수도 있습니다. innerText와 달리 textContent 속성은 레이블 내의 모든 공백과 줄 바꿈을 포함하여 레이블 아래의 모든 텍스트 노드를 가져옵니다.

마찬가지로 HTML 태그 아래에 여러 텍스트 콘텐츠를 가져오려면 for 루프를 사용하여 하위 요소의 textContent 속성을 하나씩 가져와야 합니다. 예:

var container = document.getElementById("container");
var paragraphs = container.getElementsByTagName("p");
var textContent = "";

for (var i = 0; i < paragraphs.length; i++) {
  textContent += paragraphs[i].textContent + "
";
}

console.log(textContent);

출력 결과는 다음과 같습니다.

这是第一段文本
这是第二段文本
这是第三段文本

요약하자면 JavaScript는 HTML 태그 아래의 텍스트 콘텐츠를 가져오는 다양한 방법을 제공합니다. 필요한 텍스트 콘텐츠를 얻으려면 필요에 따라 적절한 방법을 선택하십시오.

위 내용은 자바스크립트 태그 아래에 여러 텍스트를 검색하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!