【JavaScript】DOM元素的获取及操作、函数及变量的预编译

本文详细介绍了在JavaScript中获取DOM元素的多种方法,包括getElementById, getElementsByClassName等,并强调了元素存在的重要性。同时,文章还讲解了事件处理的概念,如键盘事件、鼠标事件等,以及事件名前缀的使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

☆常用DOM元素的获取方式
       首先必须知道最大的对象是window对象,它可以分为history location document对象,document对象又可以分为body和html元素。

var btn=document.getElementsByClassName("btn");
//getElementsByClassName获取出来的是对象的集合,有length属性.
//因此,对获取出来的元素进行操作的时候不能隐式迭代(不能操作一堆),操作需单独操作或者for循环对其操作
var btn=document.getElementById("btninfo");
var btn=document.getElementsByName("btn");
var btn=document.getElementsByTagName("button");
var btn=document.body.getElementsByTagName("button");

注意:在获取元素的时候得注意获取的元素必须存在。\color{red}{注意:在获取元素的时候得注意获取的元素必须存在。}都知道代码是从上到下加载的,若JS脚本代码在body标签里面,则不会出现这个问题(页面加载完才加载脚本代码,这时候元素已经存在)。若JS脚本代码在head标签里面,若要获取到元素就需要将所有脚本语言放在window.οnlοad=function(){}里面,如下:

<script>
    window.onload=function (){
       var btn=document.getElementsByClassName("btnlist");
       console.log(btn);
    }
    //window.onload和在body中写load是一样的
</script>

☆DOM元素的事件
       JS里面的事件指的是被动的行为,可以分为键盘事件、鼠标事件、窗口事件、移动端事件(触屏)

  • 键盘事件:keydown keyup keypress
  • 鼠标事件:mousedown mouseup click dblclick mouseenter mouseleave mouseout mouseover mousemove
  • 窗口事件: load focus blur……
    注意:JS里面的事件前面都带on\color{red}{注意:JS里面的事件前面都带on}JSon
    ☆变量和函数的预编译
    变量和函数(function name(){})会进行预编译(var name=function(){}这样写的函数不能进行预编译哦~~~只是对name变量进行预编译了),所以函数的调用可以写在函数的定义之前。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值