JS-基础语法、DOM、事件-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_51120880/article/details/120226517

这篇博客深入介绍了JavaScript的基本语法，包括输入输出、变量、数据类型判断、运算符、数组操作以及函数的使用。同时，文章还详细讲解了DOM元素的增删改查，属性和文本的操作，以及事件的绑定和处理。最后通过综合案例展示了如何在网页中动态添加和删除表格数据。

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

JavaScript基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本语法</title>
</head>
<body>
    
</body>

<script>
    /*
    1.--------------输入输出语句演示
    */
    //alert 弹出警告框
    alert("第一个java")

    输入框
    prompt("请输入内容")

    控制台输出
    console.log("控制台输出语句")

    页面输出内容
    document.write("页面展示内容")
    document.write("<br>")
    document.write("换行后的展示效果")


    变量和常量的定义
    let name= "李白";
    let age = 33;
    document.write(name +","+age+"<br>");
    
   // 2-------------局部和全局变量对此
    大括号为局部代码块
    {
        let name = "王维";
        username = "白居易";
    }
    //出了局部代码块,值获取不到
    document.write(name+"<br>");
    //全局变量不受影响
    document.write(username+"<br>")

   // 3------------------常量的定义,且只能赋值一次
    const number = 3.1415926;
    document.write(number)

   // 4-------------------------原始数据类型判断
    let l1 = false;
    document.write(typeof(l1)+"<br>");

    let l2 = null;
    document.write(typeof(l2)+"<br>");

    let l3;
    document.write(typeof(l3)+"<br>");

    let l4 = 3.12;
    document.write(typeof(l4)+"<br>");

    let l5 = "原始类型判断";
    document.write(typeof(l5)+"<br>");

    let l6 = 100n;
    document.write(typeof(l6)+"<br>");
    
   // 5.------------------运算符测试
    // 加减乘除  字符串做运算时,+号为字符串之间的拼接
    // +号之外做运算忽视数据类型,即值与值之间的关系
    let number = "10";
    document.write(number+5+"<br>")  
    document.write(number+"5"+"<br>")
    document.write(number-5+"<br>")
    document.write(number*5+"<br>")
    document.write(number/5+"<br>")

    //两个等号仅仅比较值与值是否相等,忽视数据类型
    //三个等号即比较双方的值是否相等,也比较少是双方的数据类型是否相等
    let age = 10;
    document.write(number==age);
    document.write("<br>")
    document.write(number===age);
    
    //6.--------------------数组的基本使用
    let arr = [10,12,12,24,55];
    //数组中长度可随意变化
    arr[5] = 50;
    for(let i = 0;i<arr.length;i++){
        document.write(arr[i]+"<br>")
    }

    document.write("--------------------------<br>")
    //-------------------------数组高级运用
    //数组复制
    let arr1 = [...arr]
    for(let i = 0;i<arr1.length;i++){
        document.write(arr1[i]+"<br>")
    }

    document.write("--------------------------<br>")
    //数组合并
    let arr2 = [...arr,...arr1]
    for(let i = 0;i<arr2.length;i++){
        document.write(arr2[i]+"<br>")
    }
    
    document.write("--------------------------<br>")
    //将字符串转成数组
    let arr3 = [..."王者荣耀"]
    for(let i = 0;i<arr3.length;i++){
        document.write(arr3[i]+"<br>")
    }

   // 7.-----------------------函数的使用
    无参无返回值方法
    function method(){
        document.write("王者防沉迷设置")
    }
    //调用方法
    method();

    有参有返回值方法,返回值类型和参数类型可省略不写
    function method(number,number1){
        return number+number1;
    }
    //调用方法
    let i= method1(10,20);
    document.write(i+"<br>")
    
    可变参数即参数数量不确定且可变参数为数组
    function method(...Param){
        //定义变量用于接收可变参数变量后的总和
        let sun = 0;
        for(let i = 0;i<Param.length;i++){
           sun += Param[i];
        }
        return sun;
    }
    //调用方法
    let sun =method(1,2,3,4,5);
    document.write(sun+"<br>")

    //匿名函数 即没有方法名的函数
    let sun = function (){
        document.write("匿名函数")
    }
        sun();
</script>
</html>

DOM----元素的增删改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM演示</title>
</head>
<body>
    
    <div id = "div1">div1</div>
    <div id = "div2">div2</div>
    <div class="div3">div3</div>
    <div class="div3">div4</div>
    <input type="text" name = "usernmae">




    <!-- 增删改操作 -->
    <select id ="s">
        <option>----请选择您的打野英雄----</option>
        <option id="o">李白</option>
        <option>韩信</option>
        <option>赵云</option>
    </select>
</body>
<script>
        //1....getElementById 根据id获取元素对象
     let  id = document.getElementById("div1");
    alert(id);

    //2.getElementsByTagName 根据标签名获取多个元素对象
    let div=document.getElementsByTagName("div");
    alert(div.length);
    
    //3....getElementsByName 根据name属性值获取多个元素对象
    let username= document.getElementsByName("usernmae")
     alert(username.length);

     //4......getElementsByClassName 根据class属性值获取多个元素
   let cls = document.getElementsByClassName("div3");
   alert(cls.length);

    //5........子元素对象.parentElement属性 获取子元素的上一级父元素
        let body = id.parentElement;
        alert(body);








        //1----------------------------
        //元素增删改操作 都是用父元素进行操作
        //createElement 添加元素
       let option= document.createElement("option");
       //innerText 即元素进行添加文本
       option.innerText="百里玄策";

    //    //先获取父类元素对象
      let select =document.getElementById("s")
    //   //其次调用appendChild 方法将创建好的标签加入父元素内
      select.appendChild(option)

    //   //getElementById 删除元素,参数为被删除元素的标签,使用父元素进行操作
      let dele =document.getElementById("o")
      select.removeChild(dele)

      let option= document.createElement("option");
       //innerText 即元素进行添加文本
       option.innerText="阿古朵";

       //replaceChild替换元素,参数一为新.二为旧
        select.replaceChild(option,dele)
</script>
</html>

DOM----属性以文本的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性的演示</title>
    <style>
        .acolor{
                color: blue;
        }
    </style>

</head>
<body>
    
    <a>超链接标签</a>

    <!-- 演示添加文本内容 -->
    <div id = "d"></div>
</body>

<script>
    //getElementsByTagName 根据标签名获取元素对象,因为此方法返回值类型为数组,
    //而明知元素只有一个,可以在其后面加所以取出
    //setAttribute 调用此方法获取设置属性,参数一为属性名称,参数二为属性值
   let a= document.getElementsByTagName("a")[0]
   a.setAttribute("href","https://baidu.com")

   //getAttribute 方法根据属性获取值
   let resule =a.getAttribute("href")
   alert(resule)

   //removeAttribute 根据属性名移除相关属性
   a.removeAttribute("href")
    
   //style添加指定样式.后面跟具体添加的样式=后跟属性值
  a.style.color="green"
   
   //classname 添加指定样式,比style更加灵活
   a.className="acolor"




    //文本内容的添加
    ///现获取元素的对象
    let id = document.getElementById("d")
    //innerText 方法添加文本内容,但不能解析标签
    id.innerText="王者荣耀"
    //innerHTML 方法添加上内容且能解析标签
    id.innerHTML="<b>王者荣耀</b>"
</script>
</html>

事件的演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的呃呃演示</title>
</head>
<body>
    
    <img id="img" src="E:/bizhi/1.jpg">
    <br>
    <!-- 方式一设置单击事件
    <button id = "up" οnclick="up()">上一张</button>
    <button id = "down" οnclick="down()">下一张</button> -->

    方式二获取单击事件
    <button id = "up" >上一张</button>
    <button id = "down">下一张</button> -->
</body>

    <script>
        
      function up(){
          //获取img元素对象
         let img= document.getElementById("img")
         img.setAttribute("src","E:/bizhi/1.jpg")
      }
      function down(){
          //获取img元素对象
         let img= document.getElementById("img")
         img.setAttribute("src","E:/bizhi/2.jpg")
      }


      //方法二获取单击事件
      //即获取元素对象,在调用onclick单击事件方法,并将其等于写好的方法.且可以省略小括号
      document.getElementById("up").onclick=up;
      document.getElementById("down").onclick=down;
    </script>
</html>

综合案例表格添加、删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例二</title>

    <!-- //样式控制 -->
    <style>
        table{
            border: 1px solid green;
            margin: auto;
            width: 50%;
        }

        th,td{
            border: 1px solid green;
            text-align: center;
        }

        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="name" placeholder="请输入名字" autocomplete="off">
        <input type="text" id="age" placeholder="请输入年龄" autocomplete="off">
        <input type="text" id="gender" placeholder="请输入性别" autocomplete="off">
        <input type="button" id="add" value="添加">
    </div>

    <table id="td">
        <caption>信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>杨玉环</td>
            <td>22</td>
            <td>女</td>
            <td><a href="JavaScript:void(0);" onclick="dele(this)">删除</a></td>
        </tr>

        
        <tr>
            <td>貂蝉</td>
            <td>22</td>
            <td>女</td>
            <td><a href="JavaScript:void(0);" onclick="dele(this)" >删除</a></td>
        </tr>

    </table>
</body>

    <script>
      
    document.getElementById("add").onclick=function(){
  //创建一行四列
  let tr =document.createElement("tr")
       let tdname =document.createElement("td")
       let tdage =document.createElement("td")
       let tdgender =document.createElement("td")
       let tddelete =document.createElement("td")

       //将td添加到tr中
       tr.appendChild(tdname)
       tr.appendChild(tdage)
       tr.appendChild(tdgender)
       tr.appendChild(tddelete)

       //获取表数据
     let textname = document.getElementById("name").value
     let textage = document.getElementById("age").value
     let textgender = document.getElementById("gender").value

     //获取文本对象
    let resultname = document.createTextNode(textname)
    let resultage = document.createTextNode(textage)
    let resulgender = document.createTextNode(textgender)

    //将文本对象添加到表格内
    tdname.appendChild(resultname)
    tdage.appendChild(resultage)
    tdgender.appendChild(resulgender)

    //创建删除标签
    let a = document.createElement("a")
    //创建属性
    a.setAttribute("href","JavaScript:void(0);")
    //创建删除文本对象
    let text= document.createTextNode("删除")
    //添加属性,即自定义输入删除
    a.setAttribute("onclick","dele(this)")
    //添加进a标签
    a.appendChild(text)
    //a标签添加进td
    tddelete.appendChild(a)
    //获取table对象,并将tr添加进去
    let table= document.getElementById("td")
    table.appendChild(tr)
    }

    //删除操作
    //已知a超链接距离table有三层,即td,tr,table
    function dele(obj){
        //连续调用三刺,即到达table
      let table = obj.parentElement.parentElement.parentElement
      //连续调用三次,即到tr
      let tr = obj.parentElement.parentElement
      //
      table.removeChild(tr)
    }
    </script>
</html>