javascript笔记

最新推荐文章于 2024-09-28 00:15:00 发布
最新推荐文章于 2024-09-28 00:15:00 发布
阅读量899 收藏 8
点赞数 24
分类专栏： python武器库 web安全 文章标签： web安全
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45653478/article/details/137876859
版权

1 javaScript

JavaScript 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式（如函数式编程）范式。

以下是关于 JavaScript 的一些主要特点和用途：

  1. 浏览器交互：JavaScript 最初是为了在浏览器中实现交互效果而设计的。它可以响应用户的操作，如点击按钮、滚动页面等，然后动态地改变网页的内容或样式。

  2. 动态内容：通过使用 JavaScript，开发者可以动态地创建和修改网页内容，而无需重新加载整个页面。

  3. 与 HTML 和 CSS 的配合：JavaScript 通常与 HTML（网页结构）和 CSS（网页样式）一起使用，以创建丰富且交互式的网站和应用程序。

  4. 异步和事件驱动：JavaScript 支持异步编程，这意味着它可以处理不按照代码顺序发生的事件，如用户输入或网络请求。这使得 JavaScript 在处理实时数据或需要与用户进行频繁交互的场景中非常有用。

  5. Node.js：虽然 JavaScript 最初是为浏览器设计的，但现在它也可以在服务器端运行，这主要归功于 Node.js。Node.js 是一个开源的跨平台 JavaScript 运行环境，它使 JavaScript 能够用于开发服务器端应用程序和网络应用。

  6. 库和框架：JavaScript 有许多流行的库和框架，如 React、Angular 和 Vue.js（用于构建前端应用程序），以及 Express 和 Koa（用于构建后端应用程序）。这些库和框架提供了额外的功能和工具，帮助开发者更高效地创建复杂的 Web 应用程序。

  7. 跨平台性：随着 JavaScript 的发展，它现在也可以在桌面和移动应用程序中使用，通过 Electron 和 React Native 等技术。

2 javscript与渗透关系

对于渗透而言:读懂js的逻辑 1.JS文件泄露后台管理敏感路径及api(通过api构造上传) 2.页面内js泄露http-only 保护的cookie(起码国内反射XSS很可能给你驳回)前端开发者将http-only保护的cookie写在页面里 3.页面内js以及ajax请求泄露用户敏感信息(评论处)

3 javaSceipt组成

1、ECMAScript语法和基本对象（变量、函数、循环语句等语法) 2、DOM文档对象模型操作html和css的方法 3、BOM浏览器对象模型操作浏览器的一些方法

4 javascript三种引用方式

4.1 内联引用（Inline）：

这种方式直接将JavaScript代码写在HTML标签的事件属性中，例如点击我。每当事件被触发时，JavaScript代码就会被执行。然而，这种方式通常不推荐使用，因为它将JavaScript代码与HTML标记混合在一起，不利于代码的可读性和维护性。

4.2 内部引用（Internal）：

这种方式是在HTML文档的标签中直接编写JavaScript代码。通常，标签会被放置在HTML文档的部分或部分的底部。例如：

<script>  
    function sayHello() {  
        alert('Hello, World!');  
    }  
</script>

这种方式比内联引用更好，因为它将JavaScript代码与HTML标记分离，提高了代码的可读性和可维护性。但是，如果JavaScript代码量很大，还是会影响到HTML文档的结构和可读性。

4.3 外部引用（External）：

这是最推荐的JavaScript引用方式。通过将JavaScript代码写在单独的.js文件中，然后在HTML文档中通过`标签的src`属性引入这个.js文件。例如：

<script src="myScript.js"></script>

5变量与类型

5.1、变量

在JavaScript中，你可以使用var、let或const来声明变量。其中，var在全局作用域声明的变量会成为全局对象的属性（在浏览器中是window对象），let和const则是ES6引入的，它们提供了块级作用域，并且const声明的变量不能被重新赋值（但如果是对象或数组，其内部属性或元素可以被修改）。

示例：

var globalVar = "I'm global!";  
let blockVar = "I'm in a block!";  
const constVar = "I'm constant!";  
  
if (true) {  
    let anotherBlockVar = "I'm in another block!"; // 这段代码是合法的  
    // var anotherGlobalVar = "I'm another global!"; // 这段代码也是合法的，但不建议这样做  
    // const anotherConstVar = "I can't be reassigned!"; // 这段代码会抛出错误  
}  
  
console.log(globalVar); // 输出 "I'm global!"  
console.log(blockVar); // 输出 "I'm in a block!"  
console.log(constVar); // 输出 "I'm constant!"  
// console.log(anotherBlockVar); // 这会抛出错误，因为anotherBlockVar在if块外部是不可见的

5.2、类型

JavaScript是一种动态类型语言，意味着你不需要在声明变量时指定其类型，变量的类型会在赋值时自动确定。JavaScript有以下几种基本类型：

  • Number：用于表示数值，包括整数和浮点数。

  • String：用于表示文本或字符序列。

  • Boolean：表示逻辑值，只有两个值：true 和 false。

  • null：表示一个空值或者“无”。

  • undefined：表示变量已声明但未赋值。

  • Object：复杂数据类型，比如数组、函数等都属于对象类型。

  • Symbol（ES6引入）：表示唯一的、不可变的原始值。

示例：

let num = 42; // Number 类型  
let str = "Hello, World!"; // String 类型  
let isTrue = true; // Boolean 类型  
let nothing = null; // null 类型  
let notDefined; // undefined 类型  
let obj = {}; // Object 类型  
let sym = Symbol("unique"); // Symbol 类型  
  
console.log(typeof num); // 输出 "number"  
console.log(typeof str); // 输出 "string"  
console.log(typeof isTrue); // 输出 "boolean"  
console.log(typeof nothing); // 输出 "object" (在JavaScript中，typeof null的结果是"object"，这是一个历史错误)  
console.log(typeof notDefined); // 输出 "undefined"  
console.log(typeof obj); // 输出 "object"  
console.log(typeof sym); // 输出 "symbol"

注意：typeof 操作符用于确定一个变量的类型。然而，typeof null 的结果是 "object"，这是一个已知的错误。通常，你可以通过严格相等运算符 === 来检查 null 值。

5.3、类型转换

JavaScript会在需要时自动进行类型转换，但你也可以显式地进行类型转换。

示例：

let numString = "42";  
let num = Number(numString); // 显式转换为数字  
console.log(num + 1); // 输出 43  
  
let boolString = "true";  
let bool = Boolean(boolString); // 显式转换为布尔值  
console.log(bool); // 输出 true  
  
let numTwo = 2;  
let strTwo = numTwo.toString(); // 数字转为字符串  
console.log(strTwo); // 输出 "2"

6 javascript输出方式以及注释

6.1、输出方式

在JavaScript中，有几种常用的输出方式：

1 使用console.log()输出到控制台

这是开发过程中最常用的输出方式，用于在浏览器的控制台或Node.js环境中显示信息。

javascript
console.log("Hello, World!"); // 在控制台输出 "Hello, World!"

2 使用alert()弹出警告框

这会在浏览器中弹出一个包含指定消息的警告框。

javascript
alert("这是一个警告框！"); // 弹出包含 "这是一个警告框！" 的警告框

3 使用document.write()输出到HTML页面

此方法会将内容直接写入HTML文档中，通常用于简单的页面内容更新，但在现代开发中较少使用，因为它会覆盖整个页面的内容（如果多次调用或在文档加载后调用）。

javascript
document.write("<p>这是一个段落。</p>"); // 在HTML文档中写入一个段落

4 使用DOM操作动态添加内容

这是现代前端开发中更常用的方式，通过修改DOM元素的内容来更新页面。

let element = document.getElementById("myElement");  
element.innerHTML = "<p>这是一个通过DOM操作添加的段落。</p>"; // 通过DOM操作更新元素内容

6.2、注释

在JavaScript中，有两种类型的注释：

1 单行注释

使用//来注释一行代码。

// 这是一个单行注释  
console.log("这行代码不会被执行"); // 注释可以放在代码行的末尾

2 多行注释

使用/*开始和*/结束来注释多行代码。

/*  
这是一个多行注释，  
可以跨越多行来注释代码块。  
*/  
console.log("这行代码也不会被执行");

案例

下面是一个包含输出和注释的简单JavaScript脚本示例：

// 这是一个简单的JavaScript脚本示例  
  
// 使用console.log输出到控制台  
console.log("脚本开始执行...");  
  
/*  
下面是一个函数定义，用于计算两个数的和。  
虽然在这个简单的示例中我们并没有调用它，但展示了注释如何用于解释代码块。  
*/  
function addNumbers(a, b) {  
    return a + b;  
}  
  
// 使用alert弹出警告框显示消息  
alert("警告：这是一个警告框示例！");  
  
// 获取HTML元素并更新其内容  
let greetingElement = document.getElementById("greeting");  
greetingElement.innerHTML = "<h1>欢迎来到我的网页！</h1>"; // 通过DOM操作更新元素内容  
  
// 脚本执行结束  
console.log("脚本执行结束...");

7 Javascript函数

7.1、函数的定义

在Javascript中，函数是一段可以重复使用的代码块，它执行特定的任务。函数可以接收输入（参数），执行某些操作，并可能返回输出。

函数的基本定义方式如下：

function functionName(parameters) {  
    // 函数体：执行的代码  
    return value; // 可选，返回函数执行结果  
}

7.2、函数的调用

要执行函数中的代码，你需要调用（或执行）该函数。你可以通过函数名加上括号以及任何必要的参数来调用函数。

javascript
functionName(parameters);

7.3、函数的参数

函数可以接收任意数量的参数，这些参数在函数体内部可以作为变量使用。参数是可选的，如果没有参数，括号也是必须的。

function greet(name) {  
    console.log("Hello, " + name + "!");  
}  
  
greet("Alice"); // 输出 "Hello, Alice!"

7.4、函数的返回值

函数可以通过return语句返回一个值。如果函数没有return语句，或者return后面没有跟任何值，那么该函数将返回undefined。

function add(a, b) {  
    return a + b;  
}  
  
let sum = add(3, 4); // sum 的值为 7

7.5、案例

案例1：计算两个数的和

function calculateSum(num1, num2) {  
    return num1 + num2;  
}  
  
let result = calculateSum(5, 3);  
console.log(result); // 输出 8

案例2：判断一个数是否为偶数

function isEven(number) {  
    return number % 2 === 0;  
}  
  
let isTwoEven = isEven(2);  
console.log(isTwoEven); // 输出 true  
  
let isThreeEven = isEven(3);  
console.log(isThreeEven); // 输出 false

案例3：打印数组中的元素

function printArray(array) {  
    for (let i = 0; i < array.length; i++) {  
        console.log(array[i]);  
    }  
}  
  
let myArray = [1, 2, 3, 4, 5];  
printArray(myArray); // 输出数组中的每个元素

8 流程控制

在JavaScript中，流程控制是编程的核心部分，它决定了代码执行的顺序和方式。JavaScript提供了多种流程控制结构，包括顺序结构、分支结构和循环结构。

8.1、顺序结构

顺序结构是最基本的流程控制结构，代码按照从上到下的顺序依次执行。

案例：简单打印输出

console.log("这是第一条信息。");  
console.log("这是第二条信息。");

8.2、分支结构

分支结构允许代码根据特定条件选择不同的执行路径。JavaScript提供了if...else语句、switch语句以及三元运算符来实现分支控制。

1. if...else 语句

根据条件表达式的真假值来执行不同的代码块。

案例：判断年龄是否成年

let age = 18;  
if (age >= 18) {  
    console.log("你已经是成年人了。");  
} else {  
    console.log("你还是未成年人。");  
}

2. 三元运算符

是一种简化的if...else结构，用于在单行内进行条件判断。

案例：根据条件返回不同值

let score = 85;  
let grade = (score >= 60) ? "及格" : "不及格";  
console.log(grade); // 输出 "及格"

3. switch 语句

用于基于不同的情况执行不同的代码块。

案例：根据季节输出不同的信息

let season = "spring";  
switch (season) {  
    case "spring":  
        console.log("春天到了，万物复苏。");  
        break;  
    case "summer":  
        console.log("夏天来了，天气炎热。");  
        break;  
    case "autumn":  
        console.log("秋天到了，收获的季节。");  
        break;  
    case "winter":  
        console.log("冬天来了，白雪皑皑。");  
        break;  
    default:  
        console.log("未知的季节。");  
}

8.3、循环结构

循环结构允许代码块根据给定条件重复执行。JavaScript提供了for循环、while循环和do...while循环。

1. for 循环

在给定次数内重复执行代码块。

案例：打印1到5的数字

for (let i = 1; i <= 5; i++) {  
    console.log(i);  
}

2. while 循环

当指定条件为真时重复执行代码块。

案例：计算1到10的累加和

let sum = 0;  
let i = 1;  
while (i <= 10) {  
    sum += i;  
    i++;  
}  
console.log(sum); // 输出 55

3. do...while 循环

与while循环类似，但会至少执行一次代码块，然后再检查条件。

案例：至少打印一次"Hello"

let i = 0;  
do {  
    console.log("Hello");  
    i++;  
} while (i < 1); // 实际上这里的条件永远不会为真，但因为do...while至少执行一次，所以还是会打印"Hello"

9 JavaScript 字符串及常用方法

在JavaScript中，字符串是一种基本数据类型，用于表示文本数据。字符串由一系列字符组成，包括字母、数字、标点符号和特殊字符等。JavaScript提供了丰富的字符串方法，用于操作和处理字符串。

9.1、创建字符串

在JavaScript中，可以使用以下方式创建字符串：

1.直接量方式：使用单引号（'）或双引号（"）括起来的字符序列。

let str1 = 'Hello, world!';  
let str2 = "Hello, JavaScript!";

2.使用String对象：通过String构造函数或Object构造函数创建字符串对象。

let str3 = new String('Hello');  
let str4 = Object('Hello'); // 实际上也是String对象

9.2、常用字符串方法

1.charAt(index): 返回指定位置的字符。

let str = 'Hello';  
console.log(str.charAt(1)); // 输出 'e'

2.concat(string2, string3, ..., stringX): 连接两个或多个字符串，并返回新的字符串。

let str1 = 'Hello';  
let str2 = ' world';  
let result = str1.concat(str2);  
console.log(result); // 输出 'Hello world'

3.indexOf(searchValue[, fromIndex]): 返回某个指定的字符串值在字符串中首次出现的位置。

let str = 'Hello world';  
console.log(str.indexOf('world')); // 输出 6

4.lastIndexOf(searchValue[, fromIndex]): 返回指定值在字符串中最后出现的位置，在一个字符串中的指定位置从后向前搜索。

let str = 'Hello world, world!';  
console.log(str.lastIndexOf('world')); // 输出 13

5.slice(startIndex[, endIndex]): 提取字符串的某个部分，并在新的字符串中返回被提取的部分。

let str = 'Hello world';  
console.log(str.slice(0, 5)); // 输出 'Hello'

6.substring(indexStart[, indexEnd]): 返回字符串中从指定位置开始到指定位置结束的子串。

let str = 'Hello world';  
console.log(str.substring(0, 5)); // 输出 'Hello'

7.substr(start[, length]): 从起始索引号提取字符串中指定数目的字符。

let str = 'Hello world';  
console.log(str.substr(0, 5)); // 输出 'Hello'

8.toUpperCase(): 把字符串转换为大写。

let str = 'hello';  
console.log(str.toUpperCase()); // 输出 'HELLO'

9.toLowerCase(): 把字符串转换为小写。

let str = 'HELLO';  
console.log(str.toLowerCase()); // 输出 'hello'

10.trim(): 去除字符串两端的空白字符。

let str = '   Hello world   ';  
console.log(str.trim()); // 输出 'Hello world'

11.replace(searchValue, replaceValue): 在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

let str = 'Hello world';  
console.log(str.replace('world', 'JavaScript')); // 输出 'Hello JavaScript'

12.split(separator[, limit]): 把字符串分割为字符串数组。

let str = 'apple,banana,cherry';  
let arr = str.split(',');  
console.log(arr); // 输出 ['apple', 'banana', 'cherry']

10 JavaScript数组及常用方法案例详细笔记

10.1、数组的定义与创建

JavaScript中的数组是一种特殊的对象，用于存储多个值（元素）作为单一对象。这些值可以是任何数据类型，包括数字、字符串、布尔值、对象，甚至是其他数组。数组使用方括号([])表示，元素之间用逗号分隔。

例如：

let numbers = [1, 2, 3, 4, 5];  
let mixedArray = [1, "two", true, [3, 4, 5]];

10.2、访问和修改数组元素

数组中的元素可以通过索引来访问和修改，索引从0开始。

let myArray = [1, "two", true];  
let firstElement = myArray[0]; // 访问第一个元素，结果为1  
myArray[1] = "Three"; // 修改第二个元素为"Three"

10.3、常用数组方法

1.push()：向数组的末尾添加一个或多个元素，并返回新的长度。

let array = [1, 2, 3];  
array.push(4); // array变为[1, 2, 3, 4]  
console.log(array.length); // 输出4  
  
array.push(5, 6); // array变为[1, 2, 3, 4, 5, 6]

2.pop()：删除并返回数组的最后一个元素，修改原数组。

let array = [1, 2, 3];  
let lastElement = array.pop(); // lastElement为3，array变为[1, 2]

3.shift()：删除并返回数组的第一个元素，修改原数组。

let array = [1, 2, 3];  
let firstElement = array.shift(); // firstElement为1，array变为[2, 3]

4.unshift()：向数组的开头添加一个或多个元素，并返回新的长度。

let array = [1, 2, 3];  
array.unshift(0); // array变为[0, 1, 2, 3]

5.concat()：用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

let array1 = [1, 2, 3];  
let array2 = [4, 5, 6];  
let newArray = array1.concat(array2); // newArray为[1, 2, 3, 4, 5, 6]

6.slice()：提取某个数组的一部分，并返回一个新的数组对象。原数组不会被改变。

let array = [1, 2, 3, 4, 5];  
let newArray = array.slice(1, 3); // newArray为[2, 3]

7.splice()：通过删除或替换现有元素或者添加新元素来修改数组，并以数组形式返回被修改的内容。

let array = [1, 2, 3, 4, 5];  
let removed = array.splice(1, 2, 'a', 'b'); // removed为[2, 3]，array变为[1, 'a', 'b', 4, 5]

8.indexOf() 和 lastIndexOf()：分别用于查找数组中某个元素的第一个和最后一个索引位置，如果不存在则返回-1。

let array = [1, 2, 3, 2, 1];  
console.log(array.indexOf(2)); // 输出1  
console.log(array.lastIndexOf(2)); // 输出3

9.sort()：对数组的元素进行排序，并返回数组。默认排序顺序是根据字符串Unicode码点。

let array = [5, 2, 8, 1, 4];  
array.sort(); // array变为[1, 2, 4, 5, 8]

10.reverse()：颠倒数组中元素的顺序，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。

let array = [1, 2, 3, 4, 5];  
array.reverse(); // array变为[5, 4, 3, 2, 1]

11 JavaScript类型转换和闭包的案例笔记

11.1、类型转换

在JavaScript中，类型转换是自动进行的，有时也可以显式地进行。常见的类型转换包括将值从一种类型转换为另一种类型，如将字符串转换为数字，或将对象转换为布尔值等。

1. 显式类型转换

可以使用以下方法显式地进行类型转换：

  • Number()：将给定的值转换为数字。

  • String()：将给定的值转换为字符串。

  • Boolean()：将给定的值转换为布尔值。

示例：

let num = Number('123'); // 转换为数字123  
let str = String(123); // 转换为字符串'123'  
let bool = Boolean(0); // 转换为布尔值false

2. 隐式类型转换

JavaScript在进行运算或比较时，会自动进行类型转换。

示例：

let num1 = 5 + '10'; // 结果为字符串'15'，因为+运算符在字符串和数字之间会将数字转换为字符串  
let num2 = '5' - '3'; // 结果为数字2，因为-运算符在字符串之间会将字符串转换为数字

11.2、闭包

闭包是JavaScript中一个非常重要的概念，它允许函数访问并操作函数外部的词法环境（lexical environment）。简单来说，一个函数内部定义的函数（或称为内嵌函数）可以访问其父级函数的变量，即使父级函数已经执行完毕。

示例：

function outerFunction() {  
    let outerVariable = 'I am from outer function!';  
  
    function innerFunction() {  
        console.log(outerVariable); // 可以访问外部函数的变量  
    }  
  
    return innerFunction; // 返回内嵌函数  
}  
  
const inner = outerFunction(); // 执行外部函数，返回内嵌函数并赋值给inner  
inner(); // 输出：I am from outer function!

在这个例子中，innerFunction 是一个闭包，因为它能够访问其父级函数 outerFunction 的变量 outerVariable，即使 outerFunction 已经执行完毕。

闭包的应用：

闭包在JavaScript中有很多应用，例如实现私有变量、封装数据和方法、实现回调函数和高阶函数等。

私有变量示例：

function createCounter() {  
    let count = 0; // 私有变量  
  
    return {  
        increment: function() {  
            count++;  
        },  
        getCount: function() {  
            return count;  
        }  
    };  
}  
  
const counter = createCounter();  
counter.increment();  
counter.increment();  
console.log(counter.getCount()); // 输出：2

12 面向对象

12.1、面向对象的基本概念

在面向对象编程（OOP）中，我们使用“类”（Class）和“对象”（Object）来封装数据和方法。类是对象的模板，它定义了对象的属性和方法。而对象则是类的实例，具有类所定义的属性和方法。

12.2、JavaScript面向对象编程实践

1.使用构造函数创建对象

构造函数是一个特殊的函数，用于初始化新创建的对象。在构造函数内部，我们使用this关键字来定义对象的属性和方法。

function Person(name, age) {  
    this.name = name;  
    this.age = age;  
    this.sayHello = function() {  
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);  
    }  
}  
  
// 创建对象实例  
let john = new Person('John', 30);  
john.sayHello(); // 输出: Hello, my name is John and I'm 30 years old.

2.原型（Prototype）

在JavaScript中，每个函数都有一个prototype属性，它是一个指向原型对象的指针。而原型对象则包含可以由特定类型的所有实例共享的属性和方法。这提供了一种方法，可以在不必为每个对象实例都创建自己的方法和属性的情况下，向对象添加功能。

function Person(name, age) {  
    this.name = name;  
    this.age = age;  
}  
  
// 在原型上添加方法  
Person.prototype.sayHello = function() {  
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);  
};  
  
let john = new Person('John', 30);  
john.sayHello(); // 输出: Hello, my name is John and I'm 30 years old.

3.类的使用（ES6及以后版本）

从ES6开始，JavaScript引入了类的语法，使得面向对象编程更加直观和易于理解。

class Person {  
    constructor(name, age) {  
        this.name = name;  
        this.age = age;  
    }  
      
    sayHello() {  
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);  
    }  
}  
  
let john = new Person('John', 30);  
john.sayHello(); // 输出: Hello, my name is John and I'm 30 years old.

4.继承

在面向对象编程中，继承允许我们创建一个新的类（称为子类或派生类），继承另一个类（称为父类或基类）的属性和方法。这有助于我们实现代码的重用。

class Animal {  
    constructor(name) {  
        this.name = name;  
    }  
      
    speak() {  
        console.log(`${this.name} makes a sound`);  
    }  
}  
  
class Dog extends Animal {  
    constructor(name, breed) {  
        super(name); // 调用父类的构造函数  
        this.breed = breed;  
    }  
      
    bark() {  
        console.log(`${this.name} barks`);  
    }  
}  
  
let myDog = new Dog('Buddy', 'Poodle');  
myDog.speak(); // 输出: Buddy makes a sound  
myDog.bark(); // 输出: Buddy barks

在上面的例子中，Dog类继承了Animal类，因此Dog的实例可以访问Animal类中定义的speak方法。同时，Dog类还定义了自己的bark方法。

13 DOM

JavaScript DOM（Document Object Model，文档对象模型）是W3C定义的一种处理HTML和XML的标准编程接口，它允许程序和脚本能够动态地访问和更新文档的内容、结构和样式。

13.1、DOM树

DOM把文档（一个页面就是一个文档）中的元素、属性和文本等都看作是对象，并通过对象的方式来描述它们。其中，页面中的所有标签都是元素（element），所有的内容（包括标签、属性、文本等）都是节点（node）。

13.2、获取元素

在JavaScript中，有多种方法可以获取DOM元素，包括：

  1. getElementById：通过元素的ID属性获取元素。例如：var element = document.getElementById("myElement");

  2. getElementsByClassName：通过元素的类名获取元素，返回的是一个节点列表。例如：var elements = document.getElementsByClassName("myClass");

  3. getElementsByTagName：通过元素的标签名获取元素，同样返回的是一个节点列表。例如：var elements = document.getElementsByTagName("div");

  4. querySelector：使用CSS选择器获取匹配的第一个元素。例如：var element = document.querySelector(".myClass");

13.3、修改元素

获取到元素后，我们可以修改元素的属性、内容或样式等。例如：

  • 修改元素内容：element.innerHTML = "新的内容";

  • 修改元素属性：element.setAttribute("name", "newValue");

  • 修改元素样式：element.style.color = "red";

13.4、创建和添加元素

我们也可以使用JavaScript来创建新的DOM元素，并将其添加到文档中。例如：

var newElement = document.createElement("div"); // 创建新的div元素  
newElement.textContent = "我是新添加的元素"; // 设置元素内容  
var container = document.getElementById("container"); // 获取容器元素  
container.appendChild(newElement); // 将新元素添加到容器中

13.5、事件处理

JavaScript DOM也提供了事件处理机制，允许我们为元素添加事件监听器，并在特定事件发生时执行相应的函数。例如：

var button = document.getElementById("myButton"); // 获取按钮元素  
button.addEventListener("click", function() { // 添加点击事件监听器  
    alert("按钮被点击了！"); // 当按钮被点击时，弹出提示框  
});

以上只是JavaScript DOM的一些基本用法，实际上DOM的功能远不止这些，它还包括了更多的方法和属性，可以用于更复杂的操作。为了充分掌握DOM，建议深入学习相关教程和文档，并多进行实践练习。

13.6、案例

案例1：动态修改页面元素内容

HTML部分：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>DOM Content Manipulation</title>  
</head>  
<body>  
    <h1 id="myHeader">初始标题</h1>  
    <button οnclick="changeHeader()">点击修改标题</button>  
    <script src="script.js"></script>  
</body>  
</html>

JavaScript部分 (script.js)：

function changeHeader() {  
    var header = document.getElementById("myHeader");  
    header.innerHTML = "标题已被修改！";  
}

案例2：创建并添加新的DOM元素

HTML部分：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>DOM Element Creation</title>  
</head>  
<body>  
    <ul id="myList">  
        <li>项目 1</li>  
        <li>项目 2</li>  
    </ul>  
    <button οnclick="addListItem()">添加项目</button>  
    <script src="script.js"></script>  
</body>  
</html>

JavaScript部分 (script.js)：

function addListItem() {  
    var list = document.getElementById("myList");  
    var newItem = document.createElement("li");  
    newItem.textContent = "新项目";  
    list.appendChild(newItem);  
}

案例3：监听并处理DOM事件

HTML部分：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>DOM Event Handling</title>  
</head>  
<body>  
    <input type="button" value="点击我" id="myButton">  
    <p id="message">还没有点击按钮。</p>  
    <script src="script.js"></script>  
</body>  
</html>

JavaScript部分 (script.js)：

document.getElementById("myButton").addEventListener("click", function() {  
    var message = document.getElementById("message");  
    message.textContent = "你点击了按钮！";  
});

14 Bom

14.1BOM介绍

BOM (Browser Object Model) 是浏览器对象模型的缩写，它提供了与浏览器窗口进行交互的对象和接口。通过 BOM，我们可以控制浏览器窗口和框架，以及导航等。尽管现在更多的前端交互依赖于 DOM (Document Object Model) 和一些新的 Web API，但 BOM 仍然是基础中的基础，特别是在处理窗口大小、滚动位置、浏览器导航等方面。

14.2 常用的 BOM 对象和方法的简单介绍

  1. window 对象

    • 它是 BOM 的顶层对象，所有全局 JavaScript 对象、函数和变量自动成为 window 对象的成员。

    • 常用的方法：

      • alert(message): 显示一个警告框。

      • confirm(message): 显示一个带有确认和取消按钮的对话框，并返回用户的选择（true 或 false）。

      • prompt(message, defaultText): 显示一个带有文本输入字段的对话框，并返回用户输入的值。

      • open(URL, name, features): 打开一个新的浏览器窗口或标签页。

      • close(): 关闭当前窗口（注意：浏览器可能限制或阻止这种行为）。

    • 常用的属性：

      • location: 提供了与当前窗口的 URL 相关的信息和方法。例如：window.location.href = "http://example.com" 可以导航到新的 URL。

      • navigator: 包含了有关浏览器的信息。

      • screen: 提供了有关客户端屏幕的信息。

      • history: 提供了与浏览器历史记录相关的功能，如前进和后退。

  2. location 对象

    • 它是 window.location 的一个引用，用于获取或设置窗口的 URL，并控制导航。

    • 常用的属性：

      • href: 设置或返回完整的 URL。

      • reload(): 重新加载当前文档。

      • replace(URL): 用新的文档替换当前文档（不会在历史记录中生成新的记录）。

  3. navigator 对象

    • 提供了关于浏览器的信息。

    • 常用的属性：

      • appName: 返回浏览器的名称。

      • appVersion: 返回浏览器的版本信息。

      • userAgent: 返回由客户机发送服务器的 user-agent 头部的值。

      • language: 返回浏览器的主要语言。

  4. screen 对象

    • 提供了有关客户端屏幕的信息。

    • 常用的属性：

      • width: 返回屏幕的宽度（以像素为单位）。

      • height: 返回屏幕的高度（以像素为单位）。

      • availWidth: 返回屏幕的可用宽度（以像素为单位，减去如任务栏之类的界面元素后）。

      • availHeight: 返回屏幕的可用高度（以像素为单位，减去如任务栏之类的界面元素后）。

  5. history 对象

    • 提供了与浏览器历史记录相关的功能。

    • 常用的方法：

      • back(): 加载历史列表中的前一个 URL。

      • forward(): 加载历史列表中的下一个 URL。

      • go(number): 加载历史列表中的某个具体页面。

14.3 BOM案例

案例1：调整窗口大小事件

在这个案例中，我们将演示如何使用BOM的window对象来监听和处理窗口大小调整事件。

HTML部分：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>BOM Window Resize Event</title>  
</head>  
<body>  
    <p id="resizeInfo">窗口大小信息将在此处显示。</p>  
    <script src="script.js"></script>  
</body>  
</html>

JavaScript部分 (script.js)：

window.addEventListener('resize', function() {  
    var width = window.innerWidth;  
    var height = window.innerHeight;  
    var resizeInfo = document.getElementById('resizeInfo');  
    resizeInfo.textContent = '窗口宽度: ' + width + 'px, 窗口高度: ' + height + 'px';  
});

案例2：使用setTimeout定时器

在这个案例中，我们将演示如何使用BOM的setTimeout定时器来延迟执行某些操作。

HTML部分：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>BOM setTimeout Example</title>  
</head>  
<body>  
    <button οnclick="startTimer()">开始定时器</button>  
    <p id="timerInfo">等待定时器触发...</p>  
    <script src="script.js"></script>  
</body>  
</html>

JavaScript部分 (script.js)：

function startTimer() {  
    var timerInfo = document.getElementById('timerInfo');  
    timerInfo.textContent = '定时器已启动，将在3秒后更新文本。';  
    setTimeout(function() {  
        timerInfo.textContent = '定时器触发！';  
    }, 3000); // 延迟3秒（3000毫秒）后执行回调函数  
}
乐队1
关注
专栏目录
狂神说系列 JavaScript笔记
06-15
【狂神说系列 JavaScript笔记】是一份全面且深入的JavaScript学习资源，旨在帮助开发者和初学者深入理解这门广泛应用于Web开发的脚本语言。这份笔记涵盖了JavaScript的基础语法、核心概念以及高级特性，旨在构建一个...
JavaScript笔记
Blue_Pepsi_Cola的博客
01-03 2980
JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为。2.字符串类型：string var s = “abc”/‘abc’;只声明不赋值就是未定义类型。// fn2("孙尚香",60);// fn5("刘备",20);// fn6("吕布",18);//调用 和java一样调用。
JavaScript笔记（全）
程序猿小九九的博客
06-04 6526
JavaScript是一门世界上最流行的脚本语言一个合格的后端人员，必须要精通JavaScriptECMAScript可以理解为JavaScript的一个标准最新版本已经到es6但是大部分浏览器还只停留在支持es5代码上开发环境~线上环境，版本不一致内部标签 外部引入我的第一个JavaScript程序.html qj.js 03、浏览器控制台使用 04、数据类型快速浏览 变量 numberjs不区分小数和整数，number 字符串‘abc’“abc”布尔值truefalse逻辑运算 比较运算符 这
Javascript笔记
zedlam的博客
03-09 731
javascript学习笔记
自学JavaScript笔记、JavaScript基础总结
m0_69144551的博客
04-08 1455
JavaScript基础；JavaScript简介；JS输入和输出；变量；数据类型；运算符。分支流程控制（if ；if else ；if else if；Switch，三元表达式 ）；循环控制流程（for；while；do while），break、continue关键字，数组
【狂神】JavaScript笔记
QinLaoDeMaChu的博客
04-04 4283
目录1. 什么是Javascript1.1 概述2. 快速入门2.1 引入JavaScript2.2 基本语法入门2.3 数据类型 1. 什么是Javascript 1.1 概述 JavaScript 是一门世界上最流行的脚本语言，仅用了 10 天就开发出来了 一个合格的后端人员，必须精通JavaScript 2. 快速入门 2.1 引入JavaScript 新建项目 JavaScript，删掉 src 1、内部标签 <script> //在这个标签内写javascript代码 <s
JavaScript 笔记
热门推荐
Nicolas的博客
11-16 1万+
github下载源文档 文章目录JavaScriptJS的编写的位置输出语句基本的语法字面量和变量字面量变量标识符数据类型六种数据类型1.String 字符串2.Number 数值3.Boolean 布尔值4.Null 空值5.Undefined 未定义**引用数据类型**类型转换转换为String方式一（强制类型转换）：方式二（强制类型转换）：方式三（隐式的类型转换）:转换为Number方式一（...
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1098
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
Javascript入门学习笔记
weixin_61370021的博客
04-27 4664
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
JavaScript 笔记部分导航
GoldenaArcher的博客
05-28 771
重新学习了一下，可以算是用自己的语言重新组织了一下上面的笔记，并且增添了自己写的一个小案例，感觉现在才算是对 iterator 和 generator 稍微入门一些了。看了看也快 50 篇笔记了，稍微整理一下写了点什么，之后复习的时候也方便找内容。一个整合，第 5 章的内容是基本引用类型，其中一部分内容拆成不同的笔记了。array，map & set 部分内容因为内容量的关系，也单独拆了出来。其实这里的内容，语句里面都提过，然后忘了。暂时归类到这里，等红宝书过到这里再看看要不要修改……
网络安全详解
weidl001的博客
09-21 1556
网络安全（Cybersecurity）是指保护网络系统、设备、程序及数据免受攻击、损坏或未授权访问的实践。其核心目标是确保信息的机密性、完整性和可用性。机密性（Confidentiality）：确保信息仅被授权的人员访问。完整性（Integrity）：保护信息不被未授权的修改或破坏。可用性（Availability）：确保信息和资源在需要时可被访问和使用。
如何用3个月零基础入门网络安全？_网络安全零基础怎么学习
2401_84466224的博客
09-27 1142
我们知道计算机最早是在西方发明出来的，很多名词或者代码都是英文的，甚至现有的一些教程最初也是英文原版翻译过来的，而且一个漏洞被发现到翻译成中文一般需要一个星期的时间，在这个时间差上漏洞可能都修补了。”答案是否定的，黑客用的电脑,不需要什么高的配置,只要稳定就行.因为黑客所使用的一些程序,低端CPU也可以很好的运行,而且不占什么内存.还有一个,黑客是在DOS命令下对进行的,所以电脑能使用到最佳状态!观看学习近十年所有0day挖掘的帖，然后搭建环境，去复现漏洞，去思考学习笔者的挖洞思维，培养自己的渗透思维。
国产操作系统（统信UOS）网络安全等级保护基础安全加固
2401_84434570的博客
09-26 956
统一操作系统UOS是由多家企业共同打造的中文国产操作系统。一、设置口令复杂度策略和有效期首先安装libpam-pwquality依赖包口令复杂度策略通过libpam-pwquality依赖包进行设置依赖包的安装命令：sudo apt-get install libpam-pwquality。依赖包的查看方式执行命令：dpkg -l libpam-pwquality。执行命令：vim etc/pam.d/common-passwd。
信息安全工程师（24）网络安全体系建设原则与安全策略
最新发布
m0_73399576的博客
09-28 1175
信息安全工程师——网络安全体系建设原则与安全策略篇
19、网络安全合规复盘
weixin_43263566的博客
09-26 249
。
从《GTA5》的反外挂斗争看网络安全的重要性
@云安全小杜
09-26 693
本文将探讨《GTA5》在对抗外挂过程中遇到的挑战，特别是当游戏开发者试图增强游戏安全性时所遭受的DDoS攻击，并从中提炼出对于网络安全的一些启示。然而，随着游戏人气的增长，一些不法分子开始利用技术手段制作并销售外挂程序，这些程序可以让使用者在游戏中获得不公平的优势，从而破坏了游戏环境。请注意，以上内容是基于假设的情景编写的技术分析文章，实际案例可能涉及更多的细节和技术层面的问题。《GTA5》与外挂之间的斗争提醒我们，在享受数字世界带来的便利的同时，也需要时刻警惕潜在的安全风险，并积极采取措施加以防范。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值