JavaScript WebAPI,DOM,이벤트 및 작업 요소 인 스 턴 스 상세 설명
API:응용 프로그램 프로 그래 밍 인 터 페 이 스 는 미리 정 의 된 함수 로 특정한 소프트웨어 가 개발 자 에 게 개방 되 어 사용 하 는 것 으로 개발 자가 특정한 기능 을 실현 하도록 도와 준다.개발 자 는 소스 코드 를 방문 하지 않 아 도 되 고 내부 작업 체제 의 세부 사항 을 이해 하지 않 아 도 되 며 어떻게 사용 하 는 지 만 알 면 된다.
간단 한 이해:API 는 프로그래머 에 게 원 하 는 기능 을 쉽게 실현 할 수 있 도록 제공 하 는 도구 입 니 다.
WebAPI:주로 브 라 우 저 를 위 한 API 로 자바 스 크 립 트 언어 에서 대상 으로 봉 인 됩 니 다.호출 대상 의 속성 과 방법 을 통 해 웹 API 를 사용 할 수 있 습 니 다.
간단 한 이해:웹 API 는 브 라 우 저가 제공 하 는 브 라 우 저 기능 과 페이지 요 소 를 조작 하 는 API(BOM 과 DOM)입 니 다.
DOM
문서 개체 모델 은 W3C 조직 이 추천 하 는 확장 가능 한 태그 언어(HTML 또는 XML)를 처리 하 는 표준 프로 그래 밍 인터페이스 입 니 다.
DOM 트 리
DOM 은 HTML 문 서 를 트 리(거꾸로)구조 로 처리 하고 html 문 서 를 나무 로 간주 합 니 다.문서 의 태그,태그 의 속성,태그 의 내용 은 모두 수의 노드 입 니 다.
DOM 트 리 의 맨 위 는 document 이 고,BOM 의 맨 위 는 window 입 니 다.
DOM 가 져 오기 요소 방식
획득 방식
사용법
반환 값
Id 로 가 져 오기
document.getElementById(‘id')
지정 한 id 의 요소 대상 을 되 돌려 줍 니 다.null 로 되 돌아 갈 수 없습니다.여러 개의 id 가 undefined 로 되 돌아 갑 니 다.
태그 이름 에 따라
document.getElementsByTagName('태그 이름')
지정 한 탭 의 동적 집합 을 되 돌려 줍 니 다.클래스 배열 대상 입 니 다.위 배열 이지 만 배열 이 아 닙 니 다.아래 색인 을 통 해 접근 할 수 있 습 니 다.
Name 에 따라 가 져 오기
document.getElementByName('name 속성 값')
지정 한 name 의 요소 대상 집합 되 돌려 주기
ClassName 에 따라 가 져 오기(html 5 추가)
document.getElement ByClassName('class 속성 값')
지정 한 classname 의 요소 대상 집합 을 되 돌려 줍 니 다.
선택 기 에 따라 가 져 오기(추가)
document.query Selector('선택 기')
주어진 선택 기 요 소 를 가 져 옵 니 다.주어진 선택 기의 첫 번 째 요소 만 되 돌려 줍 니 다.
선택 기 에 따라 가 져 오기(추가)
document.query Selector All('선택 기')
주어진 선택 기 요 소 를 가 져 오고 요소 의 집합 을 되 돌려 줍 니 다.
document 개체 속성
방법.
역할.
document.body
문서 의 body 요 소 를 되 돌려 줍 니 다.
document.title
문서 의 title 요 소 를 되 돌려 페이지 의 제목 을 표시 합 니 다.
document.documentElement
문서 의 html 요소,즉 HTML 페이지 의 모든 정 보 를 되 돌려 줍 니 다.(이 를 통 해 문서 의 모든 요 소 를 문자열 에 넣 어 다른 사람 이 읽 고 분석 할 수 있 습 니 다.
document.froms
문서 의 모든 From 대상 참조,복수 형식 을 되 돌려 줍 니 다.여러 폼 을 되 돌려 줍 니 다.
document.images
문서 의 모든 image 대상 을 되 돌려 줍 니 다.위 와 같 습 니 다.
이벤트
이벤트:사용자 가 특정한 조작(자바 스 크 립 트 에 의 해 감지 되 는 행위)을 하 는 것 은'트리거-응답'체제 로 페이지 의 상호작용 을 실현 하 는 방식 입 니 다.
이벤트 3 요소:
이벤트 원본:이벤트 이벤트 형식 을 촉발 한 사람:이벤트 처리 프로그램 을 촉발 한 사람:이벤트 가 실 행 된 후 실 행 된 코드(함수 형식)
이벤트 사용 절차
<body>
<button id="btn"> </button>
<script>
var btn = document.getElementById('btn')// 1 ：
// 2 ： btn.onclick
btn.onclick = function () { // 3 ： （ ）
alert(' ')
}
</script>
</body>
메모:단 추 를 만 드 는 방법(2 가지)
<input type="button" value=" ">
<button type="button"> </value>
조작 요소
조작 요소 내용
DOM 이 제공 하 는 속성 은 요소 내용 에 대한 조작 방법 을 실현 합 니 다.
<body>
<div id="box">
The first paragraph...
<p>
The second paragraph...
<a href="#">third</a>
</p>
</div>
</body>
<script>
var box = document.getElementById('box')
console.log(box.innerHTML)
console.log(box.innerText)
console.log(box.textContent)
</script>
조작 요소 속성
DOM 에서 HTML 속성 조작 은 자 바스 크 립 트 를 사용 하여 원 소 를 조작 하 는 HTML 속성 을 가리킨다
① 조작 style 속성:요소 대상.style.스타일 속성 명
스타일 속성 명 은 CSS 스타일 명 에 대응 하지만 CSS 스타일 명 에 있 는 반 자 선"-"을 제거 하고 반 자 선 뒤의 영문 이니셜 을 대문자 로 써 야 합 니 다.
<body>
<div id="box"></div>
<script>
var ele = document.querySelector('#box'); //
ele.style.backgroundColor= 'red';
ele.style.width = '100px';
ele.style.height = '100px';
ele.style.transform = 'rotate(7deg)';
</script>
<!-- 3 CSS ： -->
<style>
#box {
background-color: red;
width: 100px;
height: 100px;
transform: rotate(7deg);
}
</style>
</body>
만약 에 같은 요소 가 있다 면 특정한 요소 가 특정한 스타일 을 실현 하려 면 순환 적 인 배타 사상 알고리즘 을 사용 해 야 한다.
사용자 정의 속성 목적:데 이 터 를 저장 하고 사용 하기 위 한 것 입 니 다.일부 데 이 터 는 데이터베이스 에 저장 하지 않 고 페이지 에 저장 할 수 있다.
일부 사용자 정의 속성 은 잘못된 의 미 를 일 으 키 기 쉬 워 서 요소 의 자체 속성 인지 사용자 정의 속성 인지 판단 하기 어렵다.HTML 5 는 사용자 정의 속성 규범 을 추 가 했 고 HTML 5 에 서 는'data-속성 명'을 통 해 사용자 정의 속성 을 설정 하도록 규정 했다.
속성 값 설정:
① HTML 에 사용자 정의 속성 설정
data-속성 명='값'
// div data-index
<div data-index="2"></div>
<div></div>
<script>
var div = document.querySelector('div');
div.dataset.index = '2';
div.setAttribute('data-name', 'andy');
</script>
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
console.log(div.getAttribute('data-index')); // ：2
console.log(div.getAttribute('data-list-name')); // ：andy
// HTML5 ， “data-”
console.log(div.dataset); // DOMStringMap {index:"2",listName:"andy"}
console.log(div.dataset.index); // ：2
console.log(div.dataset['index']); // ：2
console.log(div.dataset.listName); // ：andy
console.log(div.dataset['listName']); // ：andy
</script>
element.removeAttribute('속성')
<div id="test" class="footer" ></div>
<script>
var div = document.querySelector('div');
div.removeAttribute('id'); // div id
div.removeAttribute('class'); // div class
</script>
총결산
자 바스 크 립 트 웹 API,DOM,이벤트 와 작업 요소 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 js 웹 API,DOM,이벤트 와 작업 요소 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 지원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
React의 특징 2HTML 태그에 이벤트를 할당하려면 이벤트 이름을 camelCase로 명명하고 이벤트 핸들러에 함수를 전달합니다. style을 할당하는 것은 DOM내에 직접 기술하는 방법이나, CSS프로퍼티를 일단 변수에 대입하고 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
