[前端]JavaScript基础&DOM介绍

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

Start

对于任何一门编程语言，先从定义变量和基本数据类型和简单的输出内容起手

定义变量&简单的输出

使用var来定义变量，var是单词variable的缩写

var a = 10
var b = 1.5
var c = 'Hello JavaScript!'

使用**console.log()方法或者alert()**来简单的输出内容

console.log("This message will appear in console.")	//使用console.log()输出内容会展示在控制台里

alert("This message will appear in alert dialog")	//使用alert()输出内容会弹出警告框

变量的类型

一、基本类型

1、字符串 “” ‘’

var a = "This is a string type variable which use \""
var b = 'This is a string type variable which use \''

2、数字

var a = 20
var b = 1.5
console.log(a + b)	//此处会在控制台输出21.5

3、布尔类型

var a = true
var b = false
console.log(a)	//此处控制台会输出true

4、undefined类型和null类型

undefined类型

当声明一个变量但没有赋值时，该变量为undefined类型，需要注意的是，undefined在布尔运算中被认为是false

var a
console.log(typeof(a))	//使用typeof函数来输出变量类型
console.log(a)	//直接用undefined变量输出会也输出undefined

在前端，经常使用undefined来清空变量

var variable = "Something need to clean."
variable = undefined
console.log(variable)

null类型

JavaScript基本类型之一，特指对象的值未设置，是表示缺少的标志，指示变量未指向任何对象，为了更好理解，可以把null看作未创建的对象，需要注意的是，在布尔运算中null被认为是false这一点是和undefined是相同的，也可用于清空变量的值

var a = 20
a = null
console.log(a)	//此处控制台会输出null

undefined和null有哪些区别呢？

首先说结论：

1. 相等但不全等
2. 在数字运算中被转换为的number类型的值不同

• 相等但不全等的例子

console.log(null == undefined)	//true
console.log(null === undefined)	//false
//值相等都被认为是false，但类型不同

• 在数字运算中被转换成为number类型的值不同的例子

var a = 10
console.log(a + null)	//此处控制台会输出10，null在算数运算中的值为0

var b = 10
console.log(b + undefined)	//此处控制台会输出NaN，undefined在算数运算中的结果为NaN,即Not a Number

二、复合类型

1、数组 [] 通过下标进行访问

JavaScript中的数组可以存储多类型的项

var array = ["String", 'String', 10, 10.5, true, false, null, undefined]

对象和数组也可以存入数组中

var array = [{id:"这是一个对象", function(){alert("Hello")}}, ["我是另一个数组", "I'm another array"]]

数组通过下标来获取其中的值，如

var arr = ["第一项", "第二项"]
console.log(arr[0])	//此处控制台会输出 第一项

2、对象 {}

对象类型的成员的设定值的格式为key: value，成员可以为函数，数量不固定，对象的成员也可以为对象，如：

var obj = {
    name: "李四",
    sex: "男",
    age: 50,
    play: ["篮球", "排球", "羽毛球"],
    wife: {
        name: "王五",
        sex: "女",
    },
    children: [{
        name: "老大",
        sex: "女",
    }, {
        name: "老二",
        sex: "男",
    }],
    eat: function eatFood(food_1, food_2) {
        console.log("我吃了" + food_1 + "和" + food_2)
    },
    doSleep: function() {
        console.log("正在睡觉")
    }
}

注意，每个成员使用逗号分隔，最后一个成员的末尾可加可不加逗号

函数

命名函数

该函数的命名格式为function 函数名(参数1, 参数2…) {函数体}，示例如下：

function 函数名(参数1, 参数2) {
    console.log(参数1 + 参数2)
}

也可将函数赋给变量，如：

var func = function Demo(a, b) {
    console.log(a + b)
}
// 通过变量调用函数
func(10, 20)	//此处控制台输出30
// 或者直接调用
Demo(10, 20)

匿名函数

该函数的命名格式为function (参数1, 参数2…) {函数体}，示例如下：

// 和命名函数一样，匿名函数也支持赋值给变量进行调用，但无法直接调用
var func = function(a, b) {
    console.log(a + b)
}

// 调用
func("Hello", " JavaScript")	//此处输出 Hello JavaScript

PS：可以使用console.dir(要查看的对象)来从控制台打印对象的结构

函数与页面交互

JavaScript可以实现页面的动态交互，以下仅举几个例子：

// onclick点击事件
document.getElementById("id").onclick = function() {
    console.log("Dont touch me!")
}
// ondblclick双击事件
document.getElementById("id").ondblclick = function() {
    console.log("I said dont touch me! :-(")
}
// onmouseleave鼠标离开事件
document.onmouseleave = function() {
    alert("Sorry that's my fall, dont leave me! T^T, i cant live with out you!")
}

更多的事件可以通过console.dir(document)来查看详细结构，或者查询[MDN](“JavaScript | MDN (mozilla.org)”)来详细了解

DOM

DOM的全称是Document Object Model文档对象模型

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

HTML DOM 模型被构造为对象的树：

JS可以通过DOM查找到页面上的元素

查找

通常，通过 JavaScript，需要操作 HTML 元素

• 可以把DOM想象成一个大群聊，而你是该群的管理员，你收到举报有个炸群的兄台时

这时候查找显得尤为重要。

为了做到这件事情，必须首先找到该元素，有几种方法来做这件事：

• 通过 id 查找HTML元素
• 通过class值获取元素
• 通过元素名称name值获取元素
• 根据选择器获取元素
• 根据关系查找（不常用）

通过 id 查找HTML元素

var obj = document.getElementById("sample")

上述例子中，obj会被赋值为查找到id为sample的第一个对象

通过class值获取元素

通常来说，使用查找时不会仅仅查找第一个对象而是获得一个符合条件的数组

var objs = document.getElementsByClassName("sample")
objs[0].onclick = function() {
    alert("I'm the fist element of array which made by different elements but same className")
}

上述示例中会返回所有符合class值为sample的元素所形成的数组，该数组元素通过下标调取

通过元素名称name值获取元素

此方法也会返回一个数组

var objs = document.getElementsByTagName("sample")
objs[0].onclick = function() {
    alert("I'm the fist element of array which made by different elements but same Name")
}

上述示例中会返回所有符合name值为sample的元素所形成的数组，该数组元素通过下标调取

根据选择器获取元素

选择器可以通过我之前的文章补习CSS选择器

获取数组

var objs = document.querySelectorAll(".sample:nth-child[even]")	//由sample类中偶数项目组成的数组
objs[0].onclick = function() {
    alert("I'm the fist element of array")
}

上述示例中会返回所有符合选择器值的元素所形成的数组，该数组元素通过下标调取

获取第一个符合条件的元素

var obj = document.querySelector(".sample")

根据关系查找

var obj = document.getElementById("sample")
console.log(obj.nextSibling)	//输出同Id下的另一个兄弟元素

元素之间的关系存储在元素的结构中，可以通过console.dir()来查看某一个元素的结构

以下是一些常用的结构属性

属性	含义
parentNode parentElement	父级元素
childNodes children	子级元素
fistChild firstElementChild	第一个子级元素
lastChild lastElementChild	最后一个子级元素
previousSibling previousElementSibling	上一个同级元素
nextSibling nextElementSibling	下一个同级元素

更多详情请参阅[MDN](“MDN Web Docs (mozilla.org)”)

修改

修改从以下三个方面入手：

• 改内容
• 改属性
• 改样式

改内容

1. innerText属性存储的是该标签的内容
2. innerHTML属性存储的是该标签的HTML内容

var obj = document.getElementById("sample")
obj.innerText = "Hello JavaScript"
obj.innerHTML = "<p>Hello JavaScript</p>"

改属性

对于原生属性，可以通过 对象.属性名 = 值 来设置

var obj = document.getElementById("sample")
obj.className = "demo"

• 也可以通过以下两种方法添加和获取自定义属性

var obj = document.getElementById("sample")
// setAttribute(属性名, 属性值)设置
obj.setAttribute("name", "value")
// getAttribute(属性名)获取
console.log(obj.getAttribute("name"))	//输出 value

小Tip：通过上面提到的undefined和null即可清空属性的值，但无法删除属性如

var obj = document.getElementById("sample")
obj.setAttribute("name", "value")
obj.setAttribute("name", undefined)
console.log(obj.getAttribute("name"))	//输出 undefined

• 删除属性可以通过以下方法

var obj = document.getElementById("sample")
// removeAttribute(属性名)删除
obj.setAttribute("name", "value")
obj.removeAttribute("name")

改样式

通过更改style下的属性

var obj = document.getElementById("sample")
obj.style.color = "blue"
obj.style.display = "flex"
obj.style.fontSize = "20px"

对于style下的属性，它们都是CSS属性，但不同的是带 “-” 符号的属性都改写为驼峰写法，如：font-size 对应 fontSize

改变HTML输出流

JavaScript 能够创建动态的 HTML 内容，在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容

document.write(Date())	// 此时浏览器中会显示当前的准确事件

需要注意的是， 绝对不要在文档(DOM)加载完成之后使用 document.write()，这会覆盖该文档

通过改变元素的innerText或者innerHTML也可以改变其内容达到类似的效果，上文已提到

事件监听器 HTML DOM EventListener

addEventListener()方法

添加监听的事件，语法：

element.addEventListener(event, function(), useCapture);

// 第一个参数是事件的类型 (如 "click" 或 "mousedown").

// 第二个参数是事件触发后调用的函数。

// 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

示例：

var obj = document.getElementById("sample")
obj.addEventListener("click", function() {
    alert("Dont click me!")
})
// 点击后会弹出提示框

removeEventListener()方法

移除监听

var obj = document.getElementById("sample")
obj.removeEventListener("click")

addEventListener(event, function(), useCapture);

// 第一个参数是事件的类型 (如 “click” 或 “mousedown”).

// 第二个参数是事件触发后调用的函数。

// 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

示例：

```js
var obj = document.getElementById("sample")
obj.addEventListener("click", function() {
    alert("Dont click me!")
})
// 点击后会弹出提示框

removeEventListener()方法

移除监听

var obj = document.getElementById("sample")
obj.removeEventListener("click")

需要注意的是，事件监听的数量是没有限制的，添加新的监听并不会覆盖原有的监听

添加

创建元素

通过创建

使用document中createElement()方法添加元素，例如：

var newNode = document.createElement("div")
console.log(newNode)
newNode.innerText = "New element"
newNode.className = "red"
newNode.setAttribute("index", "01")
newNode.style.color = "blue"

通过克隆

使用被复制元素中cloneNode()方法复制元素

参数为布尔类型，当为true时连带内容一起赋值，false时不复制内容

var newNode = oldNode.clone(true)

添加元素

• 在末尾添加，使用父级元素的applendChild()方法，在末尾添加子元素

参数为要添加的元素变量

// 获取父级元素
var container = document.getElementById("sample")
// 创建元素
var newNode = document.createElement("div")
// 插入新的元素
container.applendChild(newNode)

• 插入，使用父级元素的insertBefore()方法，在目标元素前插入元素

参数1为要插入的新元素

参数2为在谁前插入的元素

// 获取父级元素
var container = document.getElementById("sample")
// 获取定位的元素
var flag = document.querySelectorAll("#sample div")
// 创建元素
var newNode = document.createElement("div")
// 插入元素
container.insertBefore(newNode, flag[0])

• 替换节点，使用父级的replaceChild()方法替换掉节点

参数1为要替换成的元素

参数2为被替换的元素

// 获取父级元素
var container = document.getElementById("sample")
// 获取定位的元素
var flag = document.querySelectorAll("#sample div")
// 创建元素
var newNode = document.createElement("div")
// 替换元素
container.replaceBefore(newNode, flag[0])

删除

通过父级元素的removeChild()方法来删除

参数为要删除的元素

// 获取父级元素
var container = document.getElementById("sample")
// 获取被删除的元素
var flag = document.querySelectorAll("#sample div")
// 删除元素
container.removeChild(flag[0])

至此你已经学会了如何对DOM元素进行增删改查的操作