文章目录

• JavaScript
• 基本说明
• 特点
• 两种使用方式
• • 在script中写
  • 使用script标签引入JS文件
• 数据类型
• • 介绍
  • 特殊值
• 运算符
• • 算数运算符
  • 赋值运算符
  • 逻辑运算符：
  • 条件运算符
• 数组的定义
• • 基本使用
  • 数组的遍历
• 函数
• • 含义
  • 函数定义方式
  • • 基本语法
    • 代码示例
  • 细节和注意事项
• 自定义对象
• • 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是弱类型的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程 可以变化。
   代码示例：

   

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

两种使用方式

1. 在script中写

   1. 代码示例：

      

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

   1. 代码示例：

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

      test.js： --------------------------------------------------------------------------------------------------------------------- alert("我是test.js文件"); 

      js-use.html： --------------------------------------------------------------------------------------------------------------            

   

数据类型

1. 介绍

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

2. 特殊值

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

   2. null 控制

   3. NAN Not a Number 非数值

   4. 代码示例：

      

运算符

1. 算数运算符

2. 赋值运算符

注意事项

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

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

3. 逻辑运算符：

   1. 1. 注意事项

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

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

      4. 遵守短路与的机制

      5. 代码示例：

         

4. 条件运算符

   1. 代码示例：

      

数组的定义

1. 基本使用

   1. 代码示例：

      

2. 数组的遍历

   1. 代码示例：

函数

1. 含义

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

      1. 代码示例：

                   点击这里   

      

2. 函数定义方式

   1. 基本语法

      1. function 函数名（形参列表）{
         函数体
         return 表达式

         }//调用 函数名（实参列表）；

   2. 代码示例

      

3. 细节和注意事项

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

   2. 函数的arguments隐形参数（作用域在function函数内）

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

   3. 应用示例：

      

自定义对象

1. Object形式

   1. 定义

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

   2. 对象的访问

      1. 对象名.属性
      2. 对象名.函数名()；

   3. 应用示例：

   

2. {} 形式

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

   2. 对象访问

      1. 对象名.属性
      2. 对象名.函数名（）；

   3. 代码示例：

   

事件

学习文档：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. 代码示例：

                        hello~    

            

   4. onload加载完成事件

      1. 代码示例：

                  hello~    

         

   5. onclick单击事件

      1. 代码示例：

                  sayOK 按钮 sayHi 按钮   

         

   6. onblur失去焦点事件

      1. 代码示例：

                 输入英文单词： 
          输入英文单词：    

         

   7. onchange 内容改变事件

      1. 代码示例：

                             你当前工资水平：       --工资范围--     10k 以下     10k-30k     30k 以上 
          你当前女友是谁：      ---女友---     艳红     春桃     春花    

      

   8. onsubmit事件

      1. onsubmit：注册按钮被点击，提交表单

      2. 代码示例：

                 
         注册用户1
           
              u: 
              p: 
               
          
         注册用户2
           
              u: 
              p: 
               
            

         

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. 代码示例

                                                  
            cong
                 
            Click on the header to alert its value
               

            

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; } 主页面 ------------------------------------------------------------------------------------------------                          
              
                  
         你会的运动项目：
                  台球         
                  足球         乒乓球 
                  
         你当前女友是谁：
                               ---女友---             艳红             春桃             春花             桃红                  
                  
         你的编程语言?
                  
                      
         Java~~~
                      
         PHP
                      
         C++
                      
         Python
                  
                  
                  
                  
                  
         个人介绍:
                  个人介绍     
          
          
              
                  查找 id=java 节点     
              
                  查找所有 option 节点     
              
                  查找 name=sport 的节点     
              
                  查找 id=language 下所有 li 节点     
              
                  返回 id=sel01 的所有子节点     
              
                  返回 id=sel01 的第一个子节点     
              
                  返回 id=java 的父节点     
              
                  返回 id=ct 的前后兄弟节点     
              
                  读取 id=ct 的 value 属性值     
              
                  设置#person 的文本域     
          
            

         

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

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