JavaScript笔记_javascript 博客-CSDN博客

本文链接：https://blog.csdn.net/family168/article/details/141123714

主要组成

ECMAScript：定义了JavaScript语言的核心语法、类型、语句、关键字、保留字、操作符、全局对象和自动垃圾回收等。
文档对象模型（DOM）：提供了一种方式，允许JavaScript访问和操作网页的元素和属性。
浏览器对象模型（BOM）：允许JavaScript与浏览器交互，如窗口操作、导航、弹出窗口、浏览器信息等。

JavaScript（主要学习，为jquery做准备）

输入与输出

变量

<script>
       let age = 13//声明
		//var已废弃
</script>

数组

<script>
       let arr = [12,13,14]
</script>

常量

<script>
      const g=12//常量，值不可改变
</script>

模板字符串

运算符

分支语句

循环

<script>
    //while循环
    let i =10;
    while (true) {
         if(i<5){
            break;
        }
        alert(i);
        i--;
    }
    //for
    for (let i = 0; i < 3; i++) {
            alert(i)
            
        }
</script>

函数

对象

随机数

BOM

操作标签，网页内容的功能

组成部分（你就随便了解了解）

window 对象：BOM 的顶级对象，代表浏览器的窗口或标签页。它包含了许多属性和方法，用于与浏览器窗口进行交互。
location 对象：包含当前文档的 URL 信息，允许开发者获取和修改 URL。
history 对象：包含浏览器的历史记录，允许开发者添加、修改或删除历史记录。
navigator 对象：包含有关浏览器的信息，如浏览器名称、版本、操作系统等。
screen 对象：包含有关用户屏幕的信息，如分辨率、颜色深度等。
document 对象：DOM（文档对象模型）的核心对象，代表整个 HTML 文档，允许开发者访问和操作页面内容。
setTimeout() 和 setInterval()：用于设置定时器，执行延迟或周期性任务。
addEventListener() 和 removeEventListener()：用于添加和移除事件监听器。
alert(), confirm(), prompt()：用于显示对话框，与用户进行交互。
open(), close()：用于打开新窗口或关闭当前窗口。

window 对象（就了解，用的不多）

属性：
- window.name：设置或返回窗口的名称。
- window.location：包含当前页面的 URL 信息，可以进行页面导航。
- window.history：提供对浏览器历史记录的访问。
- window.document：代表当前窗口中的文档（DOM）。
- window.navigator：包含关于浏览器的信息。
- window.screen：包含有关用户屏幕的信息。
- window.scrollX 或 window.pageXOffset：获取当前页面的水平滚动位置。
- window.scrollY 或 window.pageYOffset：获取当前页面的垂直滚动位置。
- window.innerWidth 和 window.innerHeight：获取窗口的内部宽度和高度（不包括工具栏和滚动条）。
- window.outerWidth 和 window.outerHeight：获取窗口的外部宽度和高度（包括工具栏和滚动条）。
方法：（常用的我在后面标 #）
- window.alert()：显示带有指定消息和确定按钮的模态对话框。---------#
- window.confirm()：显示带有指定消息和两个按钮（确定/取消）的模态对话框，并返回用户的选择。---------#
- window.prompt()：显示带有输入字段和两个按钮（确定/取消）的模态对话框，并返回用户输入的值或 null。
- window.open()：打开一个新的浏览器窗口或标签页。
- window.close()：关闭由 window.open() 打开的窗口。
- window.setTimeout() 和 window.setInterval()：设置一个定时器，用于延迟或周期性地执行代码。
- window.clearTimeout() 和 window.clearInterval()：取消由 setTimeout() 或 setInterval() 设置的定时器。
- window.scrollTo() 和 window.scrollBy()：滚动文档到指定的位置。
- window.focus() 和 window.blur()：将焦点移至窗口或从窗口移除焦点。
- window.print()：打开浏览器的打印对话框。
- window.addEventListener() 和 window.removeEventListener()：添加或移除事件监听器。
事件：
- window.onload：当页面加载完成时触发。
- window.onunload：当页面被卸载时触发。
- window.onerror：当页面发生 JavaScript 错误时触发。
其他：
- window.console：提供控制台方法，如 console.log()、console.warn() 等，用于调试。
- window.performance：提供性能相关的信息，如计时器。
- window.sessionStorage 和 window.localStorage：提供客户端存储，用于保存页面会话或持久数据。

document 对象（重点会用，每个都要一两个）

访问和修改 HTML 元素：（随便记两个，我推荐前三个，）
- getElementById()：通过元素的 ID 获取元素。
- getElementsByClassName()：通过元素的类名获取元素集合。
- getElementsByName()方法返回一个HTMLCollection，其中包含具有给定name属性的所有元素。
- getElementsByTagName()：通过标签名获取元素集合。
- querySelector()：通过 CSS 选择器获取第一个匹配的元素。
- querySelectorAll()：通过 CSS 选择器获取所有匹配的元素集合。
创建新元素：
- createElement()：创建一个新的 HTML 元素。
创建文本节点：
- createTextNode()：创建一个新的文本节点。
插入、替换、删除元素：
- appendChild()：将一个节点添加到另一个节点的子节点列表中。
- replaceChild()：替换一个子节点。
- removeChild()：移除一个子节点。
- insertBefore()：在另一个节点的子节点列表中插入一个节点。
获取和设置元素内容：
- textContent：获取或设置元素的文本内容。
- innerHTML：获取或设置元素的 HTML 内容。
属性操作：
- getAttribute()：获取元素的属性值。
- setAttribute()：设置元素的属性值。
- hasAttribute()：检查元素是否具有指定的属性。
- removeAttribute()：移除元素的属性。
样式和类操作：（不重要）
- className：获取或设置元素的类名。
- classList：提供对元素类名列表的操作，如添加、移除、切换类。
- style：提供对元素样式的直接操作。
滚动和视口：-------（不重要）
- scrollTo()：滚动文档到指定的位置。
- scrollBy()：将文档滚动指定的距离。
- scroll()：滚动文档到指定的垂直和水平位置。
获取文档信息：----------（不重要）
- doctype：获取文档类型声明。
- documentElement：获取文档的根元素（通常是 <html>）。
- title：获取或设置文档的标题。
- URL 和 documentURI：获取文档的 URL。
- referrer：获取导致当前文档被访问的文档的 URL。
表单和输入：---------（不重要）
- forms：获取文档中的所有表单元素集合。
- activeElement：获取当前文档中获得焦点的元素。
事件：----------（不重要）
- addEventListener() 和 removeEventListener()：添加或移除事件监听器。
- dispatchEvent()：在文档上触发事件。
Cookie 操作（虽然不是 document 的直接属性，但通常通过 document.cookie 访问）：
- cookie：获取或设置文档的 Cookie。

location 对象

对当前页面 URL 的交互式访问和操作。

属性：-----------不重要（第一个）

location.href：返回当前页面的 URL。---------会用
location.search：返回 URL 的查询字符串部分（即 ? 后面的部分）。
location.pathname：返回 URL 的路径部分。
location.protocol：返回 URL 的协议部分（如 http: 或 https:）。
location.host：返回 URL 的主机名部分（如 example.com）。
location.hostname：返回 URL 的域名部分（不包括端口号）。
location.port：返回 URL 的端口号部分（如果有的话）。
location.origin：返回 URL 的源（协议 + 域名 + 端口），通常用于确定不同的页面是否来自同一个源。

方法：------不重要

location.assign(url)：加载新的文档。相当于点击链接或在地址栏输入 URL。
location.reload()：重新加载当前文档。可选地，可以传递一个布尔值参数来强制从服务器重新加载页面，而不是从缓存。
location.replace(url)：替换当前文档为新的 URL。与 assign() 不同，使用 replace() 后，当前页面不会保留在会话历史中，因此用户不能使用后退按钮返回到该页面。
location.toString()：返回当前页面的 URL，与 href 属性相同。

事件：

window.onpopstate：当历史记录的条目发生变化时触发，例如用户点击后退按钮或调用 history.popState()。

history 对象-----------不重要

允许 JavaScript 访问浏览器的历史记录，并且可以对历史记录进行操作。

属性：
- history.length：返回会话历史中的页面数量。
方法：
- history.go()：加载会话历史中某个具体位置的页面。如果没有指定参数，它将重新加载当前页面。
- history.back()：相当于 history.go(-1)，加载历史记录中的上一个页面。
- history.forward()：相当于 history.go(1)，加载历史记录中的下一个页面。
- history.pushState()：将一个新记录添加到会话历史中，允许你添加一个新页面到浏览器的历史记录，而不需要加载新页面。
- history.replaceState()：替换当前历史记录中的记录，允许你更改当前页面的历史记录条目，而不需要加载新页面。
事件：
- window.onpopstate：当 history 对象的 pushState() 或 replaceState() 方法被调用，或者用户点击浏览器的后退/前进按钮时触发。

DOM

DOM（Document Object Model，文档对象模型）是一个编程接口，它提供了一种方式来表示和操作HTML和XML文档。DOM将文档表示为一个由节点构成的树结构，每个节点可以是一个元素、属性、文本或注释。
组成构成：

文档（Document）：
- DOM树的根节点，代表整个HTML或XML文档。
- 通过document对象访问，是所有节点的父节点。
元素（Elements）：
- 代表HTML文档中的标签，如<div>, <p>, <span>等。
- 元素可以包含子元素、属性和文本。
属性（Attributes）：
- 元素的属性，如id, class, src等。
- 属性通常用于定义元素的样式、行为或内容。
文本（Text）：
- 元素内的文本内容。
- 文本节点通常包含可显示的文本或空白。
注释（Comments）：
- HTML或XML文档中的注释，不会在浏览器中显示。
文档类型（DocumentType）：
- 定义文档类型声明（DTD），如<!DOCTYPE html>。
- 它定义了文档的类型和版本。
节点（Nodes）：
- DOM中的任何对象，包括元素、属性、文本、注释等。
- 节点是DOM树中的一个单元，具有特定的属性和方法。
文档片段（DocumentFragment）：
- 一个轻量级的DOM节点，可以包含多个子节点。
- 常用于在不直接操作DOM的情况下构建节点集合。
实体引用（Entity Reference）：
- 代表HTML中的实体引用，如（非断行空格）。
CDATA节（CDATA Section）：
- 包含不应由浏览器解析的文本。
- 主要在XML中使用，HTML5中不推荐使用。
处理指令（Processing Instruction）：
- 包含XML文档中的处理指令，如<?xml-stylesheet?>。
样式（Styles）：
- 虽然不直接是DOM的一部分，但可以通过DOM操作元素的样式属性。
脚本（Scripts）：
- 虽然不直接是DOM的一部分，但JavaScript可以通过DOM API操作DOM。

访问节点--------会几个就可以了，推荐的加#

通过ID访问： ----------#

使用document.getElementById(id)方法可以访问具有特定ID的元素节点。
```
var element = document.getElementById('myId');
```
通过标签名访问：

使document.getElementsByTagName(tagName)方法可以访问具有特定标签名的所有元素节点。返回的是一个HTMLCollection。
```
var elements = document.getElementsByTagName('p');
```
通过类名访问： --------------#

使用document.getElementsByClassName(className)方法可以访问具有特定类名的所有元素节点。返回的是一个HTMLCollection。
```
var elements = document.getElementsByClassName('myClass');
```
通过选择器访问：使用document.querySelector(selector)方法可以访问与CSS选择器匹配的第一个元素节点。
```
var element = document.querySelector('.myClass#myId');
```
通过选择器访问多个节点：使用document.querySelectorAll(selector)方法可以访问与CSS选择器匹配的所有元素节点。返回的是一个NodeList。
```
var elements = document.querySelectorAll('.myClass');
```
通过属性访问：使用element.getAttribute(attributeName)方法可以访问元素的属性值。
```
var attributeValue = element.getAttribute('data-custom');
```
访问子节点：使用element.childNodes属性可以访问一个元素的所有子节点（包括文本节点和注释节点）。
```
var childNodes = element.childNodes;
```
访问第一个和最后一个子节点：使用element.firstElementChild和element.lastElementChild属性可以访问元素的第一个和最后一个子元素节点。
```
var firstChild = element.firstElementChild;
var lastChild = element.lastElementChild;
```
访问父节点：使用element.parentNode属性可以访问元素的父节点。
```
var parentNode = element.parentNode;
```
访问兄弟节点：使用element.nextSibling和element.previousSibling属性可以访问元素的下一个和上一个兄弟节点。
```
var nextSibling = element.nextSibling;
var previousSibling = element.previousSibling;
```
遍历DOM树：可以使用循环和其他DOM访问方法来遍历DOM树。

操作节点----------看着玩玩就行了

创建节点：使用document.createElement(tagName)创建一个新的元素节点。
```
var newElement = document.createElement('div');
```
创建文本节点：使用document.createTextNode(text)创建一个新的文本节点。
```
var newText = document.createTextNode('Hello, World!');
```
添加节点：使用parentNode.appendChild(node)将一个新节点添加到其父节点的子节点列表的末尾。
```
parentNode.appendChild(newElement);
```
插入节点：使用parentNode.insertBefore(newNode, referenceNode)在父节点中将一个新节点插入到指定的参考节点之前。
```
parentNode.insertBefore(newElement, referenceNode);
```
替换节点：使用oldNode.parentNode.replaceChild(newNode, oldNode)替换一个节点。
```
oldNode.parentNode.replaceChild(newElement, oldNode);
```
删除节点：使用parentNode.removeChild(node)从其父节点中删除一个节点。
```
parentNode.removeChild(oldNode);
```
克隆节点：使用node.cloneNode(deep)克隆一个节点。deep参数为true时，会克隆该节点及其所有子节点。
```
var clonedNode = node.cloneNode(true);
```
设置属性：使用element.setAttribute(name, value)为元素设置属性。
```
element.setAttribute('class', 'new-class');
```
获取属性：使用element.getAttribute(name)获取元素的属性值。
```
var className = element.getAttribute('class');
```
删除属性：使用element.removeAttribute(name)从元素中删除属性。
```
element.removeAttribute('class');
```

获取和设置样式：使用element.style.property获取或设置元素的内联样式。

element.style.color = 'red'; // 设置样式
var color = element.style.color; // 获取样式

获取子节点数量：使用element.children.length获取元素的子节点数量。
获取子节点：使用element.children[index]获取元素的特定子节点。
遍历子节点：使用循环遍历element.childNodes或element.children。

获取和设置内容：使用element.textContent获取或设置元素的文本内容，不包含HTML标签。

element.textContent = 'New text content'; // 设置文本内容
var textContent = element.textContent; // 获取文本内容

获取和设置HTML内容：使用element.innerHTML获取或设置元素的HTML内容，包含标签。

复制element.innerHTML = '<span>New HTML content</span>'; // 设置HTML内容
var htmlContent = element.innerHTML; // 获取HTML内容

操作样式------------不重要，有css

使用style属性

获取样式：

var element = document.getElementById('myElement');
var color = element.style.color; // 获取元素的color样式

设置样式：

element.style.color = 'blue'; // 设置文本颜色为蓝色
element.style.backgroundColor = 'yellow'; // 设置背景颜色为黄色
element.style.display = 'block'; // 设置元素显示为块级元素

删除样式：

element.style.color = ''; // 删除文本颜色样式
element.style.display = ''; // 删除display样式，返回到默认值

使用className

className属性用于获取或设置一个元素的类名。类名通常用于CSS中定义样式，或者通过JavaScript选择和操作具有特定类名的元素。

获取类名：

var element = document.getElementById('myElement');
var currentClassName = element.className; // 获取当前元素的类名

设置类名：

element.className = 'new-class'; // 设置新的类名

添加类名：

element.classList.add('additional-class'); // 添加一个类名，不会重复添加

移除类名：

复制
element.classList.remove('specific-class'); // 移除一个类名

切换类名：

复制
element.classList.toggle('toggleClass'); // 如果类名存在则移除，不存在则添加

检查类名：

复制
var hasClass = element.classList.contains('check-class'); // 检查是否含有特定类名

使用classList属性

classList属性提供了一组方法来添加、移除、切换和检查元素的类。

添加类：

element.classList.add('new-class'); // 添加新类

移除类：

element.classList.remove('remove-class'); // 移除指定类

切换类：

element.classList.toggle('toggle-class'); // 如果类存在则移除，不存在则添加

检查类是否存在：

var hasClass = element.classList.contains('check-class'); // 返回布尔值，检查类是否存在

替换类：

element.classList.replace('old-class', 'new-class'); // 替换类名

面向对象-----------和java一样

//正常定义一个类
var people={
    name : "zs",//属性
    age : 17,
    eat : function (){//方法
      console.log("吃")
    }
  }
//问题在于，如果有很多对象，需要写很多


//构造函数来实现
function people(name,age){
    this.name = name;
    this.age = age;
    this.eat = function (){
      console.log("吃")
    }
}
let p = new people('zs',12);//方便很多


//从ES6开始，JavaScript提供了class关键字，使得定义类变得更加简单和直观：
  class people{
      //私有属性
      #sex;
      //静态static 
    //构造函数
    constructor(name,age，sex) {
      this._name = name;
      this._age = age;
        this.#sex = sex;
    }
    //方法
    eat(){
      console.log("吃饭")
    }

      //get，set方法
    get name() {
      return this._name;
    }

    set name(value) {
      this._name = value;
    }

    get age() {
      return this._age;
    }

    set age(value) {
      this._age = value;
    }
  }