【web】【js】--获取元素，获取内容，案例：计算器，tab选项卡

最新推荐文章于 2024-09-09 09:35:48 发布

.山间的风

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量257

点赞数 1

分类专栏：小白笔记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_46911043/article/details/127078067

版权

本文介绍了JavaScript中获取元素的各种方法，包括通过id、标签名、class和name属性等。同时讲解了如何获取或设置元素属性，以及获取内容的方法。文章提供了两个实战案例，一个是实现简单的计算器功能，另一个是使用for循环遍历实现tab选项卡，并统一绑定事件。

摘要由CSDN通过智能技术生成

获取元素

通过id名获取获取的是单个元素

var btn=document.getElementById('btn')

通过标签名获取获取的是数组

var button=document.getElementsByTagName('button')

通过class名获取获取的是数组

var btn2=document.getElementsByClassName('btn2')

通过name属性获取获取的是数组

var input=document.getElementsByName('user')[0]

通过选择器获取，一个，多个获取数组

通过选择器获取document.querySelector 获取单个元素
通过选择器获取 document.querySelectorAll 获取的是数组

js如何获取或设置标签的属性

获取：元素.属性

设置：元素.属性=属性值

获取内容（获取行间内容）

value获取或者设置表单的内容
innerHTML获取或者设置标签的内容

设置class名

获取行间的class属性通过className获取，因为class是保留字
classList.add(‘class名’) 添加这个class名
classList.remove(‘class名’)删除这个class名

例子

描述文本框输入内容，按下按键将内容发送到P标签上，按下删除键，监听事件让P标签跟着删，等到删完发送的内容，跳出循环


  <input type="text" name="user" value="">
    <br>
    <button class="">获取表单内容</button>
    <p>你输入的用户名是:</p>
//获取元素
var input=document.getElementsByName('user')[0]
var btn=document.getElementsByTagName('button')[2]
var p=document.getElementsByTagName('p')[0]
//绑定事件
btn.onclick=function(){
   //传统事件
    p.innerHTML="你输入的用户名是:"+input.value //按下按键，input里的内容同步到p标签里
}
input.addEventListener('keyup', function(e){
   //监听事件
    if(e.keyCode=='8') {
   //如果按下删除键
        if(p.innerHTML !== "你输入的用户名是:"){
   //判断内容是否删除完，如果没删完就监听跟着删，如果删完了跳出循环
         p.innerHTML="你输入的用户名是:"+input.value
         }
    }   
})

计算器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content