JavaScript core-DOM (1)

1. 웹 API와 JS 기반의 관계

1.1 JS 구성

ECMAScript : JavaScript 구문
DOM : 문서 객체 모델
BOM : 브라우저 개체 모델

1.2 JS 기본 단계 및 웹 API 단계

JS 기본 단계

ECMAScript 표준에서 규정 한 기본 문법을 배웁니다.
문법 학습만으로는 일반적인 웹 페이지 상호 작용 효과를 얻을 수 없습니다.
JS 재단이 예고합니다

웹 API 단계

웹 API는 W3C 조직의 표준입니다.
주로 DOM 및 BOM 학습
웹 API는 JS에 고유합니다.
주요 학습 페이지 상호 작용 기능
길을 닦기 위해 JS 재단이 필요

API 및 웹 API

API (애플리케이션 프로그래밍 인터페이스, 애플리케이션 프로그래밍 인터페이스)는 일부 사전 정의 된 기능으로, 목적은 특정 소프트웨어 또는 하드웨어를 기반으로 애플리케이션과 개발자가 루틴 세트에 액세스 할 수 있도록 제공하는 것이지만 소스 코드에 액세스하거나 내부 작업을 이해할 수 없습니다. 메커니즘의 세부 사항
웹 API는 주로 브라우저 상호 작용을 위해 브라우저 기능과 페이지 요소를 조작하기 위해 브라우저에서 제공하는 API (BOM 및 DOM) 집합입니다. 많은 웹 API는 메소드 (함수)입니다.

2. DOM 소개

2.1 DOM이란?

DOM (문서 개체 모델)은 W3C 조직에서 권장하는 확장 가능한 마크 업 언어 (HTML / XML) 처리를위한 표준 프로그래밍 인터페이스입니다.

W3C는 웹 페이지의 콘텐츠, 구조 및 스타일을 변경할 수있는 일련의 DOM 인터페이스를 정의했습니다.

2.2 DOM 트리

문서 : 페이지는 DOM에서 문서로 표시되는 문서입니다.
요소 : 페이지의 모든 태그는 DOM의 요소로 표시되는 요소입니다.
노드 : 웹 페이지의 모든 콘텐츠는 DOM에서 노드로 표시되는 노드 (라벨, 속성, 텍스트, 댓글 등)입니다.

DOM은 위의 내용을 객체로 취급합니다.

3. 요소 가져 오기

3.1 페이지 요소를 얻는 방법

ID로 받기
태그 이름에 따라 가져 오기
HTML5 새로운 방법으로 획득
특수 요소 획득

3.2 ID로 받기

getElementById () 메서드를 사용하여 ID가있는 요소 개체를 가져옵니다.

document.getElementById('ID名');

3.3 태그 이름에 따라 획득

getElementsByTagName () 메서드를 사용하여 지정된 태그 이름을 가진 객체 컬렉션을 반환합니다.

document.getElementByTagName('标签名')

요소 (부모 요소) 내에서 지정된 레이블의 모든 하위 요소를 가져올 수도 있습니다.

element.getElementsByTagName('标签名')

참고 : 부모 요소는 단일 개체 (요소 개체를 지정해야 함) 여야하며 부모 요소 자체는 가져올 때 포함되지 않습니다.

3.4 HTML5 새로운 방법을 통해 얻기

1.document.getElementByClassName('类名');//根据类名返回元素对象集合

2.document.querySelector('选择器');//根据指定选择器返回第一个元素对象，选择器必须加符号

3.document.querySelectorAll('选择器')

3.5 특별한 요소 얻기 (body, html)

1.document.body//返回body元素对象

2.document.documentElement//返回html元素对象

4. 이벤트 기준

4.1 이벤트 개요

JavaScript를 사용하면 동적 페이지를 만들 수 있으며 이벤트는 JavaScript에서 감지 할 수있는 동작입니다.

4.2 이벤트 구성

이벤트는 세 부분 (이벤트의 세 요소)으로 구성됩니다.

이벤트 소스 : 버튼과 같은 이벤트에 의해 트리거 된 개체
이벤트 유형 : 트리거 방법, 키보드로 마우스를 누른 마우스 클릭 (onclick)과 같은 이벤트
이벤트 핸들러 : 함수 할당을 통해

<body>
    <button id="btn">唐伯虎</button>
    <script>
        //(1) 事件源：事件被触发的对象，谁，比如按钮
        vsr btn = document.getElementById('btn');
        //(2) 事件类型:如何触发，什么事件，比如鼠标点击（onclick） 鼠标经过 键盘按下
        //(3)事件处理程序：通过一个函数赋值的方式完成
        btn.onclick = function() {
     
     
            alert("点秋香");
        }
    </script>
</body>

4.3 이벤트 실행 단계

이벤트 소스 가져 오기
이벤트 등록 (바운드 이벤트)
이벤트 처리기 추가 (함수 할당 형식)

<body>
    <div>123</div>
    <script>
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2. 绑定事件
        //div.onclick
        // 3. 添加事件处理程序
        div.onclick = function() {
     
     
            console.log('我被选中了');
        }
    </script>
</body>

5. 작동 요소

JavaScript의 DOM 작업은 웹 페이지의 콘텐츠, 구조 및 스타일을 변경할 수 있으며, DOM 작업 요소를 사용하여 요소 내부의 콘텐츠 속성을 변경할 수 있습니다.

5.1 요소 내용 변경

element.innerText//从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会换掉

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>1234</p>
    <script>
        // 点击按钮，div里面的文字发生变化
        // 1. 获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        
        //2.注册事件
        btn.onclick= function() {
     
     
            div.innerText = getDate();
        }

        function getDate() {
     
     
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date. getDay();
            return year + '年' + month + '月' + dates + '日' + arr[day];
        }
        // 元素不添加事件 页面刷新时直接显示
        var p = document.querySelector('p');
        p.innerText = getDate();
        
        
    </script>
</body>

element.innerHTML//起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

<body>
    <div></div>
    <script>
        // innerText和 innerHTML的区别
        // 1. innerText
        var div = document.querySelector('div');
        div.innerText= '<strong>今天是：2020</strong>';//不会加粗 显示标签
        // 2. innerHTML
        div.innerHTML= '<strong>今天是：2020</strong>';//会加粗
        
        //两个标签都是可读写的
    </script>
</body>

5.2 공통 요소의 속성 연산

innerText, innerHTML 변경 요소 내용
src 、 href
id 、 alt 、 title
```
例：
img.src='...';
```

5.3 양식 요소의 속성 연산

DOM을 사용하여 다음 양식 요소의 속성을 조작하십시오.

type、value、checked、selected、disabled

//1. 用input.innnerHTML不能改变表单里面的值
input.value= ''; // 文字内容通过value修改
//2. 禁用按钮
btn.disabled = true;

5.4 스타일 속성 연산

JS를 통해 요소의 크기, 색상, 위치 및 기타 스타일을 수정할 수 있습니다.

element.style 인라인 스타일 작업
element.className 클래스 이름 스타일 작업

// 1.element.style 行内样式操作  修改div样式里的属性  属性采取驼峰命名法
div.style.backgroundColor = 'purple';
// 2. element.className 类名样式操作
// 先在CSS里声明好一个类 写入理想的样式
// 通过添加类名，改变样式
div.className = '添加的类名' //不加点
// 因为是赋值操作， 恢复覆盖掉原来的类名
//3. 如果想保留原来的类名，则
div.className = '类名1 类名2';

작동 요소 요약 :

여기에 사진 설명 삽입