1.DOM

1.1 什么是DOM

文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口

W3C已经定义一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构，样式。

• 文档：一个页面就是一个文档，DOM中使用doucument来表示
• 元素：页面中的所有标签都是元素，DOM中使用 element 表示
• 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

DOM 把以上内容都看做是对象

2.获取元素

2.1 如何获取页面元素

DOM在我们实际开发中主要用来操作元素。

我们如何来获取页面中的元素呢？

获取页面中的元素可以使用以下几种方式

• 根据 ID 获取
• 根据标签名获取
• 通过 HTML5 新增的方法获取
• 特殊元素获取

2.2根据ID获取

使用 getElementByld() 方法可以获取带ID的元素对象

doucument.getElementByld('id名')

使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

<div id="time">2022-2-27</div>
<script>
    // 1.因为我们文档页面从上往下加载，所以得先有标签，所以script写在标签下面
    // 2.get 获得 element 元素 by 通过 驼峰命名法
    // 3.参数 id是大小写敏感的字符串
    // 4.返回的是一个元素对象
    var timer = document.getElementById('time');
    console.log(timer);
    // 5. console.dir 打印我们的元素对象，更好的查看里面的属性和方法
    console.dir(timer);
</script>

2.3根据标签名获取

根据标签名获取，使用 getElementByTagName() 方法可以返回带有指定标签名的对象的集合

• 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
• 得到元素对象是动态的
• 返回的是获取过来元素对象的集合，以伪数组的形式存储
• 如果获取不到元素，则返回为空的伪数组(因为获取不到对象)

<ul>
    <li>lyh</li>
    <li>si</li>
    <li>fcl</li>
    <li>de</li>
    <li>ganerzi</li>
</ul>
<script>
    // 1.返回的是获取过来元素对象的集合 以伪数组的形式存储
    var lis = document.getElementsByTagName('li');
    console.log(lis);
    console.log(lis[0]);
    // 2.依次打印,遍历
    for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }
    // 3.如果页面中只有 1 个 li，返回的还是伪数组的形式
    // 4.如果页面中没有这个元素，返回的是空伪数组
</script>

2.4根据元素获取

还可以根据标签名获取某个元素（父元素）内部所有指定标签名的子元素,获取的时候不包括父元素自己

element.getElementsByTagName('标签名')

ol.getElementsByTagName('li');

<script>
	//element.getElementsByTagName('标签名'); 父元素必须是指定的单个元素
    var ol = document.getElementById('ol');
    console.log(ol[0].getElementsByTagName('li'));
</script>

2.5通过H5新增方法获取

getElementsByClassName

根据类名返回元素对象合集

document.getElementsByClassName('类名'); 

document.querySelector

document.querySelector('选择器');

// 里面的选择器需要加符号 
// 类选择器.box 
// id选择器 #nav
var firstBox = document.querySelector('.box');

document.querySelectorAll

根据指定选择器返回所有元素对象

document.querySelectorAll('选择器');

2.6获取特殊元素

document.body;//返回body元素对象
document.documentElement;//返回html元素对象

3.事件基础

3.1事件概述

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作

3.2事件处理系统

1. 事件源
2. 事件类型
3. 事件处理程序

 <button class="btn">你好吗</button>
     <script>
  var btn=document.querySelector('.btn');
btn.onclick = function(){
  alert('我很好');
}
 
   
</script>

3.3 执行事件的步骤

1. 获取事件源
2. 注册事件(绑定事件)
3. 添加事件处理程序(采取函数赋值形式)