자바스크립트로 html 태그를 조작하는 방법

JavaScript는 동적 효과와 사용자 상호 작용을 달성하기 위해 웹 페이지에서 Html 태그를 작동하는 데 사용할 수 있는 클라이언트측 스크립팅 언어입니다.

먼저 강조할 점은 자바스크립트는 생성된 HTML 태그를 직접 조작하는 것이 아니라 지정된 태그에 대한 참조를 얻은 후 자바스크립트의 속성과 메소드를 사용하여 태그를 수정하고 제어한다는 점입니다.

먼저 지정된 태그의 참조를 가져와야 합니다. 일반적으로 사용되는 방법은 다음과 같습니다.

1. id 속성 사용
   HTML 태그에서 id 속성을 정의하고 JavaScript의 document.getElementById() 메서드를 사용하여 태그에 대한 참조를 얻습니다. 예:

HTML code

<div>这是一个Div标签</div>

JavaScript code

var myDiv = document.getElementById("myDiv");

2. 클래스 속성
   을 사용하여 HTML 태그에 클래스 속성을 정의하고 JavaScript의 document.getElementsByClassName() 메서드를 사용하여 모든 태그에 대한 참조를 가져옵니다. 그 수업. 예:

HTML code

<div>这是一个class为myClass的Div标签</div>
<div>这是另一个class为myClass的Div标签</div>

JavaScript code

var myDivs = document.getElementsByClassName("myClass");

3. 태그 이름 사용
   JavaScript의 document.getElementsByTagName() 메서드를 사용하여 지정된 태그 이름을 가진 모든 태그에 대한 참조를 가져옵니다. 예:

HTML 코드

<div>这是一个Div标签</div>
这是一个P标签

JavaScript 코드

var divs = document.getElementsByTagName("div");//获取所有的div标签
var p = document.getElementsByTagName("p");//获取所有的p标签

4. querySelector() 메서드 사용
   JavaScript의 document.querySelector() 메서드를 사용하여 지정된 선택기와 일치하는 첫 번째 태그에 대한 참조를 가져옵니다. 예:

HTML code

这是一个class为myClass的Div标签
<div>这是一个Div标签</div>

JavaScript code

var myDiv = document.querySelector("#myDiv");//获取id为myDiv的标签
var myClass = document.querySelector(".myClass");//获取class为myClass的第一个标签

지정된 태그의 참조를 얻은 후 JavaScript의 속성과 메서드를 사용하여 Html 태그를 작동할 수 있습니다. 일반적으로 사용되는 작업은 다음과 같습니다.

1. 태그의 내용과 속성을 수정합니다
   태그의 innerHTML 속성과 setAttribute() 메서드를 사용하여 태그의 내용과 속성을 수정할 수 있습니다. 예:

JavaScript 코드

myDiv.innerHTML = "我是新内容";//修改myDiv的内容为"我是新内容"
myDiv.setAttribute("class", "newClass");//将myDiv的class属性改成"newClass"

2. 레이블 표시 또는 숨기기
   레이블의 style.display 속성을 사용하여 레이블 표시 또는 숨기기를 제어할 수 있습니다. 예:

JavaScript 코드

myDiv.style.display = "none";//将myDiv标签隐藏

3. 태그 추가 또는 삭제
   createElement() 메서드를 사용하여 새 태그를 생성하고,appendChild() 메서드를 사용하여 지정된 태그에 새 태그를 추가하고, RemoveChild() 메서드는 부모 요소에서 제거된 지정된 태그를 제거합니다. 예:

JavaScript 코드

var newDiv = document.createElement("div");//创建新的div标签
newDiv.innerHTML = "我是新添加的div";//设置新标签的内容
myDiv.appendChild(newDiv);//将新标签添加到myDiv中
myDiv.parentNode.removeChild(myDiv);//将myDiv从它的父标签中删除

요약하자면, 지정된 태그의 참조를 획득하면 JavaScript에서 Html 태그를 작동하여 웹 페이지의 동적 효과와 대화형 기능을 얻을 수 있습니다. 물론 이것은 JavaScript가 Html 태그를 작동하는 방식에 있어서 빙산의 일각에 불과합니다. 우리가 탐구하고 연습해야 할 강력한 기술이 여전히 많이 있습니다.

위 내용은 자바스크립트로 html 태그를 조작하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!