JS-DOM 基本使用

4次阅读
没有评论

共计 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单位

  1. 操作类名(className)操作CSS
    // active是一个css类名
    元素.className = 'active'
    box.className = 'active w'

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

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

  1. 通过 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('被点击了');
    })

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

事件类型

鼠标事件

鼠标触发

事件名 说明
click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开

mouseovermouseout 会有冒泡效果

mouseentermouseleave 没有冒泡效果

焦点事件

表单获得失去焦点触发

事件名 说明
focus 获得焦点
blur 失去焦点

键盘事件

键盘触发

事件名 说明
Keydown 键盘按下触发
Keyup 键盘抬起触发

文本事件

表单输入触发

事件名 说明
input 用户输入事件

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

执行事件的步骤

  1. 获取事件源
  2. 注册事件(绑定事件)
  3. 添加事件处理程序(函数赋值形式)
    常见鼠标事件
事件名 说明
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 鼠标移动触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发

显示隐藏密码案例

    // 获取元素
    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;
        }
    }

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-20发表,共计2587字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码