VUE3.0을 빠르게 시작하는 방법: 학습 시작
관련 권장 사항: JavaScript 자습서
1. 요소를 조작하기.
문서 개체는 요소를 찾는 데 사용할 수 있는 몇 가지 메서드를 제공합니다. ID, 이름, 클래스를 기반으로 속성 및 태그 이름을 통해 작업 요소를 가져옵니다.
요약:
document.getElementById() 메서드가 지정된 ID를 가진 요소를 반환하는 것을 제외하고 다른 메서드는 요구 사항을 충족하는 컬렉션을 반환합니다. 객체 중 하나를 얻으려면 기본적으로 0부터 시작하는 아래 첨자를 사용하여 얻을 수 있습니다.
문서 개체는 문서의 요소를 얻는 데 사용할 수 있는 몇 가지 속성을 제공합니다. 예를 들어 모든 양식 태그, 이미지 태그 등을 가져옵니다.
문서 개체의 메서드와 문서 개체의 속성을 통해 얻은 작업 요소는 동일한 개체를 나타냅니다
.
예를 들어 document.getElementsByTagName('body')[0]은 document.body와 일치합니다.
HTML5의 새로운 문서 객체 메소드
작업에 필요한 요소를 더 쉽게 얻기 위해 HTML5는 문서 개체에 querySelector() 및 querySelectorAll()이라는 두 가지 새로운 메서드를 추가합니다.
이 두 메소드는 동일한 방식으로 사용되므로, 다음에서는 document.querySelector() 메소드를 예로 사용합니다.
DOM 작업에서 요소 개체는 요소 내에서 지정된 요소를 얻기 위한 메서드도 제공합니다. 일반적으로 사용되는 두 가지 메서드는 getElementsByClassName() 및 getElementsByTagName()입니다. 문서 객체에 있는 같은 이름의 메서드와 같은 방식으로 사용됩니다.
또한 요소 개체는 지정된 요소의 하위 요소를 가져오기 위해 children 속성도 제공합니다. 예를 들어, 위 예에서 ul의 하위 요소를 가져옵니다.
HTMLCollection 객체
HTMLCollection과 NodeList 객체의 차이점:
팁: getElementsByClassName() 메서드, getElementsByTagName() 메서드에서 반환된 컬렉션의 경우 children 속성인 id 및 name이 자동으로 속성으로 변환될 수 있습니다.
2. 요소 내용
JavaScript에서는 획득한 요소 내용에 대해 작업을 수행하려는 경우 DOM에서 제공하는 속성과 메서드를 사용할 수 있습니다.
예를 들어보세요
코드 구현
<!DOCTYPE HTML>
<html>
<머리>
<meta charset="UTF-8">
<title>요소 콘텐츠 작업</title>
</head>
<본문>
<p id="상자">
첫 번째 단락...
<p>
두 번째 문단...
<a href="http://www.example.com">세 번째</a>
</p>
</p>
<스크립트>
var box = document.getElementById('box');
console.log(box.innerHTML);
console.log(box.innerText);
console.log(box.textContent);
</script>
</body>
</html> innerText 속성을 사용할 때 브라우저 호환성 문제가 발생할 수 있습니다
.
따라서
개발 중에 요소의 텍스트 내용을 최대한 가져오거나 설정하려면 innerHTML을 사용하는 것이 좋습니다. 동시에, 내용 설정 시 innerHTML 속성과 document.write() 메소드 사이에는 특정 차이점이 있습니다. 전자는 지정된 요소에 대해 작동하는 반면 후자는 전체 HTML 문서 페이지를 재구성합니다. 따라서 독자들은 개발 과정에서 실제 필요에 따라 적절한 구현 방법을 선택해야 합니다.
[사례] 박스 크기 변경
코드 구현 아이디어 :
① HTML을 작성하고 p의 크기를 설정합니다.
② 사용자 클릭수에 따라 박스 크기 변경을 완료합니다.
③ 클릭 횟수가 홀수이면 상자가 커지고, 짝수이면 상자가 작아집니다.
코드 구현
<!DOCTYPE HTML>
<html>
<머리>
<meta charset="UTF-8">
<스타일>
.box{너비:50px;높이:50px;배경:#eee;여백:0 자동;}
</style>
</head>
<본문>
<p id="box" class="box"></p>
<스크립트>
var box = document.getElementById('box');
var i = 0; // 사용자가 상자를 클릭한 횟수를 저장합니다. box.onclick = function() { // 상자의 클릭 이벤트를 처리합니다. ++i;
if (i % 2) { // 클릭수는 홀수로 커집니다. this.style.width = '200px';
this.style.height = '200px';
this.innerHTML = '큰';
} else { // 클릭수가 짝수로 작아집니다. this.style.width = '50px';
this.style.height = '50px';
this.innerHTML = '작음';
}
};
</script>
</body>
</html> 3. 요소 속성
DOM에서는 JavaScript가 지정된 HTML 요소의 관련 속성을 획득, 수정 및 순회하는 것을 용이하게 하기 위해 작업 속성과 메소드가 제공됩니다.
속성 속성을 사용하면 HTML 요소의 모든 속성은 물론 모든 속성의 수, 길이를 가져올 수 있습니다.
예를 들어보세요
코드 구현
<!DOCTYPE HTML>
<html>
<머리>
<meta charset="UTF-8">
<title>요소 속성 작업</title>
<스타일>
.gray{배경: #CCC;}
#두꺼움{글꼴-굵기: 굵게;}
</style>
</head>
<본문>
<p>테스트 단어.</p>
<스크립트>
// p 요소 가져오기 var ele = document.getElementsByTagName('p')[0];
// ① 현재 요소의 속성 개수 출력 console.log('작업 전 속성 개수: ' + ele.attributes.length);
// ② ele에 속성을 추가하고 속성 개수를 확인합니다. ele.setAttribute('align', 'center');
ele.setAttribute('title', '테스트 텍스트');
ele.setAttribute('class', '회색');
ele.setAttribute('id', 'thick');
ele.setAttribute('style', 'font-size:24px;border:1px solid green;');
console.log('속성을 추가한 후의 속성 수: ' + ele.attributes.length);
// ③ ele의 스타일 속성 값을 가져옵니다. console.log('스타일 속성 값 가져오기:' + ele.getAttribute('style'));
// ④ ele의 style 속성을 삭제하고 남은 속성을 확인합니다. ele.removeAttribute('style');
console.log('모든 속성 보기:');
for (var i = 0; i < ele.attributes.length; ++i) {
console.log(ele.attributes[i]);
}
</script>
</body>
</html> 4. 요소 스타일
검토: 요소 속성의 작동을 통해 스타일을 수정합니다.
요소 스타일 구문: style.Attribute 이름.
요구사항: CSS 스타일 이름에서 하이픈 "-"을 제거하고 두 번째 영어 첫 글자를 대문자로 표기해야 합니다.
예: 배경색을 설정하려면 스타일 속성 작업에서 background-color를 backgroundColor로 변경해야 합니다.
은
JavaScript의 예약어와 충돌하며 브라우저마다 해결 방법이 다릅니다
. 예를 들어 IE9-11, Chrome, FireFox는 "float"와 "cssFloat"를 사용할 수 있고, Safari 브라우저는 "float"를, IE6~8은 "styleFloat"를 사용할 수 있습니다.
질문: 요소에는 여러 클래스 선택기가 있을 수 있습니다. 개발 중에 선택기 목록을 어떻게 작동합니까?
원래 해결 방법: 요소 개체의 className 특성을 사용하여 결과를 얻은 다음, 실제 상황에 따라 문자열을 처리합니다.
HTML5에서 제공하는 메소드: 새로운 classList(읽기 전용) 요소의 클래스 선택기 목록입니다.
예: p 요소의 클래스 값이 "box header navlist title"인 경우 헤더를 삭제하는 방법은 무엇입니까?
HTML5 솔루션:예를 들어
p 요소 object.classList.toggle("header");
코드 구현
<!DOCTYPE HTML>
<html>
<머리>
<meta charset="UTF-8">
<title>classList 사용법</title>
<스타일>
.bg{배경:#ccc;}
.strong{글꼴 크기:24px;색상:빨간색;}
.smooth{높이:30px;너비:120px;테두리 반경:10px;}
</style>
</head>
<본문>
<ul>
<li>PHP</li>
<li class="bg">자바스크립트</li>
<li>C++</li>
<li>자바</li>
</ul>
<script> // 두 번째 li 요소 가져오기 var ele = document.getElementsByTagName('li')[1]; // li 요소에 강력한 클래스가 없으면 추가 if (!ele.classList.contains('strong) ' )) { ele.classList.add('strong'); } // li 요소에 Smooth 클래스가 없으면 추가하고, 삭제되면 ele.classList.toggle('smooth'); log('다음 스타일 추가 및 전환: ');
<스크립트>
ele.classList.remove('bg');
console.log('삭제 후:');
console.log(ele);
</script>
</body>
</html> 또한 classList 속성은 다른 많은 관련 작업 메서드 및 속성도 제공합니다.
5. [사례] 탭바 전환 효과
코드 구현 아이디어 :
① HTML을 작성하여 탭 표시줄의 구조와 스타일을 디자인합니다. 여기서 클래스는 현재 표시된 탭을 나타내기 위해 current이고 기본값은 첫 번째 탭입니다.
② 모든 태그와 해당 태그에 해당하는 표시 내용을 가져옵니다.
③ 각 라벨에 대한 마우스 오버 이벤트를 순회하여 추가합니다. 이벤트 처리 함수에서는 라벨에 마우스가 슬라이드되면 classList의 add() 메소드를 통해 current를 추가합니다. 제거() 메소드가 현재에서 벗어납니다.
코드 구현
<!DOCTYPE HTML>
<html>
<머리>
<meta charset="UTF-8">
<title>탭바 전환 효과</title>
<스타일>
.tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F96;}
.tab-head{높이:31px;}
.tab-head-p{너비:95px;높이:30px;float:왼쪽;border-bottom:1px solid #ccc;border-right:1px solid #ccc;배경:#206F96;line-height:30px;text- 정렬:중심;커서:포인터;색상:#fff;}
.tab-head .current{배경:#fff;border-bottom:1px 단색 #fff;color:#000;}
.tab-head-r{국경-오른쪽:0;}
.tab-body-p{display:none;margin:20px 10px;}
.tab-body .current{display:block;}
</style>
</head>
<본문>
<p class="탭-박스">
<p class="탭-헤드">
<p class="tab-head-p current">탭 1</p>
<p class="tab-head-p">탭 2</p>
<p class="tab-head-p">탭 3</p>
<p class="tab-head-p tab-head-r">탭 4</p>
</p>
<!--jkdjfk?-->
<p class="탭-본문">
<p class="tab-body-p 현재"> 1 </p>
<p class="tab-body-p"> 2 </p>
<p class="tab-body-p"> 3 </p>
<p class="tab-body-p"> 4 </p>
</p>
</p>
<스크립트>
// 탭 표시줄의 모든 탭 요소 객체를 가져옵니다. var tabs = document.getElementsByClassName('tab-head-p');
// 탭 표시줄의 모든 콘텐츠 객체를 가져옵니다. var ps = document.getElementsByClassName('tab-body-p');
for (var i = 0; i < tabs.length; ++i) { // 요소 객체 탐색 tabs[i].onmouseover = function() { // 태그 요소 객체에 마우스 오버 이벤트 추가 for ( var i = 0; i < ps.length; ++i) { // 탭바의 콘텐츠 요소 객체를 탐색합니다. if (tabs[i] == this) { // 현재 마우스가 가지고 있는 li 요소 ps[i]를 표시합니다. .classList.add('current'); 위로 미끄러졌습니다.
tabs[i].classList.add('현재');
} else { // 다른 li 요소 숨기기 ps[i].classList.remove('current');
tabs[i].classList.remove('현재');
}
}
};
}
</script>
</body>
</html> 관련 권장 사항: javascript 튜토리얼
위는 JavaScript 예제를 통해 자세히 설명된 HTML 요소 작업의 세부 내용입니다. 자세한 내용은 php 중국어 사이트의 다른 관련 기사를 참고하세요!
