JS-DOM 基本使用

共计 2587 个字符，预计需要花费 7 分钟才能阅读完成。

获取元素

    // 可以打印的我们返回的元素对象，更好的查看里面的属性和方法
    console.dir();

    // 根据id获取一个元素
    document.getElementById('id');

    // 根据标签名获取一类元素 获取页面所有的div（伪数组）
    document.getElementsByTagName('div');

    // 根据类名获取元素 获取页面所有类名为w的（伪数组）
    document.getElementsByClassName('w');

通过HTML5新增的方法获取

根据指定选择器返回匹配的第一个元素对象

    document.querySelector('CSS选择器');
    document.querySelector('ul li:last-child')

参数：

包含一个或多个有效的CSS选择器字符串
返回值：

根据指定选择器返回匹配的第一个元素对象，HTMLElement对象，没有匹配的就返回null

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

    document.querySelectorAll('CSS选择器');

参数：

包含一个或多个有效的CSS选择器字符串

返回值：

CSS选择器匹配的NodeList 对象集合 伪数组

哪怕只有一个元素，通过querySelectlll() 获取过来的也是一个伪数组，里面只有一个元素而已

特殊元素获取

获取body元素

    document.body;

获取html元素

    document.documentElement;

操作元素

修改元素内容

    // 文本中包含的标签会被解析 
    document.write() 方法

    // 文本内容添加/更新到任意标签位置
    // 文本中包含的标签不会被解析
    元素.innerText = 值 // 属性

    // 文本内容添加/更新到任意标签位置
    // 文本中包含的标签会被解析
    元素.innerHTML = 值 // 属性

设置/修改元素属性

    element.src = 值
    img.src = '';
    element.href = 值
    a.src = '';
    element.title = 值
    element.id = 值
    element.alt = 值

设置/修改元素样式属性

1. 通过style属性操作CSS

    对象.style.样式属性 = 值
    let box = document.querSelector('div');
    box.style.marginTop = '50px';
    box.style.width = '300px';
    box.style.backgroundColor = 'red';

修改样式通过style属性引出，产生的是行内样式，css权重比较高

如果属性有-连接符，需要转换为小驼峰命名法

赋值的时候，需要的时候要加上css单位

2. 操作类名（className）操作CSS

    // active是一个css类名
    元素.className = 'active'
    box.className = 'active w'

className 会直接更改元素类名，会覆盖原先的类名

className 是使用新值换旧值，如果需要添加另一个类，需要保留之前的类名

3. 通过 classList 操作类控制CSS

    // 追加一个类
    元素,classList.add('类名')
    // 移除一个类
    元素.classList.remove('类名')
    // 切换一个类
    元素.classList.toggle('类名')

为了解决 className 容易覆盖以前的类名，我们可以通过 classList 方式追加和删除类名

设置/修改表单元素属性

    表单.type = 'text'
    表单.value = '用户名'
    element.type =
    element.value =
    element.checken = fales
    element.selected =
    element.disabled = true

事件基础

事件监听

程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件

    元素.addEventListener('事件', 要执行的函数)

事件监听三要素

1. 事件源：那个dom元素被事件触发了，要先获取dom元素
2. 事件：有什么方式触发，比如鼠标单击click、鼠标经过mouseover等
3. 事件调用的函数：要做什么事

    // 获取元素
    let btn = document.querySelector('button');
    // 事件监听（注册事件）
    btn.addEventListener('click', function() {
        alert('被点击了');
    })

事件类型要加引号，函数是点击之后再去执行，每次点击都会执行一次

事件类型

鼠标事件

鼠标触发

mouseover 和 mouseout 会有冒泡效果

mouseenter 和 mouseleave 没有冒泡效果

焦点事件

表单获得失去焦点触发

键盘事件

键盘触发

文本事件

表单输入触发

1. 事件三要素：事件由三个部分组成 事件源（事件被触发的对象）
2. 事件类型（如何触发，什么事件）
3. 事件处理程序（通过一个函数赋值的方法完成）

执行事件的步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（函数赋值形式）
   常见鼠标事件

显示隐藏密码案例

    // 获取元素
    let pwd = document.querySelector('input');
    let btn = document.querySelector('button');
    flag = true;
    // 注册事件 处理程序
    btn.onclick = function () {
        if (flag) {
            pwd.type = 'text';
            btn.style.backgroundImage = 'url(icons/open.png)';
            // 点击一次flag变化为false
            flag = false;
        } else {
            pwd.type = 'password';
            btn.style.backgroundImage = 'url(icons/close.png)';
            flag = true;
        }
    }