javaScript是世界上最流行的腳本語言
JS誕生與1995年，他的出現(xiàn)主要是用于處理網(wǎng)頁中的前端驗證
JS由三部分組成：ECMASciript颁井、DOM谷炸、BOM
JS的特點：解釋型語言、類似于C與JAVA的語法結(jié)構(gòu)垄开、動態(tài)語言剃幌、基于面向?qū)ο蟮恼Z言
從上到下一行一行執(zhí)行
alert在瀏覽器彈出一個警告框
JS代碼的編寫位置：
1.可以將js標簽編寫到標簽的Onclick屬性中聋涨，當我們點擊的時候，js才會執(zhí)行
2.可以將js代碼寫在超鏈接的herf屬性中锥忿，這樣當點擊超鏈接時牛郑，會執(zhí)行js
（雖然可以寫在標簽屬性中，但是他們屬于結(jié)構(gòu)與行為耦合敬鬓，不方便維護淹朋，不推薦使用）
3.JS代碼需要編寫到scipt標簽里面（推薦使用）
可以將js代碼寫到外部js文件中，然后通過scipt標簽引入
script標簽一旦用于引用外部文件了钉答，就不能再編寫代碼了础芍，即使編寫代碼了瀏覽器也會忽略，如果需要則可以再創(chuàng)建一個新的scipt標簽用于編寫內(nèi)部代碼数尿。 script標簽是雙標簽
不用顯示丁定義type仑性，也就是默認就是javascript
注釋：
多行注釋：/*? ? ? ? */
單行注釋：? //
基本語法：
1.JS里面嚴格區(qū)分大小寫；
2.JS中每一條語句以（;）結(jié)尾 如果不加右蹦；瀏覽器會自動添加诊杆，但是會消耗一些系統(tǒng)資源歼捐，而且有時候，瀏覽器會加錯分號晨汹，所以在開發(fā)中分號必須寫豹储；
3.JS中會忽略多個空格與換行，所以我們可以利用空格和換行對代碼進行格式化
字面量與變量：
字面量淘这，都是一些不可改變的量（字面量都是可以直接使用剥扣，但是我們一般不會直接使用字面量）
變量：變量可以用來保存字面量，而且變量的值是可以任意改變的
變量更加方便我們使用铝穷，所以在開發(fā)中都是通過變量去保存一個字面量而很少直接使用字面量
可以用變量對字面量進行描述
聲明變量與賦值變量：
var a = 1;
標識符：
在JS中所有的可以由我們自主命名的都可以稱為是標識符钠怯；
例如：變量名、函數(shù)名曙聂、屬性名都屬于標識符
命名遵循以下原則：
1.標識符可以包含字母晦炊、數(shù)字。-宁脊、$刽锤；
2.標識符不能以數(shù)字開頭；
3.標識符不忙是ES中德關(guān)鍵字或保留字朦佩；
4.標識符一般采用駝峰命名法（非強制）
首字母小寫，每一個單詞德開頭字母大寫庐氮，其余字母小寫语稠；
JS底層保存標識符實際上是采用的Unicode編碼，所以理論上講弄砍，所有的utf-8中含有的內(nèi)容都剋以作為標識符
數(shù)據(jù)類型（字面量的類型）：
String 字符串
var str = "hello";
在JS里面字符串需要使用引號引起來
使用雙引號和單引號都可以仙畦，但是不要混用
引號不能嵌套，雙引號里面不能放雙引號音婶，單引號里面不能放單引號
在字符串里面我們可以使用\進行轉(zhuǎn)義
\"? 表示“
\’? 表示‘
\n? 表示換行
\t? 表示制表符
\\? 表示\
3.多行字符串
var msg = 'hello
world
你好呀
你好'
4.模板字符串
let name = "ziop";
let age = 21;
let msg = '你好呀慨畸，${name}'
5.字符串長度：
str.length
6.字符串具有不可變性
7.大小寫轉(zhuǎn)換
//注意，這里是方法衣式，不是屬性了
student.toUpperCase()
student.toLowerCase()
8.student.indexOf('t')
9.substring
[)
student.substring(1)//從第一個字符串截取到最后一個字符串
student.subtring(1.3)[1.3)
10.trim()? 移除字符串首尾空白
11.
var x = "JohnJohn";? ? ? ? ? ? ? // x 是字符串
y = x.charAt(2); // h
y = x.charCodeAt(2); // 104
y = x.concat(y, y); // JohnJohn104104, x+y+y
y = x.indexOf('h'); // 2, 索引從0開始
y = x.lastIndexOf('h'); // 6
y = x.slice();
stringObject.slice(start,end)
y = x.slice(2,5);? // hnJ
y = x.slice(2);? ? // hnJohn
y = x.split('o'); //J,hnJ,hn
y = x.substr(2); // hnJohn
y = x.substring(2,4) // hn寸士，[2,3]
y = x.toLocaleLowerCase(); // johnjohn,小寫
y = x.toLocaleUpperCase(); // JOHNJOHN,大寫
y = x.toString(); // 轉(zhuǎn)成Stirng
y = x.toUpperCase(); // JOHNJOHN,大寫
y = x.trim(); // JohnJohn,去除兩端的空格
y = x.valueOf(); // 返回某個字符串對象的原始值
12.兩個數(shù)字相加，返回數(shù)字相加的和碴卧，如果數(shù)字與字符串相加弱卡，返回字符串
x=5+5;? //10
y="5"+5;? //55(字符串)
z="Hello"+5; //Hello5(字符串)
13.
1、字符串一個很能強大的數(shù)據(jù)類型住册；在執(zhí)行加 + 時,將被加的對象統(tǒng)一處理為字符串婶博。
2、boolean類型在與數(shù)字類型進行相加時荧飞，視為 0 或者 1 處理凡人。
3名党、null 類型與數(shù)字類型進行累加時，視為 0 處理挠轴。
4传睹、boolean類型與 null 類型進行累加時，視為其與整數(shù)類型累加處理忠荞。
5蒋歌、undefined 除了與字符串進行累加時有效（undefined 視為字符串"undefined"處理），其他情況皆返回 NaN委煤。
6堂油、求模 % 運算，運算結(jié)果只取決于第一個數(shù)字的正負碧绞。
Number 數(shù)值
在JS里面所有的數(shù)值都是Number類型府框，包括整數(shù)與浮點數(shù)
數(shù)字的最大值;Number.MAX-VALUE 1. 7976931348623157e+308
數(shù)字的最小值;Number.MIN-VALUE 0以上的最小值 5e-324
如果使用的Number表示的數(shù)字超過了最大值，則會返回一個Infinity 表示正無窮讥邻，-Infinity表示負無窮
使用typeof檢查Infinity也會返回number
NaN 是一個特殊的數(shù)字迫靖，表示Not a Number
使用typeof檢查一個NaN也會返回一個number
須知：
NaN===NaN，這個與所有的的數(shù)值都不相等兴使，包括自己
只能通過isNaN(NaN)來判斷這個數(shù)是否為NaN
在JS中整數(shù)的運算基本可以保證精確
如果使用JS進行浮點數(shù)運算系宜，可能得到一個不精確的結(jié)果，所以千萬不要使用JS進行精確度要求高的運算
浮點數(shù)問題：
console.log((1/3) === (1-2/3));
盡量避免使用浮點數(shù)進行運算发魄，存在精度問題
Math.abs(1/3-(1-2/3))<0,000000001;
Boolean 布爾值
只有兩個主要用來做邏輯判斷：ture表示真盹牧，false表示假
如果布爾對象無初始值或者其值為:
0
-0
null
""
false
undefined
NaN
那么對象的值為 false。否則励幼，其值為 true（即使當變量值為字符串 "false" 時）汰寓！
Null 空值
只有一個null，null專門用來表示一個空的對象
使用typeof檢查null也會返回object
Undefined 未定義 是所有沒有賦值變量的默認值苹粟，自動賦值有滑。
只有一個值，就undefined
當聲明一個變量嵌削，但是并不給變量賦值時毛好，它的值就是undefined
使用typeof檢查undefined也會返回undefined
undefined 和 null 的區(qū)別
null 和 undefined 的值相等，但類型不等：
typeof undefined? ? ? ? ? ? // undefined
typeof null? ? ? ? ? ? ? ? ? // object
null === undefined? ? ? ? ? // false
null == undefined? ? ? ? ? ? // true
Symbol 是 ES6 引入了一種新的原始數(shù)據(jù)類型掷贾，表示獨一無二的值睛榄。
Object 對象
前6種為基本數(shù)據(jù)類型，最后一種為引用數(shù)據(jù)類型
運算符typeof來檢查變量的類型
語法：typeof 變量
typeof 用以獲取一個變量或者表達式的類型想帅，typeof 一般只能返回如下幾個結(jié)果：
number,boolean,string,function（函數(shù)）,object（NULL,數(shù)組场靴，對象）,undefined
正因為 typeof 遇到 null,數(shù)組,對象時都會返回 object 類型，所以當我們要判斷一個對象是否是數(shù)組時。
判斷是否為數(shù)組旨剥。
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
? ? return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>
return myArray.constructor.toString().indexOf("Array") > -1;這句話怎么解釋?
1咧欣、myArray 是函數(shù) isArray 的參數(shù)，這里調(diào)用函數(shù)的時候轨帜，會傳來數(shù)組 fruits魄咕。
2、constructor 是一個屬性蚌父，構(gòu)造函數(shù)屬性哮兰，不同類型的數(shù)據(jù)，會得到相應不同的值苟弛。因為 myArray 是個數(shù)組喝滞，這里的 myArray.constructor 的值就是 function Array() { [native code] }。(如果 myArray 是個字符串膏秫，myArray.constructor 的值就是function String() { [native code] }右遭。還有 number，boolean缤削，object窘哈，等等。)
3亭敢、toString() 是個方法滚婉，變字符串的方法，這里把 function Array() { [native code] } 變成字符串帅刀，為了后面好檢索满哪。
4、indexOf("Array") 是個方法劝篷，檢索字符串，這里看字符串 function Array() { [native code] } 里有沒有Array民宿，有就返回首次出現(xiàn)的位置娇妓，是一個數(shù)值，這里是 9活鹰。如果出現(xiàn)在第一個字符哈恰，會返回 0≈救海空格參與計數(shù)着绷。如果沒有找到，就返回 -1锌云。只要 >-1荠医，就說明有 Array，就能判斷原來那個函數(shù)調(diào)用傳來的 fruits 是一個數(shù)組。如果 myArray.constructor.toString().indexOf("Object")>-1彬向，那么 myArray 就是一個 Object 對象兼贡。不過那樣地話，這個參數(shù)的名字就沒取好了娃胆，應該叫做 myObject遍希。
或者判斷某個變量是否是某個對象的實例則要選擇使用另一個關(guān)鍵語法 instanceof
var result = objectName instanceof objectType
更重要的是 instanceof 可以在繼承關(guān)系中用來判斷一個實例是否屬于它的父類型。
str = "asd";
if(str instanceof String)//返回false
? document.write("YES");//不會打印YES
str = new String();
if(str instanceof String)//返回true
? document.write("yes");//不會打印yes
數(shù)組：
Java的是數(shù)值必須是相同類型的對象里烦，js里面不需要這樣
var arr = [1,2,3,4,null,true];
//保證代碼的可讀性凿蒜，盡量使用[]
取數(shù)組下標：如果越界了，就會
undefined
1.長度
arr.length
注意：假如給arr.length賦值胁黑，數(shù)組大小就會發(fā)生變化废封，如果賦值過小，元素就會丟失
2.indexOf通過元素獲得下標索引
arr.indexOf(2)
1
字符串的“1”和數(shù)字的1是不同的
3.slice（）
截取Array的一部分别厘，返回一個新的數(shù)組虱饿，類似于String中的substring
4.push(),pop()尾部
push:壓入尾部
pop:彈出尾部的一個元素
5.unshift(),shift()頭部
unshift:壓入頭部
shift:彈出頭部的一個元素? ?
6.排序sort()
js中 sort排序出錯的處理
https://blog.csdn.net/yj6232779/article/details/108493082
arr[] = ["B","C","A"]
arr.sort()
arr[] = ["A","B","C"]
7.元素反轉(zhuǎn)reverse()
arr[] = ["A","B","C"]
arr.reverse()
arr[] = ["C","B","A"]
8.concat()
arr[] = ["C","B","A"]
arr.concat([1,2,3])
["C","B","A",1,2,3]
concat()并沒有數(shù)組，只是會返回一個新的數(shù)組
9.連接符 join
打印拼接述數(shù)組触趴，使用特定的字符串連接
arr[] = ["C","B","A"]
arr.join('-')
"C-B-A"
10.多維數(shù)組
arr = [[1,2],[3,4],["5","6"]];
arr[1][1]
4
對象
JavaScript 對象是鍵值對的容器氮发，“鍵”必須為字符串，“值” 可以是 JavaScript 中包括 null 和 undefined 的任意數(shù)據(jù)類型冗懦。
數(shù)組是[]爽冕，對象是{}
若干個鍵值對
每一個屬性之間使用逗號隔開，最后一個不需要添加
var 對象名 = {
? ? 屬性名： 屬性值披蕉，
? ? 屬性名： 屬性值颈畸，
? ? 屬性名： 屬性值，
? ? 屬性名： 屬性值
? ? //最后一個屬性不需要加逗號
}
var person = {
name:"ziop",
age:21;
email:"2283280948@?量名則必須用第二種調(diào)用方法
? var max = {
? ? ? ? 'birth - month': '6',? //聲名時必須要加''或者""
? ? }
? ? alert(max['birth - month']); //調(diào)用時必須要使用對象名['屬性名']
3没讲、使用一個不存在的對象屬性眯娱，不會報錯！undefined
person.haha
undefined
4爬凑、動態(tài)的刪減屬性
delete person.email
true
console.log(person)
VM158:1 {name: 'ziop', age: 21, score:151}
5徙缴、動態(tài)的添加屬性（直接給新的屬性添加值即可）
person.haha = "haha"
'haha'
console.log(person)
VM404:1 {name: 'ziop', age: 21, score:151,? haha: 'haha'}
6.判斷屬性值是否在對象里面xxx in xxx
"age" in person
true
//繼承
"toString" in person
true
7.判斷一個屬性是否是這個對象自身所擁有的 hasOwnProperty()
person.hasOwnProperty("toString")
false
person.hasOwnProperty("age")
true
流程控制
if判斷
if (age<21)
{
console.log("不是他");
}
if (age === 21)
{
console.log("是他呀");
}
else
{
console.log("未來是他");
}
while循環(huán)，避免出現(xiàn)死循環(huán)
while(age<100)
{
age = age+1;
console.log(age);
}
//do-while循環(huán)
do
{
age = age+1;
console.log(age);
}
while(age<100)
while遍歷數(shù)組的例子中嘁信，如果數(shù)組中有 0于样，null，false潘靖，undefined 或者空字符串等在 js 中被認為等價于 false 的值穿剖，會提前結(jié)束遍歷。改成判斷數(shù)組長度即可避免該問題
原代碼：
while (cars[i])
{
? ? document.write(cars[i] + "<br>");
? ? i++;
}
更改為：
while (i < cars.length)
{
? ? document.write(cars[i] + "<br>");
? ? i++;
}
for循環(huán)
for(let i = 21;i<100;i++)
{
console.log(i);
}
遍歷數(shù)組
let ay = [1,34,5,465,65,654,65,64];
for(let i = 0;i<ay.length;i++)
{
console.log(ay[i]);
}
通過for of 遍歷數(shù)組
let a = [1,2,3,4];
for(let x of? a)
{
? ? console.log(x);
}
for/in循環(huán)不僅可以遍歷對象的屬性卦溢，還可以遍歷數(shù)組
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person)? // x 為屬性名
{
? ? txt=txt + person[x];
}
var x
var nums = [1, 3, 5];
for (x in nums)
{
? ? document.write(nums[x]+ "<br />");? // x 為數(shù)組索引
}
for...in 循環(huán)會自動跳過那些沒被賦值的元素糊余，而 for 循環(huán)則不會秀又，它會顯示出 undefined。
forEach循環(huán)
https://wenku.baidu.com/view/215d919c1937f111f18583d049649b6648d70907.html
break 的作用是跳出代碼塊, 所以 break 可以使用于循環(huán)和 switch 等
continue 的作用是進入下一個迭代, 所以 continue 只能用于循環(huán)的代碼塊啄刹。
Map和Set
（ES6出現(xiàn)的新特性）
let map = new Map([['tom',100],['jack',90],['haha',80]]);
let name = map.get('tom');//通過key獲得value
map.set('admin',123456);//增加或者修改
map.delete('tom');//刪除
set 無序不重復的排列
let set = new Set([1,23,24324,3,1]);
set.add(2);//增加一個元素
set.delete(1);//刪除一個元素
console.log(set.has(3));//是否包含某個元素
iterator
遍歷數(shù)組
利用for of
let a = [1,2,2,3,4];
for(var x of a)
{
console.log(x);
}
遍歷Map
let map2 = new Map([['tom',100],['jack',90],['haha',80]]);//注意（）
for(let b of map2)
{
console.log(b);
}
遍歷Set
let set1 = new Set([1,233,4,4,54,5]);
for(let c of set1)
{
console.log(c);
}
比較運算符：
= 賦值符號
Js中==與===的區(qū)別：
1涮坐、對于 string、number 等基礎(chǔ)類型誓军，== 和 === 是有區(qū)別的
a）不同類型間比較袱讹，== 之比較 "轉(zhuǎn)化成同一類型后的值" 看 "值" 是否相等，=== 如果類型不同昵时，其結(jié)果就是不等捷雕。
b）同類型比較，直接進行 "值" 比較壹甥，兩者結(jié)果一樣救巷。
2、對于 Array,Object 等高級類型句柠，== 和 === 是沒有區(qū)別的
進行 "指針地址" 比較
3浦译、基礎(chǔ)類型與高級類型，== 和 === 是有區(qū)別的
a）對于 ==溯职，將高級轉(zhuǎn)化為基礎(chǔ)類型精盅，進行 "值" 比較
b）因為類型不同，=== 結(jié)果為 false
'use strict'(注意是單引號)嚴格檢查模式 防止javascipt隨意性導致的一些問題
"use strict" 指令只允許出現(xiàn)在腳本或函數(shù)的開頭谜酒。
https://www.runoob.com/js/js-strict.html
局部變量建議都使用let取去定義
強制類型轉(zhuǎn)換：指將一個數(shù)據(jù)類型轉(zhuǎn)換為其他數(shù)據(jù)類型
類型轉(zhuǎn)換主要是Number叹俏、String、Boolean
將其他數(shù)據(jù)轉(zhuǎn)換為String
1.調(diào)用toString()方法xxx.toString(); 不能用于null僻族、undefined數(shù)據(jù)類型的轉(zhuǎn)換
該方法不會影響到原變量 粘驰，它會將轉(zhuǎn)換的結(jié)果返回
2.調(diào)用String函數(shù)?
將其他數(shù)據(jù)轉(zhuǎn)換為Number
方法一 調(diào)用Number函數(shù)
字符串轉(zhuǎn)換為數(shù)字
+ 可用于將變量轉(zhuǎn)換為數(shù)字
1如果是純數(shù)字的字符串，則直接轉(zhuǎn)換為數(shù)字
2.如果字符串里面有非數(shù)字的內(nèi)容述么，則直接轉(zhuǎn)換為NaN? ? ? ? ? ? ? ? ? ? ? ? ? ?
3.如果字符串里面有空值或者空格蝌数，則轉(zhuǎn)換為0
布爾值轉(zhuǎn)Number
true轉(zhuǎn)成1
false轉(zhuǎn)成0
Null轉(zhuǎn)換為數(shù)字是0
undefined轉(zhuǎn)換為數(shù)字是NaN
方法二：
調(diào)用parseInt()函數(shù)把一個字符串中的有效整數(shù)去出來，然后轉(zhuǎn)換為Number()
函數(shù)以及面向?qū)ο?/p>
函數(shù)
定義函數(shù)
//定義方式一
//絕對值函數(shù)
function abs(x)
{
if(x >= 0)
{
return x;
}
else{
return -x;
}
}
//測試結(jié)果
abs(10)
10
abs(0)
0
abs()
NaN
abs(-1)
1
一旦執(zhí)行到return代表函數(shù)結(jié)果度秘，返回結(jié)果
如果沒有執(zhí)行return籽前，函數(shù)執(zhí)行完就會返回結(jié)果，結(jié)果就是undefined
//定義方式二
? ? ? ? var abs1 = function(a)
? ? ? ? {
? ? ? ? ? ? if(a >= 0)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? return a;
? ? ? ? ? ? }
? ? ? ? ? ? else{
? ? ? ? ? ? ? ? return -a;
? ? ? ? ? ? }
function(x){...}這是一個匿函數(shù)敷钾，但是可以把結(jié)果賦值給abs1，通過abs就可以調(diào)用函數(shù)
方式一與方式二等價
調(diào)用函數(shù)
abs(10)
10
abs(0)
0
abs()
NaN
abs(-1)
1
自調(diào)用函數(shù)
函數(shù)表達式可以 "自調(diào)用"肄梨。
自調(diào)用表達式會自動調(diào)用阻荒。
如果表達式后面緊跟 () ，則會自動調(diào)用众羡。
不能自調(diào)用聲明的函數(shù)侨赡。
通過添加括號，來說明它是一個函數(shù)表達式：
(function () {
? ? var x = "Hello!!";? ? ? // 我將調(diào)用自己
})();
參數(shù)問題：JavaScript可以傳任意個參數(shù)，也可以不傳遞參數(shù)
參數(shù)傳進來是否存在的問題羊壹？
假設(shè)不存在參數(shù)蓖宦，如何規(guī)避？
? ? ? ? var abs1 = function(a)
? ? ? ? {
? ? ? ? ? ? if(typeof a !== 'number')
? ? ? ? ? ? {
? ? ? ? ? ? ? ? throw 'Not a number';
? ? ? ? ? ? }
? ? ? ? ? ? if(a >= 0)
? ? ? ? ? ? {
? ? ? ? ? ? ? ? return a;
? ? ? ? ? ? }
? ? ? ? ? ? else{
? ? ? ? ? ? ? ? return -a;
? ? ? ? ? ? }
? ? ? ? }
arguments
arguments 是一個js免費送的關(guān)鍵字油猫；
代表稠茂，傳遞進來的所有參數(shù)，是一個數(shù)組情妖！
? ? ? ? var abs1 = function (a) {
? ? ? ? ? ? console.log("a=>" + a);
? ? ? ? ? ? for (var i = 0; i < arguments.length; i++) {
? ? ? ? ? ? ? ? console.log(arguments[i]);
? ? ? ? ? ? }
? ? ? ? ? ? if (a >= 0) {
? ? ? ? ? ? ? ? return a;
? ? ? ? ? ? }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? return -a;
? ? ? ? ? ? }
? ? ? ? }
問題：arguments包含所有的參數(shù)睬关，我們有時候想使用多余的參數(shù)來進行附加操作，需要排除已有參數(shù)~
rest
ES6引入新特性毡证，獲取除了已經(jīng)定義的參數(shù)之外的所有參數(shù)
function aaa(a,b,...rest)
{
? ? console.log("a=>"+a);
? ? console.log("b=>"+b);
? ? console.log(rest);
}
rest參數(shù)只能寫在最后电爹，必須用...標識
變量的作用域
在JavaScript中，var定義變量實際是有作用域的料睛。
函數(shù)只有兩個作用：1.返回一個值丐箩；2.完成一件事
假設(shè)在函數(shù)體中聲明，則在函數(shù)體外不可使用（如果很想實現(xiàn)的話恤煞，后面可以研究一下閉包）
function yyl()
{
? ? var x = 1;
? ? x = x = 1;
? ? return x;
}
x? = x + 2;
//Uncaught ReferenceError: x is not defined
如果兩個函數(shù)體使用了相同的變量名屎勘，只要在函數(shù)內(nèi)部，就不沖突
function yyl()
{
? ? var x = 1;
? ? x = x + 1;
? ? return x;
}
function yyl1() {
? ? var x = 1;
? ? x 量重名
function qj() {
? ? var x = 1;
? ? function qj1() {
? ? ? ? var x = 'A';
? ? ? ? console.log('inner'+x);
? ? ? ? ? //定義了但是沒有調(diào)用
? ? }
? ? console.log('outer'+x);
? ? qj1();
}
qj();
假設(shè)在JavaScript中函數(shù)查找變量從自身函數(shù)開始阱州，由內(nèi)向外查找挑秉，假設(shè)外部存在這個的函數(shù)變量，則內(nèi)部函數(shù)會屏蔽外部函數(shù)的變量苔货。
提升變量的作用域
變量提升：
聲明提升：函數(shù)聲明和變量聲明總是會被解釋器悄悄地被"提升"到方法體的最頂部犀概。
JavaScript 只有聲明的變量會提升，初始化的不會夜惭。
函數(shù)優(yōu)先姻灶，雖然函數(shù)聲明和變量聲明都會被提升，但是函數(shù)會首先被提升诈茧，然后才是變量产喉。
function ziop() {
? ? var x = "x" + y;
? ? console.log(x);
? ? var y = "y";
}
ziop();
//執(zhí)行結(jié)果：xundefined
說明：js執(zhí)行引擎，自動提升了y的聲明但是不會提升變量y的賦值敢会；
function ziop1() {
? ? var y = "y";
? ? var x = "x" +y;
? ? console.log(x);
}
ziop1();
這個是在javaScript建立之初就存在的特性曾沈，養(yǎng)成規(guī)范：所有的變量定義在函數(shù)的頭部，不要亂放鸥昏，便于代碼維護
全局變量
var x = 1;
function ziop2() {
? ? console.log(x);
}
ziop2();
console.log(x);
全局對象window
var z = 'xxx';
alert(z);
alert(window.z);//默認所有的全局變量塞俱，都會自動綁定在window對象下
alert()這個函數(shù)本身也是一個window變量：
var? a = 'aaa';
window.alert(a);
var old_alert = window.alert;
window.alert = function() {};
//發(fā)現(xiàn)alert()失效了
window.alert(123);
//恢復
window.alert = old_alert;
window.alert(456);
JavaScript實際上只有一個全局作用域，任何變量（函數(shù)也可以視為變量）吏垮，假設(shè)沒有在函數(shù)作用范圍內(nèi)找到障涯，就會向外查找罐旗，如果在全局作用域都沒有找到，就報錯RefrenceError
規(guī)范
由于我們所有的全局變量都會綁定到我們的window上唯蝶，如果是不同的js文件九秀，使用了相同的全局變量，如何化解這種沖突粘我？
var ziopApp = {};
//唯一的全局變量
//定義全局變量
ziopApp.name = 'ziop';
ziopApp.age = 21;
ziopApp.add = function (a,b) {
? ? return a + b;
}
把自己的代碼全部放在自己定義的唯一空間名字中鼓蜒，降低全局命名沖突的問題
局部作用域 let
function aaa() {
? ? for( var i = 0;i<100;i++)
? ? {
? ? ? ? console.log(i);
? ? }
? ? console.log(i+1);//i出了這個作用域還可以使用
}
aaa();
ES6關(guān)鍵字let，解決局部作用域沖突的問題
function aaa1() {
? ? for( let i = 0;i<100;i++)
? ? {
? ? ? ? console.log(i);
? ? }
? ? console.log(i+1);//Uncaught ReferenceError: i is not defined
}
aaa1();
建議大家都是用let去定義局部作用域的變量
常量const
在ES6之前涂滴，怎么定義常量：只有用大寫字母命名的變量就是常量友酱，建議不要修改這樣的值
var PI = '3.14';
console.log(PI);
PI = '213';//可以改變這個值
console.log(PI);
//打印結(jié)果：3.14 213
在ES6里面引入了常量關(guān)鍵字const
const PI = '3.14';
console.log(PI);
PI = '213';
//TypeError: Assignment to constant variable
console.log(PI);
let與var的對比：https://www.runoob.com/js/js-let-const.html
1.let是塊級作用域let 聲明的變量只在 let 命令所在的代碼塊 {} 內(nèi)有效，在 {} 之外不能訪問柔纵。 var 關(guān)鍵字聲明的變量不具備塊級作用域的特性缔杉，它在 {} 外依然能被訪問到。
2.重新定義變量
使用 var 關(guān)鍵字重新聲明變量可能會帶來問題搁料。
在塊中重新聲明變量也會重新聲明塊外的變量：
var x = 10;
// 這里輸出 x 為 10
{
? ? var x = 2;
? ? // 這里輸出 x 為 2
}
// 這里輸出 x 為 2
let 關(guān)鍵字就可以解決這個問題或详，因為它只在 let 命令所在的代碼塊 {} 內(nèi)有效。
var x = 10;
// 這里輸出 x 為 10
{
? ? let x = 2;
? ? // 這里輸出 x 為 2
}
// 這里輸出 x 為 10
3.循環(huán)作用域
使用 var 關(guān)鍵字：
var i = 5;
for (var i = 0; i < 10; i++) {
? ? // 一些代碼...
}
// 這里輸出 i 為 10
使用 let 關(guān)鍵字：
let i = 5;
for (let i = 0; i < 10; i++) {
? ? // 一些代碼...
}
// 這里輸出 i 為 5
在第一個實例中郭计，使用了 var 關(guān)鍵字霸琴，它聲明的變量是全局的，包括循環(huán)體內(nèi)與循環(huán)體外昭伸。
在第二個實例中梧乘，使用 let 關(guān)鍵字， 它聲明的變量作用域只在循環(huán)體內(nèi)庐杨，循環(huán)體外的變量不受影響选调。
4.局部變量
在函數(shù)體內(nèi)使用 var 和 let 關(guān)鍵字聲明的變量有點類似。
它們的作用域都是 局部的:
// 使用 var
function myFunction() {
? ? var carName = "Volvo";? // 局部作用域
}
// 使用 let
function myFunction() {
? ? let carName = "Volvo";? //? 局部作用域
}
5.全局變量
在函數(shù)體外或代碼塊外使用 var 和 let 關(guān)鍵字聲明的變量也有點類似灵份。
它們的作用域都是 全局的:
// 使用 var
var x = 2;? ? ? // 全局作用域
// 使用 let
let x = 2;? ? ? // 全局作用域
6.使用 var 關(guān)鍵字聲明的全局作用域變量屬于 window 對象:
var carName = "Volvo";
// 可以使用 window.carName 訪問變量
使用 let 關(guān)鍵字聲明的全局作用域變量不屬于 window 對象:
let carName = "Volvo";
// 不能使用 window.carName 訪問變量
7.重置變量
使用 var 關(guān)鍵字聲明的變量在任何地方都可以修改：
var x = 2;
// x 為 2
var x = 3;
// 現(xiàn)在 x 為 3
在相同的作用域或塊級作用域中仁堪，不能使用 let 關(guān)鍵字來重置 var 關(guān)鍵字聲明的變量:
var x = 2;? ? ? // 合法
let x = 3;? ? ? // 不合法
{
? ? var x = 4;? // 合法
? ? let x = 5? // 不合法
}
在相同的作用域或塊級作用域中，不能使用 let 關(guān)鍵字來重置 let 關(guān)鍵字聲明的變量:
let x = 2;? ? ? // 合法
let x = 3;? ? ? // 不合法
{
? ? let x = 4;? // 合法
? ? let x = 5;? // 不合法
}
在相同的作用域或塊級作用域中填渠，不能使用 var 關(guān)鍵字來重置 let 關(guān)鍵字聲明的變量:
let x = 2;? ? ? // 合法
var x = 3;? ? ? // 不合法
{
? ? let x = 4;? // 合法
? ? var x = 5;? // 不合法
}
let 關(guān)鍵字在不同作用域弦聂，或不同塊級作用域中是可以重新聲明賦值的:
let x = 2;? ? ? // 合法
{
? ? let x = 3;? // 合法
}
{
? ? let x = 4;? // 合法
}
8.var 關(guān)鍵字定義的變量可以在使用后聲明，也就是變量可以先使用再聲明
let 關(guān)鍵字定義的變量則不可以在使用后聲明氛什，也就是變量需要先聲明再使用莺葫。
const與let、var的對比
const定義常量與使用let 定義的變量相似：
二者都是塊級作用域
都不能和它所在作用域內(nèi)的其他變量或函數(shù)擁有相同的名稱
兩者還有以下兩點區(qū)別：
const聲明的常量必須初始化枪眉，而let聲明的變量不用
const 定義常量的值不能通過再賦值修改捺檬，也不能再次聲明。而 let 定義的變量值可以修改瑰谜。
在相同的作用域或塊級作用域中欺冀，不能使用 const 關(guān)鍵字來重置 var 和 let關(guān)鍵字聲明的變量:
在相同的作用域或塊級作用域中，不能使用 const 關(guān)鍵字來重置 const 關(guān)鍵字聲明的變量:
const 關(guān)鍵字在不同作用域萨脑，或不同塊級作用域中是可以重新聲明賦值的:
const 關(guān)鍵字定義的變量則不可以在使用后聲明隐轩，也就是變量需要先聲明再使用。
JavaScript this 關(guān)鍵字
面向?qū)ο笳Z言中 this 表示當前對象的一個引用渤早。
但在 JavaScript 中 this 不是固定不變的职车，它會隨著執(zhí)行環(huán)境的改變而改變。
在方法中鹊杖，this 表示該方法所屬的對象悴灵。
如果單獨使用，this 表示全局對象骂蓖。
在函數(shù)中积瞒，this 表示全局對象。
在函數(shù)中登下，在嚴格模式下茫孔，this 是未定義的(undefined)。
在事件中被芳，this 表示接收事件的元素缰贝。
call() 和 apply() 方法可以將 this 引用到任何對象。
方法
定義方法
方法就是把函數(shù)放在對象的里面畔濒，對象只有兩個東西：屬性和方法
var kuangshen ={
? ? name:'秦疆',
? ? birth:2000,
? ? age:function ()kuangshen.age()方法? 方法一定要帶（）
this.代表什么
function getAge() {
? ? //今年-出生的年
? ? var now = new Date().getFullYear();
? ? return now-this.birth;
}
var kuangshen1 = {
? ? name:'秦疆',
? ? birth:2000,
? ? age:getAge
}
console.log(kuangshen1.age());//可以
console.log(kuangshen1.getAge());
//Uncaught TypeError: kuangshen1.getAge is not a function
this是無法指向的剩晴，是默認指向調(diào)用它的那個對象
apply? 在js中可以控制this指向！
function getAge() {
? ? //今年-出生的年
? ? var now = new Date().getFullYear();
? ? return now-this.birth;
}
var kuangshen1 = {
? ? name:'秦疆',
? ? birth:2000,
? ? age:getAge
}
//在控制臺輸入：getAge.apply(kuangshen1,[]);? 打印出22
內(nèi)部對象
? ? ? ? console.log(typeof 123); //number
? ? ? ? console.log(typeof '123');//string
? ? ? ? console.log(typeof true);//boolean
? ? ? ? console.log(typeof undefined);//undefined
? ? ? ? console.log(typeof NaN);//number
? ? ? ? console.log(typeof {});//object
? ? ? ? console.log(typeof []);//object
? ? ? ? console.log(typeof Math.abs);//function
var now = new Date();
now.getFullYear();//年
2022
now.getMonth();//月 0~11 代表月
5
now.getDate();//日
13
now.getDay();//星期幾
1
now.getHours();//時
15
now.getMinutes();//分
30
now.getSeconds();//秒
3
now.getTime();//時間戳 全世界統(tǒng)一 1970 1.1 0：00：00 毫秒數(shù)
1655105403952
console.log(new Date(1655105403952));
//時間戳轉(zhuǎn)換為時間
// Mon Jun 13 2022 15:30:03 GMT+0800 (中國標準時間)
注意：調(diào)用的都是方法不是屬性侵状，都需要加括號（）
轉(zhuǎn)換
now = new Date(1655105403952);
//Mon Jun 13 2022 15:30:03 GMT+0800 (中國標準時間)
now.toLocaleString()
//'2022/6/13 15:30:03'
now.toGMTString();
//'Mon, 13 Jun 2022 07:30:03 GMT'
JSON
json 是什么
早期,所有的數(shù)據(jù)傳輸習慣使用XML 文件
JSON (JavaScript Object Notation,JS 對象簡譜)是一種輕量級的數(shù)據(jù)交換格式
簡潔和清晰的層次結(jié)構(gòu)使得JSON 成為理想的數(shù)據(jù)交換語言
易于人閱讀和編寫俏让，同時也易于機器解析和生成滔驶，并有效地提升網(wǎng)絡(luò)傳輸效率
在 JavaScript 一切皆為對象，任何js支持的類型都可以用JSON 來表示
格式：
對象都用 {}
數(shù)組都用 []
所有的鍵值對都使用 key:value
JSON 字符串和 JS對象的轉(zhuǎn)化
// 在JavaScript 一切皆對象，任何js 支持的類型都可以用json 來表示竞膳；number,String? ....
//JSON 有且只有兩個方法
//JSON 字符串和 JS 對象的轉(zhuǎn)化
var user={
? name:"tt",
? age:3,
? sex:'女'
}
// 上面的是對象
//對象轉(zhuǎn)化為 json 字符串? ? ?
輸出結(jié)果? {"name":"tt","age":3,"sex":"女"}? ? 沒有前面的箭頭了不能展開
var jsonUser=JSON.stringify(user);
//console.log(jsonUser)
// {"name":"tt","age":3,"sex":"女"}? 輸出效果
//json 字符串轉(zhuǎn)化為對象，參數(shù)為json 字符串
var obj=JSON.parse('{"name":"tt","age":3,"sex":"女"}');
//注意要用單引號包裹起來
var obj={a:'hello',b:'hellob'};
var json='{'a':'hello','b':'hellob'}'?
//它本身就是一個字符串汇跨，而不是一個對象? 里面的單引號和雙引號盡量保持一致
Ajax
原生的js寫法 xhr 異步請求
jQuey 封裝好的方法 $("#name").ajax("")
axios 請求
面向?qū)ο蟮木幊?/p>
原型對象? 重要
什么是面向?qū)ο?/p>
JavaScript ,java c#....都有面向?qū)ο蟮奶匦?但是 JavaScript 有些區(qū)別
類：模板? ? 在 js 中被叫做原型對象
對象：具體的實例
在JavaScript 這個需要大家換一下思維方式
var Student={
? name:"ttt",
? age:3,
? run:function(){
? ? console.log(this.name+"run......");
? }
};
var xiaoming={
? name:"xiaoming"
};
//原型對象
xiaoming1.__proto__=student;
//注意是__兩條）
var Bird={
? fly:function(){
console.log(this.name+"fly");
? }
};
//小明的原型對象是 student
xiaoming.__proto__=Bird;
給已有的函數(shù)對象增加屬性或者方法
格式：構(gòu)造函數(shù)名.prototype.新屬性或者新方法
補充：JavaScript 函數(shù)
JavaScript 函數(shù)是被設(shè)計為執(zhí)行代碼特定任務的代碼塊
JavaScript 函數(shù)會在某代碼調(diào)用它時被執(zhí)行
JavaScript 函數(shù)通過 function? 關(guān)鍵字進行定義呛占，其后是函數(shù)名和括號（）
函數(shù)名 可包括字母，數(shù)字暴区，下劃線和美元符號（規(guī)則與變量名相同）
function name(參數(shù)1,參數(shù)2, 參數(shù)3){
要執(zhí)行的代碼
}
function Student(name){
this.name=name;
}
//給student 新增一個原型對象? ? prototype 原型對象
student.prototype.hello=function(){
alert('hello')
}
//以前定義一個類的方法 不作為參考對象 比較舊
class 關(guān)鍵字
class student{
? // 當new一個實例時闯团，默認有一個constructor構(gòu)造方法，默認返回實例對象（this）
? constructor(name){
? ? // this`關(guān)鍵字則代表實例對象
? ? this.name=name;
? }
? //進行了調(diào)用
? hello(){
? ? alert('hello')
? }
}
var xiaoming=new student("xiaoming");
var xiaohong=new Student("xiaohong");
xiaoming.hello()
繼承 extends
class student{
? // 當new一個實例時仙粱，默認有一個constructor構(gòu)造方法房交，默認返回實例對象（this）
? constructor(name){
? ? // this`關(guān)鍵字則代表實例對象
? ? this.name=name;
? }
? //進行了調(diào)用
? hello(){
? ? alert('hello')
? }
}
class XiaoStudent extends Student{
? constructor(name,age){
? ? super(name);
? ? this.grade=grade;
? }
? myGrade(){
? ? alert('我是一名小學生')
? }
}
var xiaoming=new student("xiaoming");
var xiaohong=new Student("xiaohong",1);
本質(zhì)：查看對象原型
原型鏈
__proto__
七.操作BOM對象 （重點）
瀏覽器介紹
JavaScript 和瀏覽器關(guān)系 ？
// JavaScript 誕生就是為了能夠讓他在瀏覽器中運行
BOM :瀏覽器對象模型
BOM :瀏覽對象模型
IE 6~11
Chrome
Safari
Firefox
Opera
三方：
QQ 瀏覽器
360 瀏覽器
//window 代表 瀏覽器 窗口? 瀏覽器的一些常用方法
window.alert(1)
undefined
window.innerHeight
461
window.innerWidth
1880
window.outerWidth
1880
//封裝了 瀏覽器的信息
Navigator? 封裝了瀏覽器的信息? （不建議使用）
window.Navigator.length
0
navigator.appVersion
'5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Mobile Safari/537.36'
navigator.appName
'Netscape'
navigator.userAgent
'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Mobile Safari/537.36'
navigator.platform
'Win32'
大多數(shù)時候不會使用 navigator對象 （首字母大寫是類）因為會被人人為修改
不建議使用這些屬性來判斷和編寫代碼
screen? //代表屏幕尺寸
screen.width
screen.width
1880px
screen.height
461px
location (重要)
location 代表當前頁面的 URL 信息
host: "cn.bing.com"? host 代表主機
href: "https://cn.bing.com/?FORM=Z9FD1"? 當前指向的位置 href 可以跳轉(zhuǎn)鏈接
protocol: "https:"? 協(xié)議
reload: ? reload()? 方法
reload:f reload()? // 刷新網(wǎng)頁
location.assign('https://blog.kuangstudy.com/')? //設(shè)置新的定位
document 代表當前的頁面伐割，HTML DOM 文檔樹? ? ? ? ? （內(nèi)容 :DOM 里面會重點 講解）
document.title
"百度一下候味，你就知道"? //在百度的頁面獲得它的標題
document.title='狂神說' //可以改變 標題
能夠獲取動態(tài)的文檔樹節(jié)點刃唤，就可以動態(tài)的增加和刪除節(jié)點
document.cookie 可以獲得 cookie
cookie 客戶端的一些本地信息
history.back()? //前進
history.forward()? //后退? history代表瀏覽器的歷史紀錄
八,操作 DOM (重點)
DOM :文檔對象類型
瀏覽器網(wǎng)頁就是一個Dom樹形結(jié)構(gòu)
DOM EventListener
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不會覆蓋已存在的事件句柄白群。
你可以向一個元素添加多個事件句柄尚胞。
你可以向同個元素添加多個同類型的事件句柄，如：兩個 "click" 事件帜慢。
你可以向任何 DOM 對象添加事件監(jiān)聽笼裳，不僅僅是 HTML 元素。如： window 對象粱玲。
addEventListener() 方法可以更簡單的控制事件（冒泡與捕獲）躬柬。
你可以使用 removeEventListener() 方法來移除事件的監(jiān)聽。
element.addEventListener(event, function, useCapture);
第一個參數(shù)是事件的類型 (如 "click" 或 "mousedown").
第二個參數(shù)是事件觸發(fā)后調(diào)用的函數(shù)抽减。
第三個參數(shù)是個布爾值用于描述事件是冒泡還是捕獲允青。該參數(shù)是可選的。
默認值為 false, 即冒泡傳遞胯甩，當值為 true 時, 事件使用捕獲傳遞昧廷。
事件冒泡或事件捕獲？
事件傳遞有兩種方式：冒泡與捕獲偎箫。
事件傳遞定義了元素事件觸發(fā)的順序木柬。 如果你將 <p> 元素插入到 <div> 元素中，用戶點擊 <p> 元素, 哪個元素的 "click" 事件先被觸發(fā)呢淹办？
在 冒泡 中眉枕，內(nèi)部元素的事件會先被觸發(fā)，然后再觸發(fā)外部元素怜森，即： <p> 元素的點擊事件先觸發(fā)速挑，然后會觸發(fā) <div> 元素的點擊事件。
在 捕獲 中副硅，外部元素的事件會先被觸發(fā)姥宝，然后才會觸發(fā)內(nèi)部元素的事件，即： <div> 元素的點擊事件先觸發(fā) 恐疲，然后再觸發(fā) <p> 元素的點擊事件腊满。
removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
更新：更新 Dom 節(jié)點
遍歷dom 節(jié)點：得到 dom 節(jié)點
刪除：刪除一個Dom 節(jié)點
添加：添加一個新的 dom 節(jié)點
要操作一個 Dom 節(jié)點 就必須要先獲得這個 Dom 節(jié)點
獲得 Dom 節(jié)點
<body>
? ? <div id="father">
? ? ? ? <h1>標題一</h1>
? ? ? ? <p id="p1">p1</p>
? ? ? ? <p class="p2">p2</p>
? ? </div>
? ? <script>
? ? ? ? var a1 = document.getElementsByTagName('a1');
? ? ? ? //標簽選擇器
? ? ? ? var p1 = document.getElementById('p1');
? ? ? ? //id選擇器
? ? ? ? var p2 = document.getElementsByClassName('p2');
? ? ? ? //class選擇器
? ? ? ? var father = document.getElementById('father');
? ? ? ? var childrens = father.children;
? ? ? ? </script>
</body>
? ? //獲取一個元素
? ? var se = document.querySelector('#p1')
? ? //獲取全部的元素
? ? var p2 = document.querySelectorAll("#father .p2")
更新節(jié)點
<body>
? ? <div id="father">
? ? ? ? <h1>標題一</h1>
? ? ? ? <p id="p1">p1</p>
? ? ? ? <p class="p2">p2</p>
? ? </div>
? ? <script>
? ? //其他選擇器并不唯一，是一個數(shù)組培己，所以要采用數(shù)組下標的形式
? ? ? var a1 = document.getElementsByTagName('h1');
? ? ? ? a1[0].innerText = "456";
? ? ? ? var p2 = document.getElementsByClassName('p2');
? ? ? ? p2[0].innerText = "123";
? ? ? ? var p1 = document.getElementById('p1');
? ? ? ? //只有id選擇器是唯一的碳蛋，可以直接修改
? ? ? ? p1.innerText = "456";
? ? ? ? //可以解析HTML 文本標簽
? ? ? ? p1.innerHTML ='<strong>123</strong>';
? ? ? ? </script>
? ? ? </body>
刪除節(jié)點
刪除節(jié)點的步驟：? 先獲取父節(jié)點 通過父節(jié)點刪除自己
? ? <div id="father">
? ? ? ? <h1>標題一</h1>
? ? ? ? <p id="p1">p1</p>
? ? ? ? <p class="p2">p2</p>
? ? </div>
? ? ? ? <script>
? ? ? ? //方法一，通過父節(jié)點刪除
? ? ? ? var self = document.getElementById('p1');
? ? ? ? var father = self.parentElement;
? ? ? ? father.removeChild(self);
? ? ? ? //方法二
? ? ? ? var self = document.getElementById('p1');
? ? ? ? self.remove();
? ? ? //刪除是一個動態(tài)的過程
? ? ? father.removeChild(father.children[0]);
? ? ? father.removeChild(father.children[0]);
//注意： 刪除多個節(jié)點的時候省咨，children 是在時刻變化的肃弟，刪除節(jié)點的時候一定要注意~
//以下代碼是已知要查找的子元素，然后查找其父元素，再刪除這個子元素（刪除節(jié)點必須知道父節(jié)點）：
? ? var child = document.getElementById("p1");
? ? child.parentNode.removeChild(child);
? ? </script>
? ?
插入節(jié)點
我們獲得了某個 DOM 節(jié)點笤受，假設(shè)這個 Dom 節(jié)點是空的穷缤，我們通過 inner HTML 就可以增加一個元素了，但是這個 Dom 節(jié)點已經(jīng)存在元素了箩兽，就會進行覆蓋（所以我們就不能通過inner HTML 進行增加節(jié)點了
? <div id="father">
? ? ? ? <h1>標題一</h1>
? ? ? ? <p id="p1">p1</p>
? ? ? ? <p class="p2">p2</p>
? ? </div>
? ? <script>
? ? var p3 = document.createElement("p");
? ? let fa = document.querySelector("#father");
? ? p3.innerHTML = "<hr>"
? ? fa.appendChild(p3) //子元素后邊添加元素
? ? fa.children[0].before(p3)? //子元素前面添加標簽
? ? </script>
創(chuàng)建新的 HTML 元素 (節(jié)點) - appendChild() 它用于添加新元素到尾部绅项。
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落比肄。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是一個新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>
如果我們需要將新元素添加到開始位置囊陡，可以使用 insertBefore() 方法:
<div id="div1">
<p id="p1">這是一個段落芳绩。</p>
<p id="p2">這是另外一個段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是一個新的段落撞反。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
替換 HTML 元素 - replaceChild()
<div id="div1">
<p id="p1">這是一個段落妥色。</p>
<p id="p2">這是另外一個段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是一個新的段落遏片。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>
HTMLCollection 與 NodeList 的區(qū)別
HTMLCollection 是 HTML 元素的集合嘹害。getElementsByTagName() 方法返回 HTMLCollection 對象。動態(tài)
NodeList 是一個文檔節(jié)點的集合吮便。大部分瀏覽器的 querySelectorAll() 返回 NodeList 對象 靜態(tài)
NodeList 與 HTMLCollection 有很多類似的地方笔呀。
NodeList 與 HTMLCollection 都與數(shù)組對象有點類似，可以使用索引 (0, 1, 2, 3, 4, ...) 來獲取元素髓需。
NodeList 與 HTMLCollection 都有 length 屬性许师。
HTMLCollection 元素可以通過 name，id 或索引來獲取僚匆。
NodeList 只能通過索引來獲取微渠。
只有 NodeList 對象有包含屬性節(jié)點和文本節(jié)點。 方法用于向指定元素添加事件句柄咧擂。
HTML 元素逞盆。如： window 對象。
