JavaScript与DOM的奇妙探险:从入门到精通的实战笔记

文章目录

  • JavaScript
  • 基本说明
  • 特点
  • 两种使用方式
    • 在script中写
    • 使用script标签引入JS文件
  • 数据类型
    • 介绍
    • 特殊值
  • 运算符
    • 算数运算符
    • 赋值运算符
    • 逻辑运算符:![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/bbf5c150699845af837d3c45c926e941.png)
    • 条件运算符
  • 数组的定义
    • 基本使用
    • 数组的遍历
  • 函数
    • 含义
    • 函数定义方式
      • 基本语法
      • 代码示例
    • 细节和注意事项
  • 自定义对象
    • Object形式
    • {} 形式
  • 事件
    • 介绍
    • 事件一览表
    • 事件分类
    • 事件的注册
    • 静态注册事件
    • 动态注册事件
            • 动态事件注册的步骤
    • onload加载完成事件
    • onclick单击事件
    • onblur失去焦点事件
    • onchange 内容改变事件
    • onsubmit事件
  • dom
    • 介绍及其分类
  • HTML DOM
    • 介绍
    • document 对象
      • 说明
      • 对象方法一览
  • HTML DOM结点
    • 介绍
        • 在 HTMLDOM中,每个部分都是节点:
        • 节点常用方法
        • 节点常用属性

在现代Web开发中,JavaScript与DOM(文档对象模型)是每个开发者必不可少的工具和技能。无论你是刚踏入前端开发领域的新手,还是希望深入了解并掌握高级技巧的经验丰富者,这篇笔记都会为你提供宝贵的指导。本文将带你全面了解JavaScript与DOM的关键概念、基本操作和高级应用,帮助你在开发过程中游刃有余,创造出更加动态和交互性强的网页。
参考学习:JavaScript 教程 (w3school.com.cn)

JavaScript

基本说明

JavaScript 能改变 HTML 内容,能改变 HTML 属性,能改变 HTML 样式 (CSS),能完成 页面的数据验证。

特点

  1. JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序 的运行过程中逐行进行解释

  2. JavaScript是一种基于对象的脚本语言,可以创建对象,也能使用现有的对象(有对象)。

  3. JavaScript是弱类型的,对变量的数据类型不做严格的要求,变量的数据类型在运行过程 可以变化。
    代码示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>JavaScript 是弱类型的</title>
    <!-- 案例演示 -->
    <!--
    解释
    1. js 代码可以写在 script 标签中
    2. type="text/javascript" 表示这个脚本(script)类型是 javascript
    3. type="text/javascript" 可以不写,但是建议写上
    4. js 语句可以不写 ; 建议写上
    5. var -->
    <script type="text/javascript">
    // 弱类型
    // var name = "haha";
    // 输出 alert() 使用弹框方式
    // 输出 console.log() 在调试输出
    // alert("name=" + name);
    // 输出变量的类型 typeof, 输出变量的类型
    // alert(typeof name);
    // name = 100; //给 name 重新赋值
    // alert(typeof(name)); // 类型 number
    var age = 10; // 数值
    console.log("age=" + age);
    console.log(typeof age);
    age = "北京";
    console.log("age=" + age);
    console.log(typeof age);
    // 那如果输出字符串 + 数字的话会把数字转成 string 吗
    var n = 123 + "abc";
    console.log(n);
    console.log(typeof n);
    </script>
    </head>
    <body>
    </body>
    </html>
    

    在这里插入图片描述

  4. 跨平台性(只要是可以解释 JS 的浏览器都可以执行,和平台无关)

两种使用方式

  1. 在script中写

    1. 代码示例:

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>script 标签中写 JS 代码</title><!-- 解读1. 可以在 head 和 body 嵌入 script2. 执行顺序从上到下3. 建议放在 head --><script type="text/javascript">// 在 head 内使用 script 写 jsconsole.log("ok");</script></head><body><script type="text/javascript">// 在 body 内使用 script 写 jsconsole.log("hi");</script></body></html>
        

      在这里插入图片描述

  2. 使用script标签引入JS文件

    1. 代码示例:

      创建两个文件:test.js和js-use.html

      test.js:
      ---------------------------------------------------------------------------------------------------------------------
      alert("我是test.js文件");
      
      js-use.html:
      --------------------------------------------------------------------------------------------------------------
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>使用 script 标签引入 JS 文件</title>
      <!--
      <script type="text/javascript" src="引入的js文件"></script>
      -->
      <script type="text/javascript" src="./.idea/test.js"></script>
      </head>
      <body>
      </body>
      </html>
      

    在这里插入图片描述

数据类型

  1. 介绍

    1. 数值类型 number
    2. 字符串类型 string
    3. 对象类型 object
    4. 布尔类型 boolean
    5. 函数类型 function
  2. 特殊值

    1. undefined 变量未赋初始值时,默认undefined

    2. null 控制

    3. NAN Not a Number 非数值

    4. 代码示例:

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>数据类型-特殊值</title>
      </head>
      <body>
      <script type="text/javascript">
      // 说明:
      // 1. typeof() 是 JavaScript 语言提供的一个函数。
      // 2. 返回变量的数据类型
      // 3. 3 个特殊值:undefined(没有赋值就使用)、null、NaN(当不能识别类型)
      var email; // 特殊值 undefined
      console.log("email=" + email); // undefined
      var address = null; // 特殊值 null
      console.log("address=" + address); // null
      console.log(10 * "abc"); // NaN (Not a Number)
      </script>
      </body>
      </html>
      

      在这里插入图片描述

运算符

  1. 算数运算符

在这里插入图片描述

  1. 赋值运算符

在这里插入图片描述

注意事项

  1. 等于: == 是简单的做字面值的比较

  2. 全等于:===除了做字面值的比较之外,还会比较两个变量的数据类型

  3. 逻辑运算符:在这里插入图片描述

      1. 注意事项

      2. 在 JavaScript 语言中,所有的变量,都可以做为一个 boolean 类型的变量去使用

      3. 0 、null、 undefined、“”(空串) 都认为是 false

      4. 遵守短路与的机制

      5. 代码示例:

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>逻辑运算符注意事项和使用细节</title>
        <script type="text/javascript">
        // 1. 在 JavaScript 语言中,所有的变量,都可以作为一个 boolean 类型的变量去使用。
        // 体会:js 语法是比较松散的。
        var name = "cong";
        var age = 800;
        var n1 = null;
        if (!n1) {alert("hi~");
        }
        // 2. 0、null、undefined、""(空串)、NaN 都认为是 false
        var address; // undefined
        if (!(100 * "hello")) {alert("ok~~");
        }
        // 3. && 且运算,有两种情况 => 解读(&& 返回值是遵守短路与的机制)
        var res1 = null && 800;
        alert("res1=" + res1);
        var res2 = "cong" || 800;
        // 4. || 或运算,有两种情况 => 解读(|| 返回值是遵守短路或的机制)
        alert("res2=" + res2);
        // 小练习
        var res3 = (10 + 1) || (6 < 0);
        alert("res3=" + res3); // 11
        // 5. && 运算和 || 运算有短路现象
        var n1 = 1;
        var n2 = 3;
        var res4 = (n1++ > 100) || n2++;
        alert("n1=" + n1 + " n2=" + n2);
        </script>
        </head>
        <body>
        </body>
        </html>
        

        在这里插入图片描述

  4. 条件运算符

    1. 代码示例:

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>条件运算符</title><script type="text/javascript">// 1. 规则:如果 (10 > 1) 条件表达式为 T,返回第一个表达式的值//    条件表达式为 F,返回第 2 个表达式的值// 2. 看出 js 使用比较灵活var n1 = 90;var n2 = 1;var res = n2 > 9 ? "cong" + "你好" : 800 + n1;alert("res=" + res);</script></head><body></body></html>
        

      在这里插入图片描述

数组的定义

  1. 基本使用

    1. 代码示例:

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>数组定义</title><script type="text/javascript">// "Audi", "BMW", "Volvo";// 数组定义方式1var cars1 = ["Audi", "BMW", "Volvo"];console.log("cars1=" + cars1);console.log(cars1[1]); // 表示访问 cars1 数组的第 2 个元素, 1 表示下标/索引,从 0 开始编号// 数组定义方式2var cars2 = []; // 空数组// 添加元素cars2[0] = "奥迪";cars2[1] = "宝马";cars2[2] = "奔驰";console.log("cars2=" + cars2);console.log("cars2[2]=" + cars2[2]); // 奔驰console.log("cars2[10]=" + cars2[10]); // 如果该元素不存在,返回的就是 undefined// 数组定义方式3var cars3 = new Array("Audi", "BMW", "Volvo");console.log("cars3=" + cars3);console.log("cars3[0]=" + cars3[0]); // Audi// 数组定义方式4var cars4 = new Array(); // 空数组console.log(typeof cars4);cars4[0] = "法拉利";cars4[1] = "保时捷";cars4[2] = "yy"; // 相当于是给数组扩容cars4[0] = "zz"; // 替换cars4[8] = "红旗"; // 扩容, 如果是跳过了下标给赋值,那么中间没有赋值的元素为 undefined或逗号console.log("cars4[3]=" + cars4[3]); // undefinedconsole.log("cars4=" + cars4);</script></head><body></body></html>
        

      在这里插入图片描述

  2. 数组的遍历

    1. 代码示例:

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>数组使用和遍历</title>
      <script type="text/javascript">
      var cars = ["Audi", "BMW", "Volvo", 100, 1.1, true];
      // 遍历
      console.log("数组的长度= " + cars.length); // 6
      for (var i = 0; i < cars.length; i++) {console.log(cars[i]); // log 方法会自动换行
      }
      </script>
      </head>
      <body>
      </body>
      </html>
      

在这里插入图片描述

函数

  1. 含义

    1. 函数是由事件驱动的,或者当它被调用时,执行的可重复使用的代码块

      1. 代码示例:

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>函数快速入门</title>
        <script type="text/javascript">
        // 定义一个简单的函数
        // 解读:如果不调用函数,那么该函数是不会执行的
        function hi() {// 在 js 中如果要执行函数,有两种方式 1. 主动调用 hi(); 2. 通过事件去触发该函数alert("hi cong~");
        }
        </script>
        </head>
        <body>
        <!-- 这里表示给 button 绑定了 onclick 事件 -->
        <!-- 当用户点击了该 button,就会触发 hi() 函数 -->
        <button onclick="hi()">点击这里</button>
        </body>
        </html>
        

      在这里插入图片描述

  2. 函数定义方式

    1. 基本语法

      1. function 函数名(形参列表){
        函数体
        return 表达式

        }//调用 函数名(实参列表);

    2. 代码示例

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>使用函数方式1</title><script type="text/javascript">// 定义没有返回值的函数function f1() {alert("f1() 被调用...");}f1();// 定义有形参的函数// 这里的形参不需要指定类型,name 的数据类型是由实参决定function f2(name) {alert("hi " + name);}f2("cong");// 定义有形参和返回值的函数,不需要指定返回类型,返回类型由返回的数据来决定// js 的函数调用机制和 java 一样function f3(n1, n2) {return n1 + n2;}alert("f3(10, 20)=" + f3(10, 20));</script></head><body></body></html>
        

      在这里插入图片描述

  3. 细节和注意事项

    1. JS中函数的重载会覆盖掉上一次的定义

    2. 函数的arguments隐形参数(作用域在function函数内)

      1. 隐形参数:在function函数中不需要定义,可以直接用来获取所有参数的变量。
      2. 隐形参数特别像java的可变参数一样。publicvoidfun(int…args)
      3. js中的隐形参数跟java的可变参数一样。操作类似数组
    3. 应用示例:

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>函数使用注意事项和细节</title>
      <script type="text/javascript">
      // 1. JS 中函数的重载会覆盖掉上一次的定义
      // 解读
      // 1. JS 中函数的重载会覆盖掉上一次的定义
      // 2. 当你调用 f1() 时候其实调用的是 f1(name)
      // 3. 调用 f1(name) 如果你没有传入实参, 那么这个 name 就是 undefined// function f1() {
      // }// alert("ok jack~")// function f1(name) {
      // }// f1();
      // alert("hi " + name);// 2. 函数的 arguments 隐形参数(作用域在 function 函数内)
      // (1) 隐形参数: 在 function 函数中不需要定义,可以直接用来获取所有参数
      // (2) 隐形参数特别像 java 的可变参数一样。 public void fun(int ... args)
      // (3) js 中的隐形参数跟 java 的可变参数一样,操作类似数组function f2() {// 遍历函数的 arguments 隐形参数// arguments 是数组// 提示:如果我们希望通过 console.log 输出对象的数据,使用 , 连接而不是 +console.log("arguments= ", arguments);console.log("arguments 长度= " + arguments.length);alert("f2()...");
      }
      f2(10, 20, 30, "cong");// 3. (1) 如果我们的函数有形参,在传入实参的时候,仍然按照顺序匹配
      //    (2) 如果有匹配上,就赋给它,如果没有匹配上,也无所谓
      //    (3) 仍然会把所有的实参,赋给 arguments
      //    (4) 如果形参个数大于了实参个数,则该形参的值为 undefinedfunction f3(n) {console.log("n=" + n); // 100console.log("arguments= ", arguments); // [100, 90, 20]
      }
      f3(100, 90, 20);</script>
      </head>
      <body>
      </body>
      </html>
      

      在这里插入图片描述

自定义对象

  1. Object形式

    1. 定义

      1. var对象名=newObject();//对象实例(空对象)
        对象名.属性名=值;//定义一个属性
        对象名.函数名=function(){}//定义一个函数
    2. 对象的访问

      1. 对象名.属性
      2. 对象名.函数名();
    3. 应用示例:

      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8">
      <title>自定义对象</title>
      <script type="text/javascript">
      // 自定义对象的方式1
      // person 是一个空对象,没有自定义的函数和属性
      var person = new Object();
      // 增加一个属性 name
      console.log("person 类型=" + typeof(person)); // object
      person.name = "cong";
      // 增加一个属性 age
      person.age = 20;
      // 增加函数
      person.say = function() {// 这里的 this 就是 personconsole.log("person 的信息 " + this.name + " " + this.age + " " + this.job);
      }
      // 调用
      // 访问属性
      console.log("name= " + person.name + " " + person.email);
      // 访问方法
      person.say();
      console.log("address= " + person.address);
      </script>
      <!-- 小细节, 如果没有定义属性,直接使用,就会出现变量提升,显示 undefined -->
      </head>
      <body>
      </body>
      </html>
      

    在这里插入图片描述

  2. {} 形式

    1. 定义
      var对象名={ 属性名:值,//定义属性
      属性名:值,//定义属性,注意有,号
      函数名:function(){}//定义函数
      };

    2. 对象访问

      1. 对象名.属性
      2. 对象名.函数名();
    3. 代码示例:

      <!DOCTYPE html>
      <html lang="en">
      <head><meta charset="UTF-8"><title>自定义对象方式2{} 形式</title><script type="text/javascript">// 演示自定义对象方式2{} 形式var person = {name: "cong", // 说明多个属性和函数之间,使用 , 隔开age: 20,hi: function() {console.log("person 信息= " + this.name + " " + this.age);},sum: function(n1, n2) {return n1 + n2;}}// 使用console.log("外部访问 name=" + person.name + " age=" + person.age);person.hi();console.log("sum=" + person.sum(10, 30));</script>
      </head>
      <body>
      </body>
      </html>
      

    在这里插入图片描述

事件

学习文档:JavaScript 事件 (w3school.com.cn)

  1. 介绍

    1. 事件是电脑输入设备与页面进行交互的响应
    2. 事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行
  2. 事件一览表

    1. 属性当以下情况发生时,出现此事件
      onabort图像加载被中断
      onblur元素失去焦点
      onchange用户改变域的内容
      onclick鼠标点击某个对象
      ondblclick鼠标双击某个对象
      onerror当加载文档或图像时发生某个错误
      onfocus元素获得焦点
      onkeydown某个键盘的键被按下
      onkeypress某个键盘的键被按下或按住
      onkeyup某个键盘的键被松开
      onload某个页面或图像被完成加载
      onmousedown某个鼠标按键被按下
      onmousemove鼠标被移动
      onmouseout鼠标从某元素移开
      onmouseover鼠标移到某元素之上
      onmouseup某个鼠标按键被松开
      onreset重置按钮被点击
      onresize窗口或框架被调整尺寸
      onselect文本被选定
      onsubmit提交按钮被点击
      onunload用户退出页面
  3. 事件分类

    1. 事件的注册

      1. 事件注册(绑定):当事件响应(触发)后要浏览器执行哪些操作代码,叫事件注册或事件绑定
    2. 静态注册事件

      1. 通过 html 标签的事件属性直接赋于事件响应后的代码,这种方式叫静态注册
    3. 动态注册事件

      1. 通过 js 代码得到标签的 dom 对象,然后再通过 dom 对象.事件名 =function(){} 这种形 式叫动态注册

        1. 动态事件注册的步骤
          1. 代码示例:

            <!DOCTYPE html>
            <html lang="en">
            <head>
            <meta charset="UTF-8">
            <title>onload 加载完成事件</title>
            <script type="text/javascript">
            // 定义了一个函数
            function sayOK() {alert('静态注册 onload 事件 sayOK');
            }
            // 1. 在 js 中,将页面窗口映射成 window 对象
            // 2. window 对象有很多的函数和属性,可以使用
            // 3. window.onload 表示页面被加载完毕
            // 4. 后面的 function (){} 表示加载完毕后,要执行的函数/代码
            // 5. 多说一句
            window.onload = function () {alert("动态注册 onload 事件");
            }
            </script>
            </head>
            <!-- 静态注册 -->
            <body>
            hello~
            <input type="text" value="测试"/>
            </body>
            </html>
            

          在这里插入图片描述

    4. onload加载完成事件

      1. 代码示例:

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>onload 加载完成事件</title>
        <script type="text/javascript">
        // 定义了一个函数
        function sayOK() {alert('静态注册 onload 事件 sayOK');
        }
        // 1. 在 js 中,将页面窗口映射成 window 对象
        // 2. window 对象有很多的函数和属性,可以使用
        // 3. window.onload 表示页面被加载完毕
        // 4. 后面的 function (){} 表示加载完毕后,要执行的函数/代码
        // 5. 多说一句
        window.onload = function () {alert("动态注册 onload 事件");
        }
        </script>
        </head>
        <!-- 静态注册 -->
        <body>
        hello~
        <input type="text" value="测试"/>
        </body>
        </html>
        

        在这里插入图片描述

    5. onclick单击事件

      1. 代码示例:

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>onclick 单击事件</title>
        <script type="text/javascript">
        function sayOK() {alert("你点击了 sayOK 按钮");
        }
        //当页面加载完毕后,我们再进行动态绑定
        //基本概念和机制一定要清楚
        window.onload = function () {// 动态注册 onclick 事件//1. 先拿到 id=btn01 的 button 对应dom对象//2. 通过 dom对象动态的绑定onclick事件//3. 通过document 的 getElementById 获取对应的dom对象// 挖坑~填坑var btn01 = document.getElementById("btn01");btn01.onclick = function () {alert("你点击了 sayHi 按钮");}
        }
        </script>
        </head>
        <body>
        <!--静态注册 onClick 事件-->
        <button onclick="sayOK()">sayOK 按钮</button>
        <button id="btn01">sayHi 按钮</button>
        </body>
        </html>
        

        在这里插入图片描述

    6. onblur失去焦点事件

      1. 代码示例:

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>onblur 失去焦点事件</title>
        <script type="text/javascript">
        //静态绑定
        function upperCase() {//1. 先得到fname 输入框的value -> 得到对应dom对象//toUpperCase()是将字符串大写var fname = document.getElementById("fname");fname.value = fname.value.toUpperCase();//将其之后返回原来的变量
        }
        //在页面加载完毕,完成动态绑定
        window.onload = function () {//1.得到 fname2 的 dom对象var fname2 = document.getElementById("fname2");fname2.onblur = function () {fname2.value = fname2.value.toUpperCase();}
        }
        </script>
        </head>
        <body>
        输入英文单词:
        <input type="text" id="fname" onblur="upperCase()" /><br />
        输入英文单词:
        <input type="text" id="fname2" />
        </body>
        </html>
        

        在这里插入图片描述

    7. onchange 内容改变事件

      1. 代码示例:

        <!DOCTYPE html>
        <html lang="en">
        <head><meta charset="UTF-8"><title>onchange 内容发生改变事件</title><script type="text/javascript">function mySal() {alert("工资范围变化了~");}//动态注册window.onload = function () {//获取到 sel01 的 dom 对象var sel01 = document.getElementById("sel01");//给 sel01 绑定 onchange 事件sel01.onchange = function () {alert("你换女友了~");}}</script>
        </head>
        <body>
        你当前工资水平: <!--静态注册 onchange 事件-->
        <select onchange="mySal()"><option>--工资范围--</option><option>10k 以下</option><option>10k-30k</option><option>30k 以上</option>
        </select><br/>
        你当前女友是谁:
        <select id="sel01"><!--动态绑定 onchange--><option>---女友---</option><option>艳红</option><option>春桃</option><option>春花</option>
        </select>
        </body>
        </html>
        

      在这里插入图片描述

    8. onsubmit事件

      1. onsubmit:注册按钮被点击,提交表单

      2. 代码示例:

        <!DOCTYPE html>
        <html lang="en">
        <head>
        <meta charset="UTF-8">
        <title>onsubmit 表单提交事件</title>
        <script type="text/javascript">
        //静态注册表单提交事件
        function register() {//先得到输入的用户名和密码var username = document.getElementById("username");var pwd = document.getElementById("pwd");//判断是否为空""if ("" == username.value || "" == pwd.value) {alert("用户名和密码不能为空, 不能提交");return false; //不提交}//表示要提交return true;
        }
        //动态注册表单提交事件
        window.onload = function () {//使用折半法, 观察原页面是否真的是最新的, 是不是修改的页面和访问的页面一致//得到 form2 表单 dom 对象var form2 = document.getElementById("form2");//给 form2 绑定 onsubmit 事件//解释 onsubmit 绑定的函数,会直接将结果(f,t)返回给onsubmitform2.onsubmit = function () {if(form2.username.value == "" || form2.pwd.value == "") {alert("用户名和密码不能为空, 不能提交");return false; //不提交}return true;}
        }
        </script>
        </head>
        <body>
        <h1>注册用户1</h1> <!-- 静态注册表单提交事件-->
        <form action="1.txt" onsubmit="return register()">u: <input type="text" id="username" name="username"/><br/>p: <input type="password" id="pwd" name="pwd"/><br/><input type="submit" value="注册用户"/>
        </form>
        <h1>注册用户2</h1> <!-- 动态注册表单提交事件-->
        <form action="1.txt" id="form2">u: <input type="text" name="username"/><br/>p: <input type="password" name="pwd"/><br/><input type="submit" value="注册用户"/>
        </form>
        </body>
        </html>
        

        在这里插入图片描述


dom

参考文档:JavaScript HTML DOM (w3school.com.cn)

  1. 介绍及其分类

    1. dom是全称是文档对象模型,就把文档中的标签,属性,文本转化为对象来管理

    2. dom

      1. html dom(重点)
      2. css dom
      3. xml dom
  2. HTML DOM

    1. 介绍

      1. 当网页被加载时,浏览器会创建页面的文档对象模型(DocumentObjectModel)。
      2. HTML DOM 树 对象[属性,方法/函数]
        在这里插入图片描述
    2. document 对象

      1. 说明

        1. document 它管理了所有的 HTML 文档内容
        2. document 它是一种树结构的文档
        3. 有层级关系 在dom 中把所有的标签 都 对象化 (得到这个html标签的<—>对象–> 操作)
        4. 通过 document 可以访问所有的标签对象
      2. 对象方法一览

        1. 在这里插入图片描述

        2. 代码示例

          <!DOCTYPE html>
          <html lang="en">
          <head><meta charset="UTF-8"><title>getElementById 的使用</title><!--1.先得到h1的dom对象,通过id获取2.对h1对应的dom对象操作即可--><script type="text/javascript">// function getValue() {// myHeader 就是 dom对象var myHeader = document.getElementById("myHeader");// alert(myHeader);//HTMLHeadingElement// 解读 myHeader.innerText 获取到 myHeader的包含的文本// 看看 innerText , innerHTML// alert(myHeader.innerText); // 文本 cong// alert(myHeader.innerHTML); // html <div>cong</div>// }// 动态绑定,讲过老师,前面老师讲的 js 事件章节// 为了让小伙伴,听得明白一点,快速演示->回去看 js 事件window.onload = function () {// 1. 获取 myHeader 的 dom 对象var myHeader = document.getElementById("myHeader");// 2. 给 myHeader 绑定 onclick 的事件myHeader.onclick = function () {alert("动态绑定 内容是=" + myHeader.innerText);}}// 理解了基本原理,其它的问题就是 API 层级</script>
          </head>
          <body><!-- 静态绑定一个点击事件 --><h1 id="myHeader"><div>cong</div></h1><p>Click on the header to alert its value</p>
          </body>
          </html>
          

          在这里插入图片描述

  3. HTML DOM结点

    1. 介绍

      1. 在 HTMLDOM中,每个部分都是节点:
        1. 文档本身是文档节点
        2. 所有 HTML 元素是元素节点
        3. 所有 HTML 属性是属性节点
        4. HTML 元素内的文本是文本节点
        5. 注释是注释节点
      2. 节点常用方法
        1. 通过具体的元素节点调用 getElementsByTagName() 方法,获取当前节点的指定标签名孩子节点
        2. appendChild( oChildNode ) 方法,可以添加一个子节点,oChildNode 是要添加的孩子节点
      3. 节点常用属性
        1. childNodes 属性,获取当前节点的所有子节点
        2. firstChild 属性,获取当前节点的第一个子节点
        3. lastChild 属性,获取当前节点的最后一个子节点
        4. parentNode 属性,获取当前节点的父节点
        5. nextSibling 属性,获取当前节点的下一个节点 (后一个)
        6. previousSibling 属性,获取当前节点的上一个节点 (前一个)
        7. className 用于获取或设置标签的 class 属性值
        8. innerHTML 属性,表示获取/设置起始标签和结束标签中的内容
        9. innerText 属性,表示获取/设置起始标签和结束标签中的文本
      4. 代码示例:

        css.css文件
        ---------------------------------------------------------------------------------
        @CHARSET"UTF-8";
        body {width: 800px;margin-left: auto;margin-right: auto;
        }
        button {width: 200px;margin-bottom: 10px;text-align: left;
        }
        #btnList {float: left;
        }
        #total {width: 450px;float: left;
        }
        ul {list-style-type: none;margin: 0px;padding: 0px;
        }
        .inner li {border-style: solid;border-width: 1px;padding: 5px;margin: 5px;float: left;
        }
        .inner {width: 400px;border-width: 1px;margin-bottom: 10px;padding: 10px;float: left;
        }
        主页面
        ------------------------------------------------------------------------------------------------
        <!DOCTYPE html>
        <html>
        <head><meta charset="UTF-8"><title>演示 HTML DOM 相关方法</title><link rel="stylesheet" type="text/css" href="./css.css"/><script type="text/javascript">//使用动态注册/绑定来演示window.onload = function () {// 先获取btn01的domvar btn01 = document.getElementById("btn01");btn01.onclick = function () {// 查找id=java 节点var java = document.getElementById("java");alert("java 节点文本=" + java.innerText);};var btn02 = document.getElementById("btn02");btn02.onclick = function () {//查找所有option 节点// 梳理(id-->getElementById name-->getElementsByName 元素标签名->getElementsByTagName()var options = document.getElementsByTagName("option");alert(options); // object HtmlCollectionfor (var i = 0; i < options.length; i++) {alert("值= " + options[i].innerText);}};//查找 name=sport 的节点var btn03 = document.getElementById("btn03");btn03.onclick = function () {var sports = document.getElementsByName("sport");//NodeListfor (var i = 0; i < sports.length; i++) {//过滤if (sports[i].checked) {alert("运动是= " + sports[i].value);}}};//查找 id=language 下所有li 节点var btn04 = document.getElementById("btn04");btn04.onclick = function () {var lis = document.getElementById("language").getElementsByTagName("li");for (var i = 0; i < lis.length; i++) {alert(lis[i].innerText);//<li>xxx</li> <input value="xx"/>}};//返回 id=sel01 的所有子节点[3种方法]var btn05 = document.getElementById("btn05");btn05.onclick = function () {//var options = document.getElementById("sel01").getElementsByTagName("option");//alert(document.getElementById("sel01").childNodes.length);//11=>object text//解读//1. 如果使用 document.getElementById("sel01").childNodes 获取的是object text 和 object htmloptionelement//2. 如果不希望得到text 对象,需要将所有的内容放在一行var childNodes = document.getElementById("sel01").childNodes;for (var i = 0; i < childNodes.length; i++) {if (childNodes[i].selected) {alert(i + " " + childNodes[i].innerText);}}alert("======================================================");//还有一个以前方法//解读//1. sel01 是 HtmlSelectElement => 本身就有集合特点var sel01 = document.getElementById("sel01");for (var i = 0; i < sel01.length; i++) {alert(sel01[i].innerText);}};//返回 id=sel01 的第一个子节点var btn06 = document.getElementById("btn06");btn06.onclick = function () {//除了上面的方法外,还可以直接使用属性firstChildvar sel01 = document.getElementById("sel01");alert("xx=" + sel01.firstChild);//解读是按照 .childNodes 得到第一个子节点 //object textalert("yy=" + sel01[0]);// 直接是得到第一个 option 节点 object htmloptionelement};//返回 id=java 的父节点var btn07 = document.getElementById("btn07");btn07.onclick = function () {var java = document.getElementById("java");//alert(java.parentNode);// object HtmlUListElement.//alert(java.parentNode.innerHTML);////alert(java.parentNode.childNodes.length);//4var childNodes = java.parentNode.childNodes;for (var i = 0; i < childNodes.length; i++) {alert("语言= " + childNodes[i].innerText);//java php,c++ py,}};//返回 id=ct 的前后兄弟节点var btn08 = document.getElementById("btn08");btn08.onclick = function () {//yydsvar ct = document.getElementById("ct");alert(ct.previousSibling.innerText);//object text , 输出 undefinedalert(ct.previousSibling.previousSibling.innerText);//object htmloptionelement, 艳红alert(ct.nextSibling.nextSibling.innerText);//object HtmlOptionElement, 输出春花alert(ct.nextSibling.innerText);//object text, 输出 undefined};//设置#person 的文本域var btn10 = document.getElementById("btn10");btn10.onclick = function () {var person = document.getElementById("person");person.innerText = "这是我们最新的介绍";};};</script>
        </head>
        <body>
        <div id="total"><div class="inner"><p>你会的运动项目:</p><input type="checkbox" name="sport" value="tq">台球<hr/><input type="checkbox" name="sport" value="zq" checked="checked">足球<input type="checkbox" name="sport" value="ppq">乒乓球 <br/><p>你当前女友是谁:</p><select id="sel01"><option>---女友---</option><option>艳红</option><option id="ct" value="春桃菇凉">春桃</option><option>春花</option><option>桃红</option></select><hr/><p>你的编程语言?</p><ul id="language"><li id="java">Java~~~</li><li>PHP</li><li>C++</li><li>Python</li></ul><br><br><hr/><p>个人介绍:</p><textarea name="person" id="person">个人介绍</textarea></div>
        </div>
        <div id="btnList"><div><button id="btn01">查找 id=java 节点</button></div><div><button id="btn02">查找所有 option 节点</button></div><div><button id="btn03">查找 name=sport 的节点</button></div><div><button id="btn04">查找 id=language 下所有 li 节点</button></div><div><button id="btn05">返回 id=sel01 的所有子节点</button></div><div><button id="btn06">返回 id=sel01 的第一个子节点</button></div><div><button id="btn07">返回 id=java 的父节点</button></div><div><button id="btn08">返回 id=ct 的前后兄弟节点</button></div><div><button id="btn09">读取 id=ct 的 value 属性值</button></div><div><button id="btn10">设置#person 的文本域</button></div>
        </div>
        </body>
        </html>
        

        在这里插入图片描述


通过本文的学习,你已经掌握了JavaScript与DOM的核心知识和实用技巧。从基础的DOM操作到高级的事件处理和动画效果,你现在具备了将静态网页转变为动态、互动用户体验的能力。希望这篇笔记能成为你前端开发旅程中的一块基石,不仅提升你的技术水平,更激发你在实际项目中不断创新和挑战的热情。继续探索,编写更出色的代码,创造令人惊叹的Web应用吧!

文本来源:韩顺平java课程笔记

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/46941.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java_Docker

镜像和容器&#xff1a; 镜像仓库&#xff1a; 存储和管理镜像的平台&#xff0c;镜像仓库中有非常多常用软件的镜像&#xff0c;Docker官方维护了一个公共仓库​​​​​​:​Docker Hub 部署MySQL&#xff1a; docker run -d \--name mysql \-p 3306:3306 \-e TZAsia/Shang…

Guns v7.3.0:基于 Vue3、Antdv 和 TypeScript 打造的开箱即用型前端框架

摘要 本文深入探讨了Guns v7.3.0前端项目&#xff0c;该项目是基于Vue3、Antdv和TypeScript的前端框架&#xff0c;以Vben Admin的脚手架为基础进行了改造。文章分析了Guns 7.3.0的技术特点&#xff0c;包括其使用Vue3、vite2和TypeScript等最新前端技术栈&#xff0c;以及提供…

如何防止热插拔烧坏单片机

大家都知道一般USB接口属于热插拔&#xff0c;实际任意带电进行连接的操作都可以属于热插拔。我们前面讲过芯片烧坏的原理&#xff0c;那么热插拔就是导致芯片烧坏的一个主要原因之一。 在电子产品的整个装配过程、以及产品使用过程经常会面临接口热插拔或者类似热插拔的过程。…

IDEA的工程与模块管理

《IDEA破解、配置、使用技巧与实战教程》系列文章目录 第一章 IDEA破解与HelloWorld的实战编写 第二章 IDEA的详细设置 第三章 IDEA的工程与模块管理 第四章 IDEA的常见代码模板的使用 第五章 IDEA中常用的快捷键 第六章 IDEA的断点调试&#xff08;Debug&#xff09; 第七章 …

Redis的AOF持久化策略(AOF的工作流程、AOF的重写流程,操作演示、注意事项等)

文章目录 缓冲AOF 策略(append only file)AOF 的工作流程AOF 缓冲区策略AOF 的重写机制重写完的AOF文件为什么可以变小&#xff1f;AOF 重写流程 缓冲AOF 策略(append only file) AOF 的核心思路是 “实时备份“&#xff0c;只要我添加了新的数据或者更新了新的数据&#xff0…

问题:4、商业保险与政策性保险的主要不同之处是:经营主体不同、经营目标不同、承保机制不同。 #学习方法#其他#学习方法

问题&#xff1a;4、商业保险与政策性保险的主要不同之处是&#xff1a;经营主体不同、经营目标不同、承保机制不同。 参考答案如图所示

Linux云计算 |【第一阶段】ENGINEER-DAY3

主要内容&#xff1a; LVM逻辑卷管理、VDO、RAID磁盘阵列、进程管理 一、新建逻辑卷 1、什么是逻辑卷 逻辑卷&#xff08;Logical Volume&#xff09;是逻辑卷管理&#xff08;Logical Volume Management&#xff0c;LVM&#xff09;系统中的一个概念。LVM是一种用于磁盘管理…

【人工智能】机器学习 -- 贝叶斯分类器

目录 一、使用Python开发工具&#xff0c;运行对iris数据进行分类的例子程序NaiveBayes.py&#xff0c;熟悉sklearn机器实习开源库。 1. NaiveBayes.py 2. 运行结果 二、登录https://archive-beta.ics.uci.edu/ 三、使用sklearn机器学习开源库&#xff0c;使用贝叶斯分类器…

[React 进阶系列] useSyncExternalStore hook

[React 进阶系列] useSyncExternalStore hook 前情提要&#xff0c;包括 yup 的实现在这里&#xff1a;yup 基础使用以及 jest 测试 简单的提一下&#xff0c;需要实现的功能是&#xff1a; yup schema 需要访问外部的 storage外部的 storage 是可变的React 内部也需要访问同…

产品经理-工作中5大类技术名词解析(19)

在产品经理与开发的团队协作中,如果自己知道一些专业术语,对业务的开展是有帮助的&#xff0c;很多时候,在沟通过程当中,就是因为自己不懂,所以才不知道怎么去做,想要什么样的结果 在力所能及的情况下,平时,多了解一些专业术语,是有好处的 数据结构 数据结构是技术人员将数据进…

【iOS】static、extern、const、auto关键字以及联合使用

目录 前言extern关键字static关键字const关键字 联合使用static和externstatic和constextern和const auto关键字 先了解一下静态变量所在的全局/静态区的特点&#xff1a;【iOS】内存五大分区 前言 上面提到的全局/静态区中存放的是全局变量或静态变量&#xff1a; 全局变量…

人工智能大模型发展的新形势及其省思

作者简介 肖仰华&#xff0c;复旦大学计算机科学技术学院教授、博导&#xff0c;上海市数据科学重点实验室主任。研究方向为知识图谱、知识工程、大数据管理与挖掘。主要著作有《图对称性理论及其在数据管理中的应用》、《知识图谱&#xff1a;概念与技术》&#xff08;合著&a…

C++基础语法:STL之容器(5)--序列容器中的list(二)

前言 "打牢基础,万事不愁" .C的基础语法的学习 引入 序列容器的学习.以<C Prime Plus> 6th Edition(以下称"本书")内容理解 本书中容器内容不多只有几页.最好是有数据结构方面的知识积累,如果没有在学的同时补上 接上一篇C基础语法:STL之容器…

excel系列(三) - 利用 easyexcel 快速实现 excel 文件导入导出

一、介绍 在上篇文章中&#xff0c;我们介绍了 easypoi 工具实现 excel 文件的导入导出。 本篇我们继续深入介绍另一款更优秀的 excel 工具库&#xff1a;easyexcel 。 二、easyexcel easyexcel 是阿里巴巴开源的一款 excel 解析工具&#xff0c;底层逻辑也是基于 apache p…

HTTPS 的加密过程 详解

HTTP 由于是明文传输&#xff0c;所以安全上存在以下三个风险&#xff1a; 窃听风险&#xff0c;比如通信链路上可以获取通信内容。篡改风险&#xff0c;比如通信内容被篡改。冒充风险&#xff0c;比如冒充网站。 HTTPS 在 HTTP 与 TCP 层之间加入了 SSL/TLS 协议&#xff0c…

Spring Cloud LoadBalanced

负载均衡(Load Balance&#xff0c;简称 LB) 是⾼并发, ⾼可⽤系统必不可少的关键组件. 当服务流量增⼤时, 通常会采⽤增加机器的⽅式进⾏扩容, 负载均衡就是⽤来在多个机器或者其他资源中, 按照⼀定的规则合理分配负载. 负载均衡的⼀些实现 就像是eureka中对请求进行轮询的…

Java对象创建过程的解析

Java对象创建过程的解析 1. 类的加载与连接2. 内存分配2.1 分配方式2.2 本地线程缓冲分配&#xff08;TLAB&#xff09; 3. 初始化内存4. 设置对象头 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 对象的创建是一个涉及多个步骤的复杂过程…

Qt:26.Qt项目:贪吃蛇游戏

一、项目功能演示&#xff1a; 开始界面可以点击进入游戏。 点击进入游戏之后&#xff0c;切换到选项界面&#xff0c;该界面可以选择游戏难度&#xff0c;回退&#xff0c;以及查询最近一次游戏得分。 游戏具体界面如下。贴图啥的可以自己换&#xff0c;本人审美不咋行&#x…

[SUCTF 2019]EasySQL1

这是一个简单的SQL注入题&#xff0c;但是因为我的SQL基础约等于0&#xff0c;所以做起来很难。 首先试试引号是否被过滤 可以看到单引号、双引号都被过滤了&#xff0c;试试其他的盲注都不行&#xff0c;基本上可以确定不能用这种方法。 在测试的过程中发现&#xff0c;输入…

RICHTEK立锜科技 WIFI 7电源参考设计

什么是WIFI 7? WiFi 7&#xff08;Wi-Fi 7&#xff09;是下一代Wi-Fi标准&#xff0c;对应的是IEEE 802.11将发布新的修订标准IEEE 802.11be –极高吞吐量EHT&#xff08;Extremely High Throughput &#xff09;。Wi-Fi 7是在Wi-Fi 6的基础上引入了320MHz带宽、4096-QAM、Mu…