Javascript语法基础之按钮点击事件 Javascript语法基础之按钮点击事

Hello everyone,This is Kaylee. 这是一篇简单的JS语法基础内容，是在我学习过程中，比较难以记忆的知识点，我将搭配案例详解展示给大家，通过这种方式可以加深记忆，方便应用。第一部分：JS基础语法： 1.标签，可放在代码任意位置；
2.JS输出方式由以下几种：
window.alert（）弹出警告框
document.write（）写到HTML文档里
innerHTML写入到HTML元素
console.log（）写入到控制台
3. 利用元素id获取HTML元素
利用document.getElementById（）方法获取元素的id值来标识元素，并用innerHTML来获取或者插入元素内容；
4. js对象：
var person={ firstname：“john”，age：“13”}；
寻址两种方法：
name=person.lastname;
name=［“lastname”］；
5.js数组的定义：var cars=new Array（）；
第二部分：实例详解

通过按钮的点击事件设置一个div的显示和隐藏
思路如下：首先通过按钮id获取按钮元素，编写其点击事件。通过改变按钮的value值来判断div当前状态，从而设置其显示或隐藏。
关键代码如下图：

文章图片
my$()方法如下：
function my$(id){ return document.getElementById(id); };
Tab切换案例
思路如下：首先需要自定义一个属性作为索引需要在点击之前获取所有索引。实现上Tab和下内容的排他功能。
具体代码如下：

文章图片

第三部分：总结。通过以上两个小案例我总结了六种获取元素的方法。

> 获取元素的方法总结 //1.根据元素的id值获取元素，返回的是一个元素对象 document.getElementById("id名"); //2.根据标签名获取元素，返回为一个伪数组，里面保存多个DOM对象 document.getElementsByTagName("标签名"); //3.根据name属性值获取元素，返回为一个伪数组，里面保存了多个DOM对象 document.getElementsByName("name属性的值"); //4.根据类样式名获取元素，返回为一个伪数组，里面保存了多个DOM对象 document.getElementsByClassName("类名"); //5.6有的浏览器不支持属于h5 //5.根据选择器获取元素，返回的是一个元素对象 document.querySelector("选择器名#或者.需要有"); //6.根据选择器获取元素，返回来的是一个伪数组，里面保存了多了DOM对象 document.querySelectorAll("选择器名");

【Javascript语法基础之按钮点击事件】以上内容希望能对大家有用。