js基础，元素获取，事件触发，随机点名

元素获取方式

js中元素获取的六种方式

1.getElementById

通过id名获取元素

var btn=document.getElementById('id名称')

2.getElementsByClassName

通过类名获取元素，因为类名是可以重复的，所以获取的是多个元素或一个元素，以数组的形式返回，成为伪数组
伪数组具有数组的性质如length，但是没有数组的方法，使用时可使用下标确定选择元素

var btn=document.getElementsByClassName('类名')
btn[0].onclick=function(){}

3.getElementsByTagName

通过标签名获取元素，返回的也是数组

var btn=document.getElementsByTagName('标签名')

4.getElementsByName

通过name获取元素

<input name='user' type='text'>input>

var btn=document.getElementsByName('name名字')

5.querySelector

通过选择器querySelector获取元素，获取第一个

<div class='nav' id='abc'>div>
<div class='nav'> div>

//根据所选择的属性，使用对应符号
var btn=document.querySelector('#abc')
var btn=document.querySelector('.nav')//只能获取到一个盒子

6.querySelectorAll

通过选择器querySelectorAll获取元素，获取所有的

<div class='nav' id='abc'>div>
<div class='nav'> div>

var btn=document.querySelectorAll('.nav')//两个div都获取到

事件触发

事件的三要素

事件源：触发的元素
事件类型：鼠标事件 键盘事件 浏览器事件
事件的处理程序：触发元素相响应时执行的代码

事件公式

事件源.事件类型=事件执行程序

随机点名程序
html

<div id="box">div>
<div class="box1">
    <button id="btn">开始button>
div>

css

#box{
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: auto;
            margin-top: 200px;
            text-align: center;
            line-height: 100px;
        }
.box1{
            text-align:center;
            margin-top:  50px;

        }

js

	var box=document.getElementById('box')
    var btn=document.getElementById('btn')
    var nameArr=[]//放名字，放到数组中
    //此处i为nameArr数组的下标，用随机数产生 *6为产生0~6的数
    //如最小值不为0，需*（max-min）+min
    var i=Math.round(Math.random()*6),j=1 
    var num=0
    
    btn.onclick=function(){
        num++
        
        if(num%2==1){
            this.innerHTML='停'
            setInterval(function(){
                i=Math.round(Math.random()*6)
                console.log(i);
                box.innerHTML=nameArr[i]
            },10)//此处为刷新间隔，单位毫秒
        }else{
            clearInterval(j)
            j++
            this.innerHTML='开始' 
        }
    }

非表单元素的操作

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <div>
        <img src="#" alt="一张图片">
    div>
    <div>
        <button id="show">显示图片button>
        <button id="change">改变大小button>
        <button id="hide">隐藏图片button>
    div>
body>
<script>
    //获取元素
    var img=document.querySelector('img')
    var show=document.getElementById('show')
    var change=document.getElementById('change')
    var hide=document.getElementById('hide')
    show.onclick=function(){
        img.style.display='block'
        img.src='../img/bg.gif'
    }
    change.onclick=function(){
        // img.width=100
        // img.height=100
        //注意单位
        img.style.width=100+'px'
        img.style.height=200+'px'
        img.style.border='1px solid red'
        //双单词第二单词首字母大写
        img.style.borderRadius='20px'
        //通过类名改变宽高  会覆盖原有的类名
        img.className='box'

    }
    hide.onclick=function(){
        
        img.style.display='none'
    }
script>
html>

innerTEXT与innerHTML的区别

二者都是改变元素中的文本信息，上面例子中有使用方法

innerTEXT

不能识别富文本，些什么就改成什么

innerHTML（推荐使用）

可以识别富文本，内容可以编译出来

box.innerText = ''

此处就会在box元素中显示一个

在这里插入图片描述

相关阅读:
如何一次性批量打印PDF、Word、Excel、PPT和图片 - 文件批量打印工具
观测云产品更新｜应用性能新增服务清单功能；用户访问监测 Session 查看器调整；事件新增移动端跳转选项等
05方法的定义，调用重载
Android 12 Bluetooth源码分析蓝牙配对
Visual Studio 2017工程在Visual Studio 2019打开碰到的问题
三角函数画图
Go ：测试涉及NaN的浮点比较(附完整源码)
力扣第150题逆波兰表达式求值 stack c++
优先级队列实现原理
ElasticSearch中的映射（mapping）

原文地址：https://blog.csdn.net/weixin_64310316/article/details/139392159