JavaScript는 웹 페이지 요소의 텍스트와 속성을 읽습니다.

JavaScript는 다음을 포함하여 웹 페이지 요소의 텍스트 및 속성을 읽는 방법을 제공합니다. 텍스트 읽기: innerText, textContent, value 속성 가져오기: getAttribute, 데이터 세트, style

JavaScript 웹 페이지 요소의 텍스트 및 속성 읽기

소개

JavaScript는 웹 페이지 요소의 텍스트와 속성을 읽고 조작하는 다양한 방법을 제공합니다. 이 기사에서는 다양한 방법을 살펴보고 그 사용법을 설명하는 실제 사례를 제공합니다.

텍스트 콘텐츠 읽기

innerText: 하위 요소를 포함하여 요소에 표시되는 텍스트를 가져옵니다.

let text = document.getElementById("element").innerText;

textContent: innerText와 유사하지만 숨겨진 텍스트도 가져옵니다.

let text = document.getElementById("element").textContent;

value: 입력 상자 및 텍스트 영역과 같은 양식 요소의 현재 값을 가져옵니다.

let value = document.querySelector("input[type=text]").value;

GetAttributes

getAttribute(name): 지정된 속성의 값을 가져옵니다.

let href = document.getElementById("link").getAttribute("href");

dataset: data- 접두사가 붙은 데이터 속성에 액세스합니다.

let username = document.querySelector("user-profile").dataset.username;

style: CSS 스타일 속성에 액세스합니다. practical Case는 페이지 제목 gget the the form 입력 값 값

r

let color = document.getElementById("element").style.color;

const title = document.querySelector("head title").innerText;
console.log(title); // 输出：我的网站

r

document.querySelector("input[name=name]").value = "John Doe";

의 데이터 속성을 읽습니다. 결론

Powered by JavaScript 웹 페이지 요소의 텍스트와 속성을 읽고 조작하기 위한 강력한 도구입니다. DOM 콘텐츠를 동적으로 조작하고 조작하려면 이러한 방법을 이해하는 것이 중요합니다. 위에 제공된 실제 예제를 사용하면 이러한 기술을 자신의 프로젝트에 쉽게 적용할 수 있습니다.

위 내용은 JavaScript는 웹 페이지 요소의 텍스트와 속성을 읽습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!