JavaScript DOM基础

1. 基本概念

文档对象模型（Document Object Model, 简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。可以改变页面的内容结构和样式。

DOM 里面的专有名词

DOM 树

1. 文档 ：一个页面就是一个文档，在DOM中用document表示
2. 元素：页面中的所有标签都是元素，DOM中使用element表示
3. 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
   DOM 把以上内容都看做对象

2. 获取页面元素

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

1. 根据ID获取元素

使用getElementById()方法获取

<div id="time">2022-3-10</div>
<script>
    // 1.因为页面文档从上往下加载，所以得先有标签，所以script要写到标签的下面
    // 2.参数 id 是大小写敏感的字符串
    var timer = document.getElementById('time');
    console.log(timer, typeof timer); // 3. 返回的是元素对象
    // 4.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
    console.dir(timer);
</script>

2. 根据标签名获取

使用 getElementsByTagName()方法可以返回带有指定标签名的对象的集合

// 1. 返回的是 获取过来的元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[2]); //<li>hhhhhhhhh3</li>
// 2.采取遍历 依次打印里面的元素对象
for(var i = 0; i < lis.length; i++){
   
    console.log(lis[i]);
}

• 返回的是 获取过来的元素对象的集合 以伪数组的形式存储的
• 页面只有一个li或者没有li返回的依旧是伪数组形式
• element.getElementsByTagName(‘标签名’) 可以获取某个元素（父元素）内部所有指定标签名的子元素。 注意：父元素 必须是单个对象，获取的时候不包括父元素自己

var ol = document.getElementsByTagName('ol');
console.log(ol[0].getElementsByTagName('li')); //注意获取单个父元素ol[0] (即使只有一个ol也要这么写，因为是伪数组)
// 常用写法 给ol加id
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));

3. 根据H5新增的方法获取

H5新增：只兼容ie9以上

1. getElementsByClassName()根据类名获取元素集合

// 返回的是伪数组 getElementsByClassName
var boxs = document.getElementsByClassName('box');
console.log(boxs);  

2. querySelector(‘选择器’) 根据指定选择器返回第一个元素对象（不分id标签类了,但里面的选择器要加对应符号）

// querySelector(‘选择器’) 根据指定选择器返回第一个元素对象（不分id标签类了)
var firstBox = document.querySelector('.box');
console.log(firstBox); 
var firstNav = document.querySelector('#nav');
console.log(firstNav);

3. querySelectorAll(‘选择器’)； 根据指定选择器返回对应的所有对象 也是伪数组

// querySelectorAll('选择器')； 根据指定选择器返回对应的所有对象
var allBox = document.querySelectorAll('.box');
console.log(allBox);  // 也是伪数组

4. 特殊元素获取(body,html)

1. 获取body元素
   document.body 返回body对象

var bodyEle = document.body;
console.log(bodyEle);

2. 获取HTML元素
   document.documentElement 返回html对象

var htmlEle = document.documentElement;
console.log(htmlEle);

3. 事件基础

JavaScript 使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为
触发 – 响应机制
网页中的每个元素都可以产生某些可以触发JavaScript的事件，如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作

事件三要素：事件源、事件类型、事件处理程序
执行事件的步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值的方式）

<button id="btn">唐伯虎</button>
<div>123</div>
<script>
    // 点击div 控制台输出 我被选中了
    // 1. 获取事件源
    var divFirst = document.querySelector('div');  // 获取第一个div对象
    // 2. 注册（绑定）事件 divFirst.onclick  
    // 3. 添加事件处理程序  
    divFirst.onclick = function() {
    
        console.log('我被选中了');
    }
</script>

常见的鼠标事件

4.操作元素 （较核心）

1.改变元素内容

下面两个属性都是可读写的，可以获取里面的内容

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

2. element.innerHTML : 从起始位置到终止位置的全部内容，包括html标签，保留空格和换行，和innerText最大区别 ：能识别html标签，推荐使用这个。 W3C标准。

<!-- innerText 和innerHTML区别 -->
<div></div>
<p>
    我是文字
    <span>123</span>
</p>
<script>
    // 1.innerText 不识别html标签
    var div = document.querySelector('div');
    div.innerText = '<strong>今天是：</strong> 2022年';
    // 可读写 获取元素里的内容 会去除标签 空格和换行
    var p = document.querySelector('p');
    console.log(p.innerText);
    // 2.innerHTML 识别HTML标签
    div.innerHTML = '<strong>今天是：</strong> 2022年';
    // 可读写 获取元素里的内容 保留标签 空格和换行
    console.log(p.innerHTML);
</script>

demo – 获取当前系统时间 结合函数

<button>显示当前系统时间</button>
<div>某个时间</div>
<script>
    // 点击按钮 div里面的文字发生变化 innerText
    var buttonFirst = document.querySelector