发布时间：2025-12-09 18:27:09 浏览次数：4
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
JavaScript的前世今生
JavaScript的起源故事
JavaScript语言的历史
HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。
Javascript 脚本代码可被放置在 HTML 页面的 <head> 和 <body> 部分中。
<script>alert("我的第一个 JavaScript"); //弹出窗口</script>浏览器会解释并执行位于 <script> 和 </script> 之间的 JavaScript 代码
那些老旧的实例可能会在 <script> 标签中使用 type=“text/javascript”。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 “src” 属性中设置该 .js 文件：
<script src="myScript.js"></script>'use strict'; 严格检查模式，预防 JavaScript 的随意性导致产生的一些问题
必须写在 JavaScript 的第一行，建议用 let 声明局部变量
前提：需要支持 ES6 语法
<script>'use strict';/************/</script>在浏览器（edge为例）中按下 键盘上的 F12 或鼠标右击页面，点击 检查 进入开发者工具。
也可通过页面右上角菜单栏找到 “更多工具” ，点击 “开发人员工具“ 进入。
1、Console 窗口调试 JavaScript 代码
打开开发者工具后，我们可以在 Console 窗口调试 JavaScript代码，如下图：
清空 Console 窗口的内容可以按以下按钮：
2、snippets 脚本
在浏览器中创建一个脚本来执行，在开发者工具中点击 Sources 面板，选择 Snippets 选项卡，在导航器中右击鼠标，然后选择 Create new snippet 来新建一个脚本文件：
如果你没看到 Snippets ，可以点下面板上到 >> 就能看到了。
点击 Create new snippet 后，会自动创建一个文件，你只需在右侧窗口输写代码，然后按 Command+S（Mac）或 Ctrl+S（Windows 和 Linux）保存更改即可。
保存后，右击文件名，选择 “Run” 执行代码：
JavaScript 语句和 JavaScript 变量都对大小写敏感。
声明（创建） JavaScript 变量
使用 var 关键词来声明变量：
var carname; //该变量是空的，值为 undefined也可以声明变量时对其赋值：
var carname = "xiebo";多个变量同时声明
一条语句中声明很多变量：
var lastname="Doe", age=30, job="carpenter";声明也可横跨多行：
var lastname="Doe",age=30,job="carpenter";但不能同时赋值
var x,y,z=1; //x,y 为 undefined，z 为 1。显示数据
弹出警告框来显示数据：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script>alert("我的第一个 JavaScript"); </script></head><body></body></html>如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：
<!DOCTYPE html><html><head> <meta charset="utf-8"> </head><body><h1>我的第一个 Web 页面</h1><p id="demo">我的第一个段落。</p><script>document.getElementById("demo").innerHTML="段落已修改。";</script></body></html>可以将JavaScript直接写在HTML 文档中：
<!DOCTYPE html><html><head> <meta charset="utf-8"> </head><body><h1>我的第一个 Web 页面</h1><p>我的第一个段落。</p><script>document.write(Date());</script></body></html>如果浏览器支持调试，可以使用 console.log() 方法在浏览器中显示 JavaScript 值。
<!DOCTYPE html><html><body><script>a = 5;b = 6;c = a + b;console.log(c);</script></body></html>值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。
1、正常字符串使用单引号' '或双引号" "包裹
2、注意转义字符 \
3、多行字符串编写
用 `` 包裹 (tab键上，Esc键下)
4、模板字符串
let name = "xiebo";let age = 18;let msg = `hello, ${name}`;5、字符串长度
str.length6、字符串不可变
7、大小写转换
8、indexOf()
9、substring
// [) 包头不包尾str.substring(i) //从第i个索引字符截取到最后一个字符的字符串str.substring(i, j) //从第i个索引字符截取到第j-1个索引字符的字符串数组可以包含任意的数据类型
var arr = [1, 2, 3, 'i', true];1、长度
arr.length可以给arr.length赋值，改变数组的长度，多出来的元素为undefined；如果长度过小，会导致元素丢失。
2、indexOf 通过元素获得在数组中的索引
var arr = [1, 2, 3, 'i', true];arr.indexOf(2);//res: 13、slice() 截取数组，并返回一个新数组，类似于 substring
4、push、pop
push(i): 将元素i压入到数组尾部pop(): 从数组中弹出尾部一个元素5、unshift()、shift()
unshift(i): 将元素i压入到数组头部shift(): 从数组中弹出头部一个元素6、排序 sort()
原来数组的值会被修改为排序后的值
if…else 语句
if (condition){当条件为 true 时执行的代码}else{当条件不为 true 时执行的代码}if…else if…else 语句
if (condition1){当条件 1 为 true 时执行的代码}else if (condition2){当条件 2 为 true 时执行的代码}else{当条件 1 和 条件 2 都不为 true 时执行的代码}首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。使用 break 来阻止代码自动地向下一个 case 运行。default 关键词来规定匹配不存在时做的事情。
for 循环
语法：
语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行
遍历数字：
for (let i= 0; i < 100; i++){console.log(i);}遍历数组：
var cars=["BMW","Volvo","Saab","Ford"];for (var i = 0, l = cars.length; i < l; i++){document.write(cars[i] + "<br>");}for/in 循环
语法：
遍历对象：
var person = { fname:"Bill", lname:"Gates", age:56 }; for (x in person) // x 为属性名{txt += person[x];}遍历数组：
var arr = [11, 2, 13, 4, 15];// num 为索引for (var num in arr) {console.log(arr[num]);}forEach 循环
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
var age = [11, 2, 13, 4, 15];age.forEach(function (value) {console.log(value);})while 循环
语法：
遍历数字：
var i = 0;while (i < 5){console.log(i);i++;}遍历数组：
var cars = ["BMW","Volvo","Saab","Ford"];var i = 0;while (cars[i]) {document.write(cars[i] + "<br>");i++;}do/while 循环
该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。
语法：
do{需要执行的代码}while (条件);遍历数字：
var i = 0;do {console.log(i);i++;}while (i<5)由于传统的 JavaScript对象只能用字符串当做键，给开发带来很大限制，ES6增加 Map 数据结构，使得各种类型的值(包括对象)都可以作为键。
Map结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。
Map 对象的方法和属性有：
Set 数据结构类似数组，但所有成员的值唯一。
Set 对象的方法和属性有：
ES6 新特性
JavaScript原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这样就需要一种统一的接口机制，来处理所有不同的数据结构。
遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作。
Iterator的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是ES6创造了一种新的遍历命令 for...of 循环，Iterator接口主要供 for...of 消费。
遍历数组：
// for/of 是值， for/in 是下标var arr = [3, 4, 5]for (let x of arr) {console.log(x);}遍历 map：
var map = new Map([["tom", 18], ["xiebo", 21]], ["lili", 19]);for (let x of map) {console.log(x);}遍历 set：
var set = new Set([5, 6, 7]);for (let x of set) {console.log(x);}函数定义方式一：
function function_name(arg1, arg2, ...){// 执行代码return ...;}执行到 return 时代表函数结束，返回结果。
如果没有执行到 return 函数就结束了会返回 undefined。
函数定义方式二：
使用匿名函数定义：
arguments
arguments 是JavaScript中自带的关键字，代表一个存储传递进来的所有参数的数组。
如果想对定义的参数之外的所有参数进行操作的话可以指定 ...arr_name （arr_name为存储这些参数的数组）作为参数。
let x = function(arg1, arg2, ...rest) {console.log(rest);}JavaScript 局部作用域
变量在函数内声明，变量为局部变量，具有局部作用域。
局部变量：只能在函数内部访问。
函数参数只在函数内起作用，是局部变量。
JavaScript 全局作用域
变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
JavaScript 变量生命周期
JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。
HTML 中的全局变量
在 HTML 中, 全局变量是 window 对象，所以 window 对象可以调用函数内对局部变量。
**注意：**所有数据变量都属于 window 对象。
定义方法
方法就是把函数放在对象里，对象只有属性和方法。
this 关键字
面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。
显式函数绑定
在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境，即 this 绑定的对象。
在下面实例中，当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法：
var person1 = {fullName: function() {return this.firstName + " " + this.lastName;}}var person2 = {firstName:"John",lastName: "Doe",}person1.fullName.call(person2); // 返回 "John Doe"JavaScript Date 对象参考手册
基本使用
创建Date 对象
Date 对象用于处理日期和时间。
可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象：
有四种方式初始化日期：
new Date();new Date(value);new Date(dateString);new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);JSON 教程
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
什么是 JSON?
语法规则
JSON对象
{"name":"Runoob", "url":"www.runoob.com"}JSON数组
"sites":[{"name":"Runoob", "url":"www.runoob.com"}, {"name":"Google", "url":"www.google.com"},{"name":"Taobao", "url":"www.taobao.com"}]JSON 字符串与 JavaScript 对象的转换
JSON.parse() - 用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify() - 用于将 JavaScript 值转换为 JSON 字符串。
var user = {name: "xiebo",age: 3,sex: "男"};// 对象转化为JSON字符串var jsonUser = JSON.stringify(user);// {"name": "xiebo", "age": 3, "sex": "男"}// JSON字符串转化为对象var obj = JSON.parse('{"name": "xiebo", "age": 3, "sex": "男"}')// {name: 'xiebo', age: 3, sex: '男'}AJAX 教程
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
面向对象不是新的东西，它只是过程式代码的一种高度封装，目的在于提高代码的开发效率和可维护性。
面向对象编程 —— Object Oriented Programming，简称 OOP ，是一种编程开发思想。 它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。
在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工，可以完成接受信息、处理数据、发出信息等任务。 因此，面向对象编程具有灵活、代码可复用、高度模块化等特点，容易维护和开发，比起由一系列函数或指令组成的传统的过程式编程（procedural programming），更适合多人合作的大型软件项目。
面向对象的特性：
大部分面向对象的编程语言，都是通过“类”（class）实现对象的继承。传统上，JavaScript 语言的继承不通过 class，而是通过“原型对象”（prototype）实现
构造函数的问题
使用构造函数带来的最大的好处就是创建对象更方便了，但是其本身也存在一个浪费内存的问题：
function Person (name, age) {this.name = namethis.age = agethis.type = '学生'this.sayHello = function () {console.log('hello ' + this.name)}}var p1 = new Person('王五', 18)var p2 = new Person('李四', 16)console.log(p1.sayHello === p2.sayHello) // => false上边的代码，从表面看上好像没什么问题，但是实际上这样做，有一个很大的弊端。 那就是对于每一个实例对象，type 和 sayHello 都是一模一样的内容， 每一次生成一个实例，都必须为重复的内容，多占用一些内存，如果实例对象很多，会造成极大的内存浪费。
更好的解决方案： prototype
Javascript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。 这个对象的所有属性和方法，都会被构造函数的实例继承。
这也就意味着，我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype 对象上。
function Person (name, age) {this.name = namethis.age = age}console.log(Person.prototype) // => objectPerson.prototype.type = '学生'Person.prototype.sayName = function () {console.log(this.name)}var p1 = new Person(...)var p2 = new Person(...)console.log(p1.sayName === p2.sayName) // => true这时所有实例的 type 属性和 sayName() 方法， 其实都是同一个内存地址，指向 prototype 对象，因此就提高了运行效率。
构造函数、实例、原型三者之间的关系：
_proto_
这是每个对象都会有的属性，叫做 __proto__ ，这个属性会指向该对象的原型。
function F () {}console.log(F.prototype) // => objectF.prototype.sayHi = function () {console.log('hi!')}var instance = new F()console.log(instance.__proto__ === F.prototype) // => trueES6 引入了 class 语法，本质还是原型继承
以下两种方式等价：
//使用原型function Student(name) {this.name = name;}Student.prototype.hello = function() {alert("Hello")}//使用 class (更像Java)class Student {constructor(name) {this.name = name}hello() {alert("Hello")}} var st1 = new Student("xiaohong")var st2 = new Student("xiaoming")console.log(st1.hello() == st2.hello()) // => trueJavaScript 规定，所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）：对象到原型，再到原型的原型……
如果一层层地上溯，所有对象的原型最终都可以上溯到Object.prototype，即Object构造函数的prototype属性。也就是说，所有对象都继承了Object.prototype的属性。这就是所有对象都有valueOf和toString方法的原因，因为这是从Object.prototype继承的。
那么，Object.prototype对象有没有它的原型呢？回答是Object.prototype的原型是null。null没有任何属性和方法，也没有自己的原型。因此，原型链的尽头就是null。
Object.getPrototypeOf(Object.prototype)// null读取对象的某个属性时，JavaScript 引擎先寻找对象本身的属性，如果找不到，就到它的原型去找，如果还是找不到，就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到，则返回undefined。如果对象自身和它的原型，都定义了一个同名属性，那么优先读取对象自身的属性，这叫做“覆盖”（overriding）。
注意，一级级向上，在整个原型链上寻找某个属性，对性能是有影响的。所寻找的属性在越上层的原型对象，对性能的影响越大。如果寻找某个不存在的属性，将会遍历整个原型链。
原型链例图：
浏览器对象模型（Browser Object Model，简称 BOM）是 JavaScript 的组成部分之一，BOM 赋予了 JavaScript 程序与浏览器交互的能力。
window 对象是 BOM 的核心，用来表示当前浏览器窗口，其中提供了一系列用来操作或访问浏览器的方法和属性。另外，JavaScript 中的所有全局对象、函数以及变量也都属于 window 对象。
| closed | 返回窗口是否已被关闭 |
| defaultStatus | 设置或返回窗口状态栏中的默认文本 |
| document | 对 Document 对象的只读引用 |
| frames | 返回窗口中所有已经命名的框架集合，集合由 Window 对象组成，每个 Window 对象在窗口中含有一个 <frame> 或 <iframe> 标签 |
| history | 对 History 对象的只读引用，该对象中包含了用户在浏览器中访问过的 URL |
| innerHeight | 返回浏览器窗口的高度，不包含工具栏与滚动条 |
| innerWidth | 返回浏览器窗口的宽度，不包含工具栏与滚动条 |
| localStorage | 在浏览器中以键值对的形式保存某些数据，保存的数据没有过期时间，会永久保存在浏览器中，直至手动删除 |
| length | 返回当前窗口中 <iframe> 框架的数量 |
| location | 引用窗口或框架的 Location 对象，该对象中包含当前 URL 的有关信息 |
| name | 设置或返回窗口的名称 |
| navigator | 对 Navigator 对象的只读引用，该对象中包含当前浏览器的有关信息 |
| opener | 返回对创建此窗口的 window 对象的引用 |
| outerHeight | 返回浏览器窗口的完整高度，包含工具栏与滚动条 |
| outerWidth | 返回浏览器窗口的完整宽度，包含工具栏与滚动条 |
| pageXOffset | 设置或返回当前页面相对于浏览器窗口左上角沿水平方向滚动的距离 |
| pageYOffset | 设置或返回当前页面相对于浏览器窗口左上角沿垂直方向滚动的距离 |
| parent | 返回父窗口 |
| screen | 对 Screen 对象的只读引用，该对象中包含计算机屏幕的相关信息 |
| screenLeft | 返回浏览器窗口相对于计算机屏幕的 X 坐标 |
| screenTop | 返回浏览器窗口相对于计算机屏幕的 Y 坐标 |
| screenX | 返回浏览器窗口相对于计算机屏幕的 X 坐标 |
| sessionStorage | 在浏览器中以键值对的形式存储一些数据，数据会在关闭浏览器窗口或标签页之后删除 |
| screenY | 返回浏览器窗口相对于计算机屏幕的 Y 坐标 |
| self | 返回对 window 对象的引用 |
| status | 设置窗口状态栏的文本 |
| top | 返回最顶层的父窗口 |
| alert() | 在浏览器窗口中弹出一个提示框，提示框中有一个确认按钮 |
| atob() | 解码一个 base-64 编码的字符串 |
| btoa() | 创建一个 base-64 编码的字符串 |
| blur() | 把键盘焦点从顶层窗口移开 |
| clearInterval() | 取消由 setInterval() 方法设置的定时器 |
| clearTimeout() | 取消由 setTimeout() 方法设置的定时器 |
| close() | 关闭某个浏览器窗口 |
| confirm() | 在浏览器中弹出一个对话框，对话框带有一个确认按钮和一个取消按钮 |
| createPopup() | 创建一个弹出窗口，注意：只有 IE 浏览器支持该方法 |
| focus() | 使一个窗口获得焦点 |
| getSelection() | 返回一个 Selection 对象，对象中包含用户选中的文本或光标当前的位置 |
| getComputedStyle() | 获取指定元素的 CSS 样式 |
| matchMedia() | 返回一个 MediaQueryList 对象，表示指定的媒体查询解析后的结果 |
| moveBy() | 将浏览器窗口移动指定的像素 |
| moveTo() | 将浏览器窗口移动到一个指定的坐标 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口 |
| print() | 打印当前窗口的内容 |
| prompt() | 显示一个可供用户输入的对话框 |
| resizeBy() | 按照指定的像素调整窗口的大小，即将窗口的尺寸增加或减少指定的像素 |
| resizeTo() | 将窗口的大小调整到指定的宽度和高度 |
| scroll() | 已废弃。您可以使用 scrollTo() 方法来替代 |
| scrollBy() | 将窗口的内容滚动指定的像素 |
| scrollTo() | 将窗口的内容滚动到指定的坐标 |
| setInterval() | 创建一个定时器，按照指定的时长（以毫秒计）来不断调用指定的函数或表达式 |
| setTimeout() | 创建一个定时器，在经过指定的时长（以毫秒计）后调用指定函数或表达式，只执行一次 |
| stop() | 停止页面载入 |
| postMessage() | 安全地实现跨源通信 |
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树：
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
想通过 JavaScript，操作 HTML 元素，必须首先找到该元素。
有三种方法实现：
（参数要加引号）
<body><h1>标题一</h1><p id="p1">文本1</p><p class="p2">文本2</p><script>//对应 css 选择器，获得 DOM 节点var h1 = document.getElementsByTagName('h1');//返回的是数组var p1 = document.getElementById('p1');var p2 = document.getElementsByClassName('p2');//返回的是数组</script></body>改变文本：
p1.innerText = "123"//改变文本的值p2[0].innerHTML = "<strong>456</strong>" //可以解析HTML文本内容效果：
改变属性：
如需改变 HTML 元素的属性，使用这个语法：
document.getElementById(id).attribute=新属性值修改了 <img> 中的 src 属性
<body><img src="smiley.gif" width="160" height="120"><img id="image" src="smiley.gif" width="160" height="120"><script>document.getElementById("image").src="landscape.jpg";</script><p>脚本将第二个图片修改为 landscape.jpg</p></body>效果：
改变 CSS：
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property="新样式"如下对 css 修改：
p1.style.color = "red";p2[0].style.fontSize = "60px";效果：
删除节点的步骤：先获取父节点，再通过父节点 removeChild(self_name) 删除自己。
<body><p id="father"><h1>标题一</h1><p id="p1">文本1</p><p class="p2">文本2</p></p><script>var son = document.getElementById('p1');var father = son.parentElement;// 获取son节点的父节点father.removeChild(son);</script></body>如下，p1被删除：
也可用父亲的孩子数组删除，但是删除后节点排列会动态更新：
<body><p id="father"><h1>标题一</h1><p id="p1">文本1</p><p class="p2">文本2</p></p><script>var father = document.getElementById("father");father.removeChild(father.children[0]);father.removeChild(father.children[1]);father.removeChild(father.children[2]);</script></body>最后是这样的效果：
由于运行到 father.removeChild(father.children[2]); 时数组里只有一个节点，所以出现了报错。
将 js 节点插到 list 节点中：
<script>var js = document.getElementById('js');var list = document.getElementById('list');list.appendChild(js);//追加子元素</script>向前插入节点
包含目标节点的节点.insertBefore(newNode, targetNode)
<body><p id="js">JavaScript</p><p id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p></p><script>var js = document.getElementById('js');var ee = document.getElementById('ee');var list = document.getElementById('list');list.insertBefore(js, ee);</script></body>可以通过 document.createElement(tag_name) 创建一个标签。
创建一个新标签实现插入：
<body><p id="js">JavaScript</p><p id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p></p><script>var js = document.getElementById('js');var list = document.getElementById('list');var newP = document.createElement('p');newP.id = 'newP';newP.innerHTML = "hello,world";js.append(newP);</script></body>还可以使用 setAttribute(属性,属性名) 来为创建的节点设置属性：
// 创建一个Style标签var myStyle = document.createElement('style'); // 创建一个空style标签myStyle.setAttribute('type', 'text/css');//设置属性myStyle.innerHTML = 'body {background-color: chartreuse;}'; //设置标签内容
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流