zoukankan      html  css  js  c++  java
  • 原生js获得八种方式,事件操作

    08.17自我总结

    关于js

    一.原生js获得八种方式

    • 通过ID获取(getElementById)
    • 通过name属性(getElementsByName)
    • 通过标签名(getElementsByTagName)
    • 通过类名(getElementsByClassName)
    • 通过选择器获取一个元素(querySelector)
    • 通过选择器获取一组元素(querySelectorAll)
    • 获取html的方法(document.documentElement)
    • document.documentElement是专门获取html这个标签的
    • 获取body的方法(document.body)
    • document.body是专门获取body这个标签的

    二.事件句柄

    属性 当以下情况发生时,出现此事件
    onabort 图像加载被中断
    onblur 元素失去焦点
    onchange 用户改变域的内容
    onclick 鼠标点击某个对象
    ondblclick 鼠标双击某个对象
    onerror 当加载文档或图像时发生某个错误
    onfocus 元素获得焦点
    onkeydown 某个键盘的键被按下
    onkeypress 某个键盘的键被按下或按住
    onkeyup 某个键盘的键被松开
    onload 某个页面或图像被完成加载
    onmousedown 某个鼠标按键被按下
    onmousemove 鼠标被移动
    onmouseout 鼠标从某元素移开
    onmouseover 鼠标被移到某元素之上
    onmouseup 某个鼠标按键被松开
    onreset 重置按钮被点击
    onresize 窗口或框架被调整尺寸
    onselect 文本被选定
    onsubmit 提交按钮被点击
    onunload 用户退出页面

    三.使用方法

    1.获取单个元素

    2.单个元素发送的事件

    3.发生的内容相关替换

    let inp = document.querySelector('input');
    
    inp.onkeydown = function () {
        console.log('按下')
    };
    

    四.提取元素里面的内容

    • innerHTML:获取文本包括标签

    • innerText:获取文本不包括标签

    • val:获取表单里面的值

    五.补充知识点

    获取操作父标签修改子标签

    比如说我们点击a类修改下面的b类

    let xx = document.querySelector('.a');
    xx.onclick = function () {
        this.querySelector('.b').innerHTML='点击a了;
    };
    

    querySelectorAll获取一组元素后我们怎么把其中的内容取出来

    let xx = document.querySelectorAll('.a');
    for (let i = 0; i < xx.length; i++){
        console.log(xx[i]);
    }
    
  • 相关阅读:
    转贴:C语言链表基本操作
    硬盘上的一些算法小题目||and今天看了下林锐的书以及gdb调试 及一些变成算法小题目
    MFC入门 002 滚动条Scorllbar 数字控制框 Spin 进度条 Progress
    002 Windows数据类型 字符集
    001 Windows 简介
    MFC入门 001 Edit&Button&List&ComboBox
    iPads和iPones的Media Queries
    响应式网页设计
    chrome developer tool 调试技巧
    返回一个整型数组中最大子数组的和(02)
  • 原文地址:https://www.cnblogs.com/pythonywy/p/11369847.html
Copyright © 2011-2022 走看看