JavaScript基础

参考学习资源：JavaScript入门 - 绿叶学习网，JavaScript最新教程通俗易懂_哔哩哔哩_bilibili

什么是JavaScript

概述

JavaScript是一门世界上最流行的脚本语言，是一种嵌入到HTML页面中的编程语言，由浏览器一边解释一边执行。

HTML和CSS只是描述性的语言，单纯使用这两个没办法做出一些特效，而必须使用编程的方式来实现，也就是使用JavaScript。

1、JavaScript与Java有什么关系吗？

很多人看到JavaScript和Java，自然而然就会问这两个究竟有什么关系。其实，它们也是有一毛钱关系的，并不能说完全没有关系。

JavaScript最初的确是受Java启发而开始设计的，而且设计的目的之一就是“看上去像Java”，因此语法上有不少类似之处，JavaScript很多名称和命名规则也借自Java。但是实际上，JavaScript主要设计原则源自Self和Scheme。

JavaScript和Java虽然名字相似，但是本质上是不同的，主要有以下2个方面。

JavaScript往往都是在网页中使用，而Java却可以在软件、网页、手机App等各个领域中使用。
从本质上讲，Java是一门面向对象的语言，而JavaScript更像是一门函数式编程语言。

2、我的页面加入了JavaScript特效，那这个页面是静态页面，还是动态页面呢？

不是“会动”的页面就叫动态页面，静态页面和动态页面的区别在于：是否与服务器进行数据交互。或者简单来说，是否用到了后端技术（如PHP、JSP、ASP.NET）。下面列出的4种情况都不一定是动态页面。

带有音频和视频
带有Flash动画
带有CSS动画
带有JavaScript动画

特别提醒大家一下，即使你的页面用了JavaScript，它也不一定是动态页面，除非你还用到了后端技术。

大佬10天就写完了这个语言
一个合格的后端人员，必须要精通JavaScript

历史

Javascript诞生记

JavaScript引入方式

外部JavaScript

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--引入外部CSS-->
    <link rel="stylesheet" type="text/css" href="index.css"/>
    <!--引入外部JavaScript-->
    <script src="js/index.js"></script>
</head>
<body>
</body>
</html>

内部JavaScript

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--1、在head中引入-->
    <script src="index.js"></script>
</head>
<body>
    <!--2、在body中引入-->
    <script src="index.js"></script>
</body>
</html>

元素引入方式

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function alertMes() 
        {
            alert("绿叶学习网，给你初恋般的感觉");
        }
    </script>
</head>
<body>
    <input type="button" value="按钮" onclick="alertMes()"/>
</body>
</html>

工具使用

熟悉用IDEA写JavaScript

写完直接点这里就可以直接运行到浏览器了

也可以右键，点击Run一下，就自动启动浏览器了

也可以直接点击之前的三角表示

浏览器控制台使用（Google浏览器为例）

Elements模块

显示HTML和CSS代码，可以用来复刻页面

Console模块

可以在这里打印页面中的变量的操作

Sources模块

这里可以调试页面代码，挺好用的

Network模块

可以查看页面请求记录，可以用来抓包

Application模块

查看一下信息，可以查看Session,Cookie

严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    前提:IEDA 需要设置支持ES6语法'use strict';
        严格检査模式，预防Javascript的随意性导致产生的一些问题
        必须写在Iavascript的第一行!
        局部变最建议都使用 let 去定义-->
    <script>
        'use strict'
        //全局变量
        i = 1;
    </script>
</head>
<body>
</body>
</html>

上面情况就会报错，需要局部变量才行，才安全

语法基础

变量与常量

在JavaScript中，给一个变量命名，我们需要遵循以下两个方面的原则。

变量由字母、下划线、$或数字组成，并且第一个字母不能是数字”。
变量不能是系统关键字和保留字。

在JavaScript中，如果想要使用一个变量，我们一般需要进行2步。

变量的声明
变量的赋值

对于变量的声明，小伙伴们记住一句话：所有JavaScript变量都是由var声明。在这一点上，JavaScript跟C、Java等语言是不同的。

在JavaScript中，常量指的是一个不能改变的量。也就是说，常量的值从定义开始就是固定的，一直到程序结束都不会改变。

常量，形象地说，就像千百年来约定俗成的名称，这个名称是定下来的，不能随便改变。

在JavaScript中，我们可以把常量看成是一种特殊的变量，之所以特殊，是因为它的值是不会变的。一般情况下，常量名全部大写，别人一看就知道这个值很特殊，有特殊用途，如：var DEBUG = 1

数据类型

所谓的数据类型，说白了，就是下图中“值”的类型。在JavaScript中，数据类型可以分为两种：一种是“基本数据类型”；另外一种是“引用数据类型”。其中，基本数据类型只有一个值，而引用数据类型可以含有多个值。

在JavaScript中，基本数据类型有5种：数字、字符串、布尔值、未定义值和空值。而常见的引用数据类型有两种：数组、对象。

数字

在JavaScript中，数字是最基本的数据类型。所谓的数字，就是我们数学上的数字，如10、-10、3.14等。

JavaScript中的数字是不区分“整型（int）”和“浮点型（float）”的。小伙伴们记住这一句话就可以了：在JavaScript中，所有变量都是用var声明。

字符串

字符串，从名字上来就很好理解，就是一串字符嘛。在JavaScript中，字符串都是用英文单引号或英文双引号（注意都是英文）括起来的。

单引号括起来的字符串中，不能含有单引号，只能含有双引号。同样的道理，双引号括起来的字符串中，也不能含有双引号，只能含有单引号。

如果数字加上双引号，这个时候JavaScript会把这个数字当做“字符串”来处理，而不是当做“数字”来处理。我们都知道，数字是可以进行加减乘除的，但是加上双引号的数字一般是不可以进行加减乘除的，因为这个时候它不再是数字，而是被当成字符串了。

布尔类型

和其他语言相同，知道就行

未定义值

在JavaScript中，未定义值，指的是如果一个变量虽然已经用var来声明了，但是并没有对这个变量进行赋值，此时该变量的值就是“未定义值”。其中，未定义值用undefined表示。

空值

数字、字符串等数据在定义的时候，系统都会分配一定的内存空间。在JavaScript中，空值用null表示。如果一个变量的值等于null，如“var n = null”，则表示系统没有给这个变量n分配内存空间。

运算符

在JavaScript中，加法运算符并非想象中那么简单，我们需要注意3点。

数字 + 数字 = 数字
字符串 + 字符串 = 字符串
字符串 + 数字 = 字符串

类型转换

“字符串”转换为“数字”

在JavaScript中，想要将字符串转换为数字，可以有2种方式。

Number()
parseInt()和parseFloat()

Number()方法可以将任何“数字型字符串”转换为数字。那什么是数字型字符串呢？像"123"、“3.1415”，这些只有数字的字符串就是数字型字符串，而"hao123"、"100px"等就不是。

准确来说，parseInt()和parseFloat是提取“首字母为数字的任意字符串”中的数字，其中，parseInt()提取的是整数部分，parseFloat()不仅会提取整数部分，还会提取小数部分。

举例：Number()

在线测试<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        document.write("Number('123')：" + Number("123") + "<br/>");
        document.write("Number('3.1415')：" + Number("3.1415") + "<br/>");
        document.write("Number('hao123')：" + Number("hao123") + "<br/>");
        document.write("Number('100px')：" + Number("100px"));
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果如图所示。

分析：

NaN指的是“Not a Number（非数字）”，从中可以看出，Number()方法只能将纯“数字型字符串”转换为数字，不能将其他字符串（即使字符串内有数字字符）转换为数字。在实际开发中，很多时候我们需要提取类似"100px"中的数字，要怎么做呢？这个时候就应该使用parseInt()和parseFloat()，而不是Number()了。

举例：parseInt()

在线测试<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        document.write("parseInt('123')：" + parseInt("123") + "<br/>");
        document.write("parseInt('3.1415')：" + parseInt("3.1415") + "<br/>");
        document.write("parseInt('hao123')：" + parseInt("hao123") + "<br/>");
        document.write("parseInt('100px')：" + parseInt("100px"));
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果如图所示。

分析：

从这个例子可以看出来，parseInt()会从左到右进行判断，如果第1个字符是数字，则继续判断，直到出现非数字为止（小数点也是非数字）；如果第1个字符是非数字，则直接返回NaN。

对于parseInt()来说，如果第1个字符不是数字，则返回NaN。但是这里第1个字符是加号（+）或减号（-），也就是非数字，parseInt()同样也是可以转换的。因为加号和减号在数学上其实就是表示一个数的正和负，所以parseInt()可以接受第1个字符是加号或减号。同样的，parseFloat()也有这个特点。

举例：parseFloat()

在线测试<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        document.write("parseFloat('123')：" + parseFloat("123") + "<br/>");
        document.write("parseFloat('3.1415')：" + parseFloat("3.1415") + "<br/>");
        document.write("parseFloat('hao123')：" + parseFloat("hao123") + "<br/>");
        document.write("parseFloat('100px')：" + parseFloat("100px"));
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果如图所示。

分析：

parseFloat()跟parseInt()非常类似，都是从第1个字符从左到右开始判断。如果第1个字符是数字，则继续判断，直到出现除了数字和小数点之外的字符为止；如果第1个字符是非数字，则直接返回NaN。

在“首字母是+、-或数字的字符串”中，不管是整数部分，还是小数部分，parseFloat()同样可以转换，这一点跟parseInt()是不一样的。

“数字”转换为“字符串”

在JavaScript中，想要将数字转换为字符串，也有2种方式。

（1）与空字符串相加
（2）toString()

举例：与空字符串相加

在线测试<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        var a = 2018 + "";
        var b = a + 1000;
        document.write(b);
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果如图所示。

分析：

数字加上字符串，系统会将数字转换成字符串。如果想要将一个数字转换为字符串，而又不增加多余的字符，我们可以将这个数字加上一个空字符串。

转义字符

如果是在document.write()中换行，则应该用：
如果是在alert()中换行，则应该用：\n

函数

函数的定义

没有返回值的函数

没有返回值的函数，指的是函数执行完就算了，不会返回任何值。

语法：

function 函数名(参数1 , 参数2 ,..., 参数n)
{
    ……
}

对于函数的参数，是可以省略的（即不写），当然也可以是1个、2个或n个。如果是多个参数，则参数之间用英文逗号（,）隔开。此外，函数参数的个数，一般取决于你实际开发的需要。

举例：

在线测试<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        //定义函数
        function addSum(a,b)
        {
            var sum = a + b;
            document.write(sum);
        }
        //调用函数
        addSum(1, 2);
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果如下图所示：

分析过程如下图所示：

有返回值的函数

有返回值的函数，指的是函数执行完了之后，会返回一个值，这个返回值可以供我们使用。

语法：

function 函数名(参数1 , 参数2 ,..., 参数n)
{
    ……
    return 返回值;
}

说明：

“有返回值的函数”相对“没有返回值的函数”来说，只是多了一个return语句罢了。return语句就是用来返回一个结果。

全局变量与局部变量

在JavaScript中，变量有一定的作用域（也就是变量的有效范围）。根据作用域，变量可以分为以下2种。

全局变量
局部变量

全局变量一般在主程序中定义，其有效范围是从定义开始，一直到整个程序结束为止。说白了，全局变量在任何地方都可以用。

局部变量一般在函数中定义，其有效范围只限于在函数之中，函数执行完了就没了。说白了，局部变量只能在函数中使用，函数之外是不能使用函数之内定义的变量的。

函数的调用

有常规的直接调用和在表达式中调用，还有下面的特殊

在超链接中调用

在超链接中调用，指的是在a元素的href属性中使用“javascript:函数名”的形式来调用函数。当用户点击超链接时，就会调用该函数。

语法：

<a href="javascript:函数名"></a>

举例：

在线测试<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function expressMes()
        {
            alert("她：我爱helicopter。\n我：oh~my，= =?!");
        }
    </script>
</head>
<body>
    <a href="javascript:expressMes()">表白对话</a>
</body>
</html>

浏览器预览效果如图所示。

当我们点击了超链接之后，就会调用函数expressMes()，预览效果如图所示。

在事件中调用

举例：

在线测试<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function alertMes()
        {
            alert("绿叶，给你初恋般的感觉~");
        }
    </script>
</head>
<body>
    <input type="button" onclick="alertMes()" value="提交" />
</body>
</html>

嵌套函数

嵌套函数，简单来说，就是在一个函数的内部定义另外一个函数。不过在内部定义的函数只能在内部调用，如果在外部调用，就会出错。

内置函数

在JavaScript中，函数还可以分为“自定义函数”和“内置函数”。自定义函数，指的是需要我们自己定义的函数，前面学的就是自定义函数。内置函数，指的是JavaScript内部已经定义好的函数，也就是说我们不需要自己写函数体，直接调用就行了，如下表所示。

函数	说明
parseInt()	提取字符串中的数字，只限提取整数
parseFloat()	提取字符串中的数字，可以提取小数
isFinite()	判断某一个数是否是一个有限数值
isNaN()	判断一个数是否是NaN值
escape()	对字符串进行编码
unescape()	对字符串进行解码
eval()	把一个字符串当做一个表达式一样去执行

字符串对象

属性与方法：

属性 / 方法	作用
`length`	获取长度
`toUpperCase()`	转大写
`toLowerCase()`	转小写
`charAt(index)`	获取指定位置字符
`slice()`、`substring()`、`substr()`	截取字符串
`replace()`、`replaceAll()`	替换字符串
`split()`	分割字符串
`indexOf()`、`lastIndexOf()`	检索字符串位置

数组对象

属性与方法：

属性 / 方法	作用
字面量`[]`或`Array()`构造函数	创建数组
`arr[index]`	获取和赋值
`length`	获取长度
`slice()`	截取数组
`push()`、`unshift()`	添加元素
`pop()`、`shift()`、`splice()`	删除元素
`sort()`	排序
`reverse()`	颠倒顺序
`join()`	连接成字符串

时间对象

常用操作：

使用new Date()创建对象。

可操作年、月、日、时、分、秒，如getFullYear()、setMonth()等。

getDay()获取星期几。

数学对象

属性 / 方法	作用
`Math.PI`等	属性
`Math.max()`、`Math.min()`	求最值
`Math.floor()`、`Math.ceil()`、`Math.round()`	取整
`Math.sin()`、`Math.cos()`等	三角函数
`Math.random()`	生成 0（包括）到 1（不包括）之间的随机数

DOM基础

不过在实际开发中，仅仅靠这些基本语法是远远满足不了我们各种开发需求的。虽然所有编程语言都有共同的基本语法，但是它们一定有着自己的独特之处，不然搞那么多语言出来干嘛呢。下面是JavaScript的核心技术，这些才是我们要重点掌握的东西，同时也是更高级技术（如jQuery、HTML5等）的基础。学完这部分，我们不仅可以制作各种炫丽的特效，还可以结合HTML和CSS，来开发一个真正意义上的页面了。

DOM是什么

DOM，全称“Document Object Model（文档对象模型）”，它是由W3C定义的一个标准。

在实际开发中，我们有时候需要实现鼠标移到某个元素上面时就改变颜色，或者动态添加元素或者删除元素等。其实这些效果就是通过DOM提供的方法来实现的。

简单来说，DOM里面有很多方法，我们通过它提供的方法来操作一个页面中的某个元素，例如改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。

一句话总结就是：DOM操作，可以简单理解成“元素操作”

DOM结构

DOM采用的是“树形结构”，用“树节点”形式来表示页面中的每一个元素。我们先看下面一个例子：

在线测试<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
<body>
    <h1>绿叶学习网</h1>
    <p>绿叶学习网是一个……</p>
    <p>绿叶学习网成立于……</p>
</body>
</html>

对于上面这个HTML文档，DOM会将其解析为如下图所示的树形结构。

利用这种简单的 家谱关系 我们可以把各节点之间的关系清晰地表达出来。那么为什么要把一个HTML页面用树形结构表示呢？这也是为了更好地给每一个元素进行定位，以便让我们找到想要的元素。

每一个元素就是一个节点，而每一个节点就是一个对象。也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作（这句话对理解DOM操作太重要了）。

节点类型

在JavaScript中，节点也是分为很多类型的。DOM节点共有12种类型，不过常见的只有3种（其他的不用管）。

元素节点
属性节点
文本节点

很多人看到下面这句代码，就认为只有一个节点，因为只有div这一个元素嘛。实际上，这里有3个节点。你没听错，就是3个！

<div id="wrapper">绿叶学习网</div>

从图中可以很清晰地看出来了，JavaScript会把元素、属性以及文本当作不同的节点来处理。表示元素的叫做“元素节点”，表示属性的叫做“属性节点”，而表示文本的当然也就叫做“文本节点”。很多人认为节点就一定等于元素，这样的理解是错的，因为节点有好多种。总而言之：节点跟元素是不一样的概念，节点是包括元素的。

在JavaScript中，我们可以使用nodeType属性来判断一个节点的类型。不同节点的nodeType属性值如下表所示。

节点类型	nodeType值
元素节点	1
属性节点	2
文本节点	3

nodeType的值是一个数字，而不是像"element"或"attribute"那样的英文字符串。至于怎么用nodeType来判断节点类型，后面很快就可以接触到。

此外，对于节点类型，有以下3点需要特别注意。

一个元素就是一个节点，这个节点称之为“元素节点”。
属性节点和文本节点看起来像是元素节点的一部分，但实际上，它们是独立的节点，并不属于元素节点。
只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点

获取元素

获取元素，准确来说，就是获取“元素节点（注意不是属性节点或文本节点）”。对于一个页面，我们想要对某个元素进行操作，就必须通过一定的方式来获取该元素，只有获取到了，才能对其进行相应的操作。

咦，这不跟CSS选择器相似吗？说得没错。只不过选择器是CSS的操作方式，而JavaScript却有着属于自己的另一套方法。在JavaScript中，我们可以通过以下6种方式来获取指定元素。

getElementById()
- 作用及语法：凭借元素的 id 来获取对应元素节点，语法是document.getElementById("id名")，与 CSS 的 id 选择器类似，不过这是 JavaScript 的操作手段。
- 注意要点：使用时 id 不能加 “#”；获取到的是 DOM 对象，变量命名习惯以 “o” 开头。因为浏览器按从上到下顺序解析页面，如果获取元素的代码在目标元素之前，要借助window.onload，保证页面加载完毕后再执行获取操作，防止报错。
getElementsByTagName()
- 作用及语法：依据标签名获取一组元素节点，语法为document.getElementsByTagName("标签名")，类似于 CSS 的元素选择器。
- 特性说明：获取的结果是类数组（伪数组），只能使用length属性和下标形式访问元素，像push()等数组方法无法使用。从document调用该方法获取的是整个页面的指定标签元素；从特定父元素调用（如parentElement.getElementsByTagName("标签名")），获取的是该父元素下的指定标签元素。
getElementsByClassName()
- 作用及语法：通过类名获取元素节点集合，语法是document.getElementsByClassName("类名")，和 CSS 的 class 选择器类似。
- 使用要点：获取的也是类数组，通过下标访问具体元素，写法与getElementsByTagName()相似。
querySelector()和querySelectorAll()
- 作用及语法：这两个方法能利用 CSS 选择器语法获取元素。document.querySelector("选择器")获取满足条件的首个元素，document.querySelectorAll("选择器")获取满足条件的所有元素。
- 使用建议：它们的写法和 CSS 选择器一样。对于 id 选择器，getElementById()效率更高，性能更好，所以更推荐使用。获取多个元素时，结果是类数组，即使只有一个元素，用querySelectorAll()获取也需要通过下标[0]访问。
getElementsByName()
- 作用及语法：专门用于通过name属性获取表单元素（主要是单选按钮和复选框），语法为document.getElementsByName("name名")。
- 使用场景：获取的结果同样是类数组，通过数组下标形式访问具体元素，常用于设置单选按钮选中状态或批量操作复选框。
document.title和document.body

因为一个页面只有一个title元素和一个body元素，JavaScript 提供了document.title和document.body来方便获取这两个元素，可直接用于修改页面标题和页面主体内容。

创建元素

在JavaScript中，我们可以使用createElement()来创建一个元素节点，也可以使用createTextNode()来创建一个文本节点，然后可以将元素节点与文本节点“组装”成为我们平常所看到的“有文本内容的元素”。

这种方式又被称为“动态DOM操作”。所谓的“动态DOM”，指的是使用JavaScript创建的元素，这个元素一开始在HTML中是不存在的。

语法：

var e1 = document.createElement("元素名");      //创建元素节点
var txt = document.createTextNode("文本内容");   //创建文本节点
e1.appendChild(txt);                          //把文本节点插入元素节点中
e2.appendChild(e1);

举例：动态创建图片

在线测试<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oImg = document.createElement("img");
            oImg.className = "pic";
            oImg.src = "img/haizei.png";
            oImg.style.border = "1px solid silver";
            document.body.appendChild(oImg);
        }
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果如下图所示。

分析：

在操作动态DOM时，设置元素class用的是className而不是class，这是初学者最容易忽略的地方。为什么JavaScript不用class，而是用className呢？其实我们在“2.2 常量与变量”这一节讲过，JavaScript有很多关键字和保留字，其中class已经作为保留字（可以回去翻一下），所以就另外起了一个className来用。了解这个背后的故事，以后我们也不容易犯错。

上面创建的都是一个元素，如果想要创建表格这种多个元素的，该怎么办呢？这时我们可以使用循环语句来实现。

总之很灵活

插入元素

appendChild()
- 作用：将一个新元素插入到父元素内部子元素的末尾。
- 语法：A.appendChild(B);，其中 A 是父元素，B 是新创建的子元素。
- 示例：在按钮点击事件中，获取文本框内容创建文本节点，再创建<li>元素，将文本节点添加到<li>中，最后把<li>添加到指定<ul>元素的末尾。当在文本框输入内容并点击按钮时，新内容会以<li>形式添加到列表最后。
insertBefore()
- 作用：将新元素插入到父元素中某一个子元素之前。
- 语法：A.insertBefore(B,ref);，A 为父元素，B 是新子元素，ref 是指定子元素，新元素会插入到 ref 之前。
- 示例：与 appendChild () 示例类似，不同之处在于使用insertBefore()方法，将新创建的<li>元素插入到指定<ul>元素的第一个子元素之前。在文本框输入内容并点击按钮后，新内容会出现在列表第一个位置。
总结对比：appendChild () 和 insertBefore () 是互补关系，appendChild () 在父元素最后一个子元素之后插入，insertBefore () 可在父元素任意子元素之前插入，使用这两种方法都需要先获取父元素。

删除元素

在JavaScript中，我们可以使用removeChild()方法来删除父元素下的某个子元素。

语法：

A.removeChild(B);

A表示父元素，B表示父元素内部的某个子元素。

如

oUl.removeChild(oUl.firstElementChild);
document.body.removeChild(oUl);

很灵活

复制元素

在JavaScript中，我们可以使用cloneNode()方法来实现复制元素。

语法：

obj.cloneNode(bool)

参数obj表示被复制的元素，而参数bool是一个布尔值，取值如下。

举例：

在线测试<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () 
            {
                var oUl = document.getElementById("list");
                document.body.appendChild(oUl.cloneNode(1));
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <input id="btn" type="button" value="复制" />
</body>
</html>

替换元素

在JavaScript中，我们可以使用replaceChild()方法来实现替换元素。

语法：

A.replaceChild(new,old);

说明：

A表示父元素，new表示新子元素，old表示旧子元素。

DOM进阶

HTML属性操作（对象属性）

获取 HTML 属性值
- 语法与说明：使用obj.attr语法，obj为通过getElementById()等方法获取的 DOM 对象，attr是属性名。通过点运算符获取属性值，但获取元素的class时，需用obj.className，而非obj.class。
- 不同场景获取示例
  - 静态 HTML 元素：如获取按钮的id属性值，先获取按钮元素节点，再用oBtn.id获取。
  - 动态 DOM 元素：动态创建按钮并添加点击事件，在事件中用oInput.id获取其id属性值。
- 表单元素值的获取
  - 文本框：通过value属性获取，即使未显式定义，HTML 也默认给单行文本框添加空的value属性。
  - 单选框：获取所有同name的单选框元素集合，遍历判断checked属性是否为true，若选中则获取其value值。
  - 复选框：同样获取同name的复选框元素集合，遍历选中的复选框，累加其value值。
  - 下拉菜单：直接获取select元素的value值，用户选中的option的value会自动成为select元素的value值。
设置 HTML 属性值
- 语法与说明：使用obj.attr = "值";语法，obj是 DOM 对象，attr是属性名。

实际上这些内容再DOM基础已经用过很多了，这里在捋捋就行

HTML属性操作（对象方法）

getAttribute()：用于获取元素属性值，语法为obj.getAttribute("attr") ，其中obj是元素对象，attr是属性名，且属性名需用英文引号括起来。该方法与obj.attr在获取固有属性值时等价，都可用于静态 HTML 元素和动态 DOM 元素。但获取自定义属性值时，只能用getAttribute()，例如为input元素自定义data属性，obj.attr无法获取其值，而obj.getAttribute("data")可以。
setAttribute()：用于设置元素属性值，语法是obj.setAttribute("attr","值") ，有两个参数，分别为属性名和要设置的值。它与obj.attr = "值"在设置固有属性值时效果相同，同样，设置自定义属性值只能使用setAttribute()方法。
removeAttribute()：专门用于删除元素的某个属性，语法为obj.removeAttribute("attr") 。在控制元素样式属性时经常与class属性结合使用，比如删除class属性来改变元素样式。此外，oP[0].className = ""与oP[0].removeAttribute("class")在删除class属性上效果一致。
hasAttribute()：用于判断元素是否含有某个属性，语法为obj.hasAttribute("attr") ，返回布尔值，存在该属性返回true，否则返回false。在删除属性前，通常先用此方法判断属性是否存在，以确保操作的严谨性。
两种操作方式总结：“对象属性方式” 和 “对象方法方式” 都能操作静态 HTML 和动态 DOM 的属性；而操作自定义属性，仅 “对象方法方式” 可行。

其中自定义属性，指开发者为对象或 DOM 元素添加的、不属于 JavaScript 语言或 DOM 规范预定义的属性。就像Java中用户自定义的Student类中的name,age等属性

CSS属性操作

获取 CSS 属性值：使用getComputedStyle()方法，语法为getComputedStyle(obj).attr 。obj是 DOM 对象，attr是 “骆驼峰型” CSS 属性名。该方法有兼容性，支持 Google、Firefox 和 IE9 及以上。例如，获取元素背景颜色可写为getComputedStyle(oBox).backgroundColor，且它还有等价写法getComputedStyle(obj)["attr"]。
设置 CSS 属性值
- style 对象：通过在元素的style属性添加样式来设置，设置的是行内样式，语法为obj.style.attr = "值"; ，attr采用 “骆驼峰” 型写法，且obj.style.attr等价于obj.style["attr"]。复合属性操作方式相同，如oBox.style.border = "2px solid blue";。若属性值来自文本框等获取的字符串，需用obj.style["attr"]方式设置。同时添加多个样式时，需逐个书写，较为繁琐。
- cssText 属性：可同时设置多个 CSS 属性，语法为obj.style.cssText = "值"; ，“值” 是字符串，属性名使用平常的 CSS 写法，而非 “骆驼峰型”。例如oDiv.style.cssText = "width:100px;height:100px;border:1px solid gray;"; 。实际开发中，为元素同时设置多个 CSS 属性时，更倾向于通过操作 HTML 属性添加class来实现。
获取 CSS 属性值的疑问解答：获取 CSS 属性值不能用obj.style.attr或obj.style.cssText。obj.style.attr只能获取元素style属性中设置的 CSS 属性，无法获取内部样式或外部样式；JavaScript 中不存在oBox.cssText.width这种写法。getComputedStyle()获取的是根据 CSS 优先级计算后的样式结果，能正确获取不同来源样式下的属性值。

DOM遍历

DOM 遍历概述：DOM 遍历可简单理解为 “查找元素” ，是以 “当前所选元素” 为基点，查找其相关的父元素、子元素或兄弟元素。在 JavaScript 中，主要分为查找父元素、查找子元素和查找兄弟元素这 3 种情况。
查找父元素：使用parentNode属性来获取某个元素的父元素，语法为obj.parentNode，obj是通过getElementById()等方法获取的 DOM 对象。例如在表格示例中，点击td元素时，利用this.parentNode获取其所在行（tr元素），并为该行添加样式，此操作使用querySelector()等方法难以实现。
查找子元素
- 两组属性对比：可使用childNodes、firstChild、lastChild和children、firstElementChild、lastElementChild这两组属性来获取子元素。childNodes获取的是所有子节点，包括元素节点和文本节点；children仅获取元素节点。如在ul元素示例中，childNodes.length的值包含了元素间换行产生的文本节点，而children.length只统计元素节点数量。
- 删除子元素问题及解决：在删除子元素时，如果使用lastChild，由于文本节点的存在，可能需要点击两次才能删除一个目标元素。解决办法有去掉元素间的 “换行空格” ，或者使用nodeType属性判断节点类型，根据不同类型执行不同的删除操作。
- 新方法优势：firstElementChild、lastElementChild和children[i]等属性和方式，专门针对元素节点操作，相比旧方法更加便捷高效，如使用oUl.removeChild(oUl.lastElementChild);可直接删除最后一个子元素节点。
查找兄弟元素：查找兄弟元素有两组方式。previousSibling和nextSibling会查找出文本节点（一般是空白节点），而previousElementSibling和nextElementSibling专门查找前一个和后一个兄弟元素节点。建议使用previousElementSibling和nextElementSibling来操作元素节点，如在删除指定列表项前一个兄弟元素的示例中，使用previousElementSibling可正确实现功能。
与获取元素方法对比：DOM 遍历的方法是对 “9.4 获取元素” 中方法的补充，能够实现获取元素的父元素、获取当前点击位置下的子元素等前者无法完成的操作。

innerHTML和innerText

基本概念及作用：innerHTML属性用于获取和设置一个元素的 “内部元素”，innerText属性用于获取和设置一个元素的 “内部文本”。与使用appendChild()等方法创建动态 DOM 元素相比，innerHTML在处理复杂元素插入时更为简便。
使用示例
- 创建元素：创建图片元素时，使用appendChild()方法需要创建元素节点、设置属性等多个步骤；而使用innerHTML，只需一行代码document.body.innerHTML = '<img class="pic" src="images/haizei.png" style="border:1px solid silver"/>';即可完成相同效果。
- 获取内容：在包含<p id="content"><strong style="color:hotpink;">绿叶学习网</strong></p>的页面中，通过document.getElementById("txt1").value = oP.innerHTML;获取到的innerHTML值包含<strong>标签及样式信息，即<strong style="color:hotpink;">绿叶学习网</strong>；而通过document.getElementById("txt2").value = oP.innerText;获取到的innerText值仅为文本 “绿叶学习网”。
- 设置内容：使用innerHTML设置<div>元素内容时，如oDiv.innerHTML = '<span>绿叶学习网</span>\ <span style="color:hotpink;">JavaScript</span>\ <span style="color:deepskyblue;">入门教程</span>';，可一次性插入多个带样式的元素，且字符串可通过在每行末尾加反斜杠（\）换行书写，增强代码可读性。
区别对比：从表格对比来看，对于纯文本内容，innerHTML和innerText获取的值相同；但当元素包含标签时，innerHTML获取的是包含标签的完整内容，innerText仅获取文本内容，如对于<div><em></em></div>，innerHTML为<em></em>，innerText为空字符串。
兼容性及替代属性：过去innerText在 Firefox 旧版本中存在兼容性问题，但现在 Firefox 新版本已全面支持，无需考虑旧版本兼容性。textContent属性与innerText等价，以前为兼容所有浏览器常用textContent，现在为减轻记忆负担，记住innerText即可。

事件基础

事件调用方式

在script标签中调用

在script标签中调用事件，指的是在< script >< /script >标签内部调用事件。

语法：

obj.事件名 = function()
{
    ……
};

说明：

obj是一个DOM对象，所谓的DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。

由于上面是一个赋值语句，而语句一般都是要以英文分号结束的，所以最后需要添加一个英文分号（;）。虽然没加上也不会报错，不过为了规范，还是加上比较好。

举例：

在线测试<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            //获取元素
            var oBtn = document.getElementById("btn");
            //为元素添加点击事件
            oBtn.onclick = function () 
            {
                alert("绿叶学习网");
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="弹出" />
</body>
</html>

分析：

oBtn.onclick = function () {alert("绿叶学习网");};

分析图

精髓：是不是跟给元素属性赋值很相似呢？其实从本质上来说，这种事件调用方式就是操作元素的属性。只不过这个属性不是一般的属性，而是“事件属性”。上面这句代码的意思就是给元素的onclick属性赋值，这个值是一个函数来的。你没看错，函数也是可以赋值给一个变量的。

在元素中调用事件

在元素中调用事件，指的是直接在HTML属性中来调用事件，这个属性又叫做“事件属性”。

举例：

在线测试<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function alertMes()
        {
            alert("绿叶学习网");
        }
    </script>
</head>
<body>
    <input type="button" onclick="alertMes()" value="弹出" />
</body>
</html>

在实际开发中，我们更倾向于在script标签中调用事件，因为这种方式可以使得结构（HTML）与行为（JavaScript）分离，代码更具有可读性和维护性。

鼠标事件

JavaScript中，常见的鼠标事件如下表所示。

事件	说明
onclick	鼠标单击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmousedown	鼠标按下事件
onmouseup	鼠标松开事件
onmousemove	鼠标移动事件

oBtn.onclick = alertMes;
function alertMes() 
{
    alert("欢迎来到绿叶学习网！");
};

上面这种代码其实可以等价于：

oBtn.onclick = function () 
{
    alert("欢迎来到绿叶学习网！");
};

这两种写法都是等价的。

键盘事件

在JavaScript中，常用的键盘事件共有2种。

键盘按下：onkeydown
键盘松开：onkeyup

onkeydown表示键盘按下一瞬间所触发的事件，而onkeyup表示键盘松开一瞬间所触发的事件。对于键盘来说，都是先有“按下”，才有“松开”，也就是onkeydown发生在onkeyup之前。

举例：统计输入字符的长度

在线测试<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oTxt = document.getElementById("txt");
            var oNum = document.getElementById("num");
            oTxt.onkeyup = function () 
            {
                var str = oTxt.value;
                oNum.innerHTML = str.length;
            };
        };
    </script>
</head>
<body>
    <input id="txt" type="text" />
    <div>字符串长度为：<span id="num">0</span></div>
</body>
</html>

在这个例子中，我们实现的效果是：用户输入字符串后，会自动计算字符串的长度。

实现原理很简单，每输入一个字符，我们都需要敲击一下键盘。然后每次输完该字符，也就是松开键盘时，都会触发一次onkeyup事件，此时我们计算字符串的长度就可以了。

表单事件

onfocus 和 onblur：onfocus是获取焦点时触发的事件，onblur是失去焦点时触发的事件，二者常配合使用。具有焦点事件的元素主要是表单元素（如单选框、复选框、文本框等）和超链接，可通过按 Tab 键判断元素是否具有焦点特性。在实际开发中，这两个事件多用于文本框。
- 示例 - 搜索框：在搜索框示例中，当文本框获得焦点时，若其内容为提示文字，则清空内容；失去焦点且内容为空时，恢复提示文字。实现此效果还可使用 HTML5 表单元素新增的placeholder属性。
- focus () 方法：通过focus()方法可使元素自动获取焦点，它与onfocus不同，focus()是让元素获取焦点的方法，onfocus是用于事件操作的属性。
onselect：当选中 “单行文本框” 或 “多行文本框” 中的内容时，会触发onselect事件。
- 示例：在示例中，选中单行文本框或多行文本框内容时，会弹出相应提示框。但该事件在实际开发中使用较少。
- select () 方法：select()方法用于全选文本框内容，与onselect不同，select()是方法，onselect是属性，二者关系和focus()与onfocus相似。例如在搜索框中，可通过点击事件调用select()方法实现点击时全选文本内容。
onchange：该事件常用于具有多个选项的表单元素，如单选框、复选框、下拉列表选择某一项时会触发。
- 示例 - 单选框：通过获取具有相同name属性的单选框元素，遍历为每个单选框添加onchange事件。当单选框状态改变且被选中时，将其value值显示在指定元素中。
- 示例 - 复选框：在复选框全选与反选示例中，“全选 / 反选” 复选框状态改变时，通过循环控制其他复选框的选中或取消选中状态。
- 示例 - 下拉列表：当下拉列表选项改变时，触发onchange事件，通过obj.options[n]获取列表项，obj.selectedIndex获取选中项下标，获取选中项的value值并使用window.open()在新窗口打开对应页面。注意选择下拉列表选项触发的是onchange事件，而非onselect事件。

编辑事件

oncopy 事件
- 功能与语法：用于防止页面内容被复制，语法为 document.body.oncopy = function () { return false; }。
- 示例及效果：在示例中，尽管在页面上选取文本后点击鼠标右键仍有【复制】选项，但实际粘贴时无法得到内容。
onselectstart 事件
- 功能与语法：可防止页面内容被选取，语法为 document.body.onselectstart = function () { return false; }。
- 与 oncopy 关系：从本质上讲，防止页面内容被选取也是为了防止复制内容，与 oncopy 事件是实现防止复制的两种不同方式。
oncontextmenu 事件
- 功能与语法：用于禁止鼠标右键功能，语法为 document.oncontextmenu = function () { return false; }。
- 快捷键影响：即使禁止了鼠标右键，用户仍可使用如 ctrl+c 等快捷键进行复制、ctrl+s 等快捷键进行保存等操作。
综合应用与建议：这三个事件在多数情况下用于保护版权，但为了保证良好的用户体验，应谨慎使用，除非必要情况尽量少用。

页面事件

onload 事件
- 功能与语法：表示文档加载完成后执行的事件，语法为 window.onload = function(){……}。通常在需要获取页面元素时使用，因为浏览器默认从上到下解析页面，若在元素加载前就尝试获取，会导致找不到元素而报错。使用 window.onload 可确保页面解析完后再执行其中代码。
- 示例及分析：如在按钮点击事件中获取按钮元素并添加点击响应，若不使用 window.onload，点击按钮时会因提前获取不存在的元素而报错；使用后则能正常执行。而对于函数中获取元素的情况，如果函数在页面加载后被调用（如按钮点击触发函数调用），即使不使用 window.onload 也可获取元素，因为函数定义时浏览器会跳过，直到被调用时页面已加载完成。
onbeforeunload 事件
- 功能与语法：在离开页面之前触发，语法为 window.onbeforeunload = function(){……}。通常比 window.onunload 更常用。
- 示例及说明：在示例中，打开页面正常显示，关闭页面时会触发该事件，可进行一些提示操作，如示例中提示用户记得再来。事件处理函数中的 e 是 event 对象，后续章节会详细介绍。

事件进阶

事件监听器

事件处理器：通过操作 HTML 属性的方式为元素添加事件，如oBtn.onclick = function(){……};。其用法简单、代码易读，但存在缺陷，无法为一个元素添加多个相同事件。例如，多次为按钮添加onclick事件时，只会执行最后一次添加的事件处理函数。
事件监听器
- 绑定事件：使用addEventListener()方法为元素添加事件，语法为obj.addEventListener(type, fn, false)。其中obj是 DOM 对象，type是事件类型（无需加on前缀），fn是函数名或匿名函数，false表示事件冒泡阶段调用。该方法可给同一元素添加多个相同事件，如多次为按钮添加click事件，点击按钮时会依次触发。一般情况下，为元素添加单个事件时，obj.addEventListener("click", function () {……}, false)与obj.onclick = function () {……}等价。此外，对于多次调用window.onload的问题，可将其改为window.addEventListener("load",function(){……},false)来解决，也可使用自定义的addLoadEvent()函数（其采用装饰者模式，具体代码可查阅相关资料）。
- 解绑事件：使用removeEventListener()方法为元素解绑事件，语法为obj.removeEventListener(type, fn, false)，fn必须是函数名。它只能解除由addEventListener()添加的事件，如在示例中，点击按钮可解除p元素通过addEventListener()添加的点击事件。若要解除由事件处理器添加的事件，可使用obj.事件名 = null;。解除事件在实际开发中有重要作用，如限制按钮仅执行一次点击事件，或在拖拽效果的onmouseup事件中解除onmousemove事件以避免出现 bug 等。

event对象

event 对象概述：当事件发生时，与该事件相关的详细信息会临时存储在event对象中。每个事件都有对应的event对象，类似于飞机的黑匣子。在 JavaScript 中，可通过event对象获取事件的详细信息，这里主要介绍常用属性，更深入内容在 JavaScript 进阶中讲解。
常用属性介绍

属性说明

type 事件类型

keyCode 键码值

shiftKey 是否按下shift键

ctrlKey 是否按下Ctrl键

altKey 是否按下Alt键
- type 属性：用于获取事件类型。在示例中，为按钮添加点击事件处理函数，函数接收e作为参数（e为event对象的变量名，可替换），通过e.type可获取事件类型为click。JavaScript 会默认将event对象作为事件函数的第一个参数传入，但在 IE8 及以下版本存在兼容性问题，曾需用var e = e || window.event;处理，如今随着 IE 逐渐退出历史舞台，此兼容性问题可暂不考虑。
  
  举例：
```
!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function (e) 
            {
                alert(e.type);
            };
        }
    </script>
</head>
<body>
    <input id="btn" type="button" value="按钮" />
</body>
</html>
```
- keyCode 属性：返回按下键盘按键的键码值，是一个数值。如常用的方向键及对应的键码：“W（上）” 为 87、“S（下）” 为 83、“A（左）” 为 65、“D（右）” 为 68、“↑” 为 38、“↓” 为 40、“←” 为 37、“→” 为 39。而对于shift、ctrl和alt键，不通过keyCode属性获取，应使用shiftKey、ctrlKey和altKey属性（返回布尔值）。
  
  按键键码
  
  W（上） 87
  
  S（下） 83
  
  A（左） 65
  
  D（右） 68
  
  ↑ 38
  
  ↓ 40
  
  ← 37
  
  → 39
应用示例
- 禁止特定按键：在文档的keydown事件处理函数中，通过判断e.shiftKey、e.altKey、e.ctrlKey是否为true，若按下这些键则弹出提示 “禁止使用 shift、alt、ctrl 键！”。
- 获取方向键并显示：在keydown事件监听函数中，根据e.keyCode的值判断按下的键是否为方向键或对应的字母键，若是则在指定span元素中显示相应的方向。如在游戏开发中常利用此技巧通过键盘控制人物行走方向，可参考相关书籍进一步学习。

属性	说明
type	事件类型
keyCode	键码值
shiftKey	是否按下shift键
ctrlKey	是否按下Ctrl键
altKey	是否按下Alt键

按键	键码
W（上）	87
S（下）	83
A（左）	65
D（右）	68
↑	38
↓	40
←	37
→	39

window 对象

window 对象简介：它是 JavaScript 中极为关键的对象，代表着浏览器窗口，是众多操作的核心枢纽。它提供了一系列与浏览器窗口交互的属性和方法，在整个 JavaScript 编程环境中起着基础性的作用。
窗口操作：可以利用其方法实现多种窗口操作。例如，open()方法能够打开新的浏览器窗口，并且可以指定新窗口的 URL、窗口大小、是否有菜单栏等参数；resizeTo()和resizeBy()方法分别可精确设置窗口大小和相对调整窗口大小；moveTo()和moveBy()方法则能将窗口移动到指定位置或相对当前位置进行移动，这些操作在创建特定布局的网页应用或实现个性化浏览体验时非常实用。
对话框：提供了三种重要的对话框方法。alert()方法用于向用户显示简单的提示信息，通常用于告知用户某些重要事件或操作结果；confirm()方法会弹出一个带有确认和取消按钮的对话框，用户操作后会返回一个布尔值，方便在执行关键操作前获取用户的明确确认，如删除数据时确认用户意图；prompt()方法不仅可以显示提示信息，还能接收用户输入的文本内容，在需要用户提供自定义信息的场景中发挥作用，比如获取用户昵称或搜索关键词等。
定时器：包含setTimeout()和setInterval()两个重要方法。setTimeout()方法接受一个函数和一个延迟时间（以毫秒为单位）作为参数，在经过指定延迟后仅执行一次传入的函数，常用于实现延迟执行的一次性任务，如页面加载完成后延迟显示某个元素；setInterval()方法同样接受函数和时间间隔参数，但它会按照设定的时间间隔不断重复执行函数，在创建动画效果（如定时更新元素位置或样式）或定期检查某些条件（如实时数据更新）等方面应用广泛。
location 对象：通过该对象可以全面获取和修改当前页面的 URL 信息。href属性用于获取或设置完整的 URL 地址，方便实现页面跳转或获取当前页面的来源；pathname属性可获取 URL 中的路径部分，对于处理页面内不同模块的导航或资源定位很有帮助；search属性则用于获取 URL 中的查询参数部分，在与服务器端交互数据或根据用户输入的参数动态调整页面内容时经常用到。
navigator 对象：提供了丰富的关于浏览器的信息。userAgent属性可获取浏览器的用户代理字符串，通过分析该字符串可以确定浏览器类型、版本号以及操作系统等信息，这对于进行浏览器兼容性处理至关重要，例如根据不同浏览器版本加载不同的 JavaScript 代码或 CSS 样式；appName属性可获取浏览器的名称，appVersion属性可获取浏览器的版本信息，这些信息在进行用户环境检测和统计分析时具有重要价值。

document 对象

document 对象简介：它是 JavaScript 操作 HTML 文档的核心工具，是实现动态网页效果的关键所在。通过它可以深入访问和灵活修改文档中的各种元素、属性以及内容，是连接 JavaScript 与 HTML 文档的重要桥梁。
document 对象属性：其中title属性用于获取或设置 HTML 页面的标题，在页面加载时可以动态修改标题以反映页面状态的变化，或者在创建多页面应用时根据不同页面内容设置独特的标题；body属性可直接访问页面的主体元素，方便对页面主体内容进行批量操作，如添加、删除或修改主体内的元素，改变页面整体布局或样式。
document 对象方法：提供了多种重要的方法。getElementById()方法通过元素的id属性快速获取单个元素，在需要精确操作特定元素时非常高效；getElementsByTagName()方法根据标签名获取一组元素，适用于对同一类型的多个元素进行批量处理，如获取页面中所有的<p>元素并统一修改样式；createElement()方法用于创建新的 HTML 元素，结合appendChild()等方法可以动态地向文档中添加新元素，实现页面内容的动态更新，如根据用户操作动态生成列表项或按钮等。

posted @ 2025-02-01 23:29 韩熙隐ario 阅读(24) 评论(1) 收藏举报

刷新页面返回顶部

ario

JavaScript基础

什么是JavaScript

概述

历史

JavaScript引入方式

外部JavaScript

内部JavaScript

元素引入方式

工具使用

熟悉用IDEA写JavaScript

浏览器控制台使用（Google浏览器为例）

Elements模块

Console模块

Sources模块

Network模块

Application模块

严格检查模式

语法基础

变量与常量

数据类型

数字

字符串

布尔类型

未定义值

空值

运算符

类型转换

“字符串”转换为“数字”

“数字”转换为“字符串”

转义字符

函数

函数的定义

没有返回值的函数

有返回值的函数

全局变量与局部变量

函数的调用

在超链接中调用

在事件中调用

嵌套函数

内置函数

字符串对象

数组对象

时间对象

数学对象

DOM基础

DOM是什么

DOM结构

节点类型

获取元素

创建元素

插入元素

删除元素

复制元素

替换元素

DOM进阶

HTML属性操作（对象属性）

HTML属性操作（对象方法）

CSS属性操作

DOM遍历

innerHTML和innerText

事件基础

事件调用方式

在script标签中调用

在元素中调用事件

鼠标事件

键盘事件

表单事件

编辑事件

页面事件

事件进阶

事件监听器

event对象

window 对象

document 对象

公告