Python全棧工程師學習筆記 | JavaScript基礎

1.8.1 JavaScript基礎

(1) JavaScript介紹：

1. 什麼是JavaScript？

2. JavaScript 是一種客戶端腳本語言（腳本語言是一種輕量級的編程語言）。

3. JavaScript 通常被直接嵌入 HTML 頁面。

4. JavaScript 是一種解釋性語言（就是說，代碼執行不進行預編譯）。

5. 特點：弱類型和基於對象。(因為面向對象需要具有封裝、繼承、多態的特徵)

6. JavaScript語言中包含三個核心：ECMAScript基本語法、DOM、BOM

7. 在HTML中如何使用JavaScript(三種)

 11.使用<script></script>標籤： 2屬性： 3charset（可選）字符集設置、 4defer（可選執行順序）值：defer、 5language(已廢除)、 6src（可選）使用外部的js腳本文件 7type(必選)類型：值：text/javascript 8 9<scripttype="text/javascript">10<!--11javaScript語言12//-->13</script>14152.在html標籤的事件中，超級鏈接里。16<buttononclick="javaScript語言"></button>17<ahref="javascript:alert('aa');alert('bb')">點擊</a>18193.外部導入方式（推薦）：20<scripttype="text/javascript"src="my.js"></script>

(2) JavaScript的語法：

1.區分大小寫：變量名、函數名、運算符以及其他一切東西都是區分大小寫的。

2.他和Python一樣屬於弱類型語言。

3.每行結尾的分號可有可無。(js中的每條語句之間的分割符可以是回車換行也可以是”;”分號(推薦))

4.腳本註釋：// 單行註釋和/* 多行註釋 */

5.括號表示代碼塊:{ }

6.變量的定義：使用var關鍵字來聲明。

 1變量的命名規範是：字母數字，$符和下劃線構成，但是不可以以數字開始。 2變量名不可以使用關鍵字. 3 4typeof函數獲取一個變量的類型： 5*undefined-如果變量是Undefined類型的 6*boolean-如果變量是Boolean類型的 7*number-如果變量是Number類型的(整數、浮點數) 8*string-如果變量是String類型的（採用""、''） 9*object-如果變量是一種引用類型或Null類型的10如：newArray()/newString()...11*function--函數類型12

7.JavaScript的數據類型：

 1undefined類型 2null類型（對象） 3boolean類型 4number類型 5八進制數和十六進制數012 6浮點數 7特殊的Number值 8string類型 9vars="hello";10document.write(s+"<br/>");11document.write(s[1]+"<br/>");//使用下標可以取出對應的字符12document.write(s.length+"<br/>");//求長度1314object引用類型15引用類型通常叫做類（class），也就是說，遇到引用值，所處理的就是對象。16Object對象自身用處不大，不過在了解其他類之前，還是應該了解它。17因為ECMAScript中的Object對象與Java中的java.lang.Object相似，18ECMAScript中的所有對象都由這個對象繼承而來，Object對象中的所有屬性19和方法都會出現在其他對象中，所以理解了Object對象，就可以更好地理解其他對象。20

8.類型轉換：

 1 使用：Number（）、parseInt()和parseFloat（）做類型轉換 2Number()強轉一個數值(包含整數和浮點數)。 3*parseInt()強轉整數， 4*parseFloat（）強轉浮點數 5 6函數isNaN()檢測參數是否不是一個數字。isnotanumber 7 8ECMAScript中可用的3種強制類型轉換如下： 9Boolean(value)-把給定的值轉換成Boolean型；10Number(value)-把給定的值轉換成數字（可以是整數或浮點數）；11String(value)-把給定的值轉換成字符串；

(3） JavaScript的運算符

1.一元運算符

1delete：用於刪除對象中屬性的如：deleteo.name;//刪除o對象中的name屬性2void：void運算符對任何值返回undefined。沒有返回值的函數真正返回的都是undefined。3++--:一元加法和一元減法

2.位運算符

1位運算NOT~2位運算AND&3位運算OR|4位運算XOR^(不同為1，相同則為0)5左移運算<<6右移運算>>

3.邏輯運算符

1邏輯NOT!運算符非2邏輯AND&&運算符與3邏輯OR||運算符或

4.乘性運算符

1*（乘）/(除)%（取模）求餘

5.加性運算符

1+-2*其中+號具有兩重意思：字串連接和數值求和。3就是加號」+「兩側都是數值則求和，否則做字串連接

6.關係運算符:

1>>=<<=

7.等性運算符

1=====!=!==

8.條件運算符

1?:(三元運算符)

9.賦值運算符

1=+=-=*=/=%=>>=<<=

10.逗號運算符

1用逗號運算符可以在一條語句中執行多個運算。2variNum1=1,iNum2=2,iNum3=3;

(4）javaScript（語句流程控制）

 11.判斷語句if語句；if...else...if...elseif...else... 2 32.多分支語句：switch（）{。case：。。。。} 4switch(i){ 5case20:alert("20"); 6break; 7case30:alert("30"); 8break; 9case40:alert("40");10break;11default:alert("other");12}133.循環語句（迭代語句）14for：1516while1718do...while1920*for-in語句:語句是嚴格的迭代語句，用於枚舉對象的屬性。21vara=[10,20,30,40,50];22//迭代的是數組的下標。23for(iina){24document.write(a[i]);25}26//輸出：102030405027284.break和continue語句對循環中的代碼執行提供了更嚴格的控制。29305.with語句用於設置代碼在特定對象中的作用域。

(5）本節擴充知識：

11.在網頁文檔中獲取一個節點對象（HTML標籤）2document.getElementById("mid");//獲取標籤id屬性值為mid的節點對象342.定時相關函數：5setTimeout(vCode,iMilliSeconds[,sLanguage])--單次定時執行指定函數6clearTimeout(iTimeoutID)--取消上面的單次定時78setInterval(vCode,iMilliSeconds[,sLanguage])--無限次定時執行指定函數9clearInterval(iIntervalID)--取消上面的多次定時

本節作業：一、理論作業：1.什麼是JavaScript？2.在HTML中嵌入JavaScript的方法有幾種？3.JavaScript的常用類型都有哪些？4.常用的JavaScript的類型轉換函數有那兩個？5.我們使用哪個函數判斷是否不是一個整數？6.JavaScript語言的運算符都有哪些？二、代碼題：1.參考課程代碼做一個簡單的計算器2.（選做）一個倒計時的按鈕（10,9,8,7,...這是是個灰色不可點擊的，當為0是會換成同意字樣，並可點擊。）3.（選做）做一個倒計時（時分秒）。可選帶暫停效果三、預習作業：1.JavaScript的函數如何定義和調用。2.常用的系統函數都有哪些。3.對象的應用與聲明。

1.8.2 JavaScript函數和對象

(1) JavaScript的函數

 1標準格式：function函數名（[參數列表..]）{ 2函數體。。。 3[return返回值;] 4} 5 6JavaScript三種定義函數方法： 7*第一種是使用function語句定義函數 8如上面格式 910第二種是使用Function()構造函數來定義函數（不常用）11var函數名=newFunction(「參數1」，」參數2」，」參數3」……」函數體」);12如：13var函數名=newFunction(」x」,」y」,」varz=x+y;returnz;」);1415*第三種是在表達式中定義函數16var函數名=function(參數1，參數2，…){函數體};17//例如：18//定義19varadd=function(a,b){20returna+b;21}22//調用函數23document.write(add(50,20));2425arguments對象26在函數代碼中，使用特殊對象arguments，開發者無需明確指出參數名，就能訪問它們。27例如，在函數sayHi()中，第一個參數是message。用arguments[0]28也可以訪問這個值，即第一個參數的值（第一個參數位於位置0，29第二個參數位於位置1，依此類推）。3031關於變量和參數問題：32函數外面定義的變量是全局變量，函數內可以直接使用。33在函數內部沒有使用var定義的=變量則為全局變量，34*在函數內使用var關鍵字定義的變量是局部變量，即出了函數外邊無法獲取。35js函數定義的參數沒有默認值（目前只有最新的火狐瀏覽器支持）

(2) 系統中常用的內置函數

1escape()//字串編碼2unescape()//字串反編碼3*eval()//將參數字符串作為腳本代碼來執行。4*isNaN()//isnotanumber(不是一個數值)5*parseInt()6*parseFloat()

(3) JavaScript的對象的定義和使用

 11.使用原始的方式創建內置對象 2varmyObject=newObject(); 3myObject.name=「lijie」; 4myObject.age=20; 5myObject.say=function(){...} 6 72.直接創建自定義對象 8var對象名={屬性名1：屬性值，屬性名2：屬性值2，…….} 9103.使用自定義構造函數創建對象11functionpen(name,color,price){12//對象的name屬性13this.name=name;14//對象的color屬性15this.color=color;16//對象的piece屬性17this.price=price;18//對象的say方法19this.say=function(){};20}2122varpen=newpen(「鉛筆」,」紅色」,20);23pen.say();24--------------------------------------------------------------25測試類型:261.typeof()//global對象的其中一個方法，typeof()272.對象.constructor;//查看當前對象的構造函數是誰2829if(arr.constructor==Array){30alert("數組");//數組推薦用這種方法，因為typeof得到是object31}

(4) 常用技巧函數

 1HTML的標籤（節點）操作: 2document.write("");//輸出的 3document.getElementById("id名")；//獲取html頁面標籤中，標籤id屬性等於此值的對象。 4如：varid=document.getElementById("hid");//獲取id值為hid的標籤對象 5 6document.getElementsByTagName("標籤名");//獲取當前文檔執行的標籤對象 7 8html標籤對象的操作： 9標籤對象.innerHTML="內容"；//在標籤對象內放置指定內容10標籤對象.style.css屬性名="值"//改變標籤對象的樣式。11示例：id.style.color="red";12注意：屬性名相當於變量名,所以css屬性名中的減號要去掉，將後面的首字母大寫。13如：font-size（css）--->fontSize(JS屬性)14標籤對象.value；//獲取標籤對象的value值15標籤對象.value=」值「；//設置標籤對象的value值

本節作業：一、理論作業：1.JavaScript三種定義函數方法?2.arguments對象的理解？3.簡述JS中全局變量和局部變量的作用域？4.系統中常用的內置函數有哪些？二、代碼題：1.作業全選/全不選/反選的實例2.做一個文件進度條的特效。3.使用自定義構造函數創建對象4.（選做）做一個樹形菜單的點擊效果三、預習作業：1.JavaScript中常用內置對象都有哪些？2.如何使用Date獲取當前時間。3.如何創建一個數組對象。4.如何使用對象的基本操作for..in。

1.8.3 JavaScript的內置對象

(1)for…in語句

1for(variinwindow){2document.write(i+」----」+window[i]);3}4這種語句可以遍歷對象中的所有屬性或數組中的所有元素。

(2)with語句

 1如果使用with語句，就可以簡化對象屬性調用的層次。 2document.write(‘test1’); 3document.write(‘test2’); 4document.write(‘test3’); 5可以使用with來簡化： 6with(document){ 7write(‘test1’); 8write(‘test2’); 9write(‘test3’);10}

(3)JavaScript內置對象

 1*Array（數組） 2vara=newArray();//創建一個空數組 3a=newArray(10);//創建一個數組單元為10個的數組。 4a=newArray(10,20,30);//創建一個指定數組單元的數組。 5 6a=['a','b','c','d'];//快捷定義數組 7常用屬性： 8length--獲取長度。 910常用方法：11toString()把數組轉換為字符串，並返回結果。12sort()對數組的元素進行排序13join()把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。14pop()刪除並返回數組的最後一個元素15push()向數組的末尾添加一個或更多元素，並返回新的長度。1617。。。。。1819*Boolean布爾值包裝類對象20方法：toSource()返回該對象的源代碼。21toString()把邏輯值轉換為字符串，並返回結果。22valueOf()返回Boolean對象的原始值。23*Date24vardd=newDate();2526getDate()從Date對象返回一個月中的某一天(1~31)。27getDay()從Date對象返回一周中的某一天(0~6)。28getMonth()從Date對象返回月份(0~11)。29getFullYear()從Date對象以四位數字返回年份。30getYear()請使用getFullYear()方法代替。31getHours()返回Date對象的小時(0~23)。32getMinutes()返回Date對象的分鐘(0~59)。33getSeconds()返回Date對象的秒數(0~59)。34getMilliseconds()返回Date對象的毫秒(0~999)。35getTime()返回1970年1月1日至今的毫秒數。36同上還有很多set方法用來設置。3738*Math對象用於執行數學任務。方法是靜態的。39abs(x)返回數的絕對值。40ceil(x)對數進行上舍入。41floor(x)對數進行下舍入。42random()返回0~1之間的隨機數。43round(x)把數四舍五入為最接近的整數。4445max(x,y)返回x和y中的最高值。46min(x,y)返回x和y中的最低值。4748*Number49toString();50toFixed把數字轉換為字符串，結果的小數點後有指定位數的數字。5152*String子串處理對象53anchor()創建HTML錨。54*charAt()返回在指定位置的字符。55charCodeAt()返回在指定的位置的字符的Unicode編碼。56*indexOf()檢索字符串。57*lastIndexOf()從後向前搜尋字符串。58match()找到一個或多個正在表達式的匹配。59*replace()替換與正則表達式匹配的子串。60search()檢索與正則表達式相匹配的值。61slice()提取字符串的片斷，並在新的字符串中返回被提取的部分。62split()把字符串分割為字符串數組。63substr()從起始索引號提取字符串中指定數目的字符。64*substring()提取字符串中兩個指定的索引號之間的字符。65toLocaleLowerCase()把字符串轉換為小寫。66toLocaleUpperCase()把字符串轉換為大寫。67*toLowerCase()把字符串轉換為小寫。68*toUpperCase()把字符串轉換為大寫。69*RegExp70exec()正則匹配71test()72match()73*Global74escape(string)--可對字符串進行編碼75unescape(string)--函數可對通過escape()編碼的字符串進行解碼。76encodeURI(URIstring)--函數可把字符串作為URI進行編碼。77decodeURI(URIstring)--函數可對encodeURI()函數編碼過的URI進行解碼。78*eval(string)--函數可計算某個字符串，並執行其中的的JavaScript代碼。79getClass(javaobj)--函數可返回一個JavaObject的JavaClass。80*isNaN(x)--函數用於檢查其參數是否是非數字值。81Number(object)--函數把對象的值轉換為數字。82*parseFloat(string)--函數可解析一個字符串，並返回一個浮點數。83*parseInt(string,radix)

本節作業：一、理論作業：1.JavaScript中常用內置對象都有哪些？3.如何創建一個數組對象方式有幾種。二、代碼題：1.做一個註冊的表單驗證，2.實時問候：如：早上好！3.給你一個日期"2013-06-0112:24:36"的時間戳值。4.顯示中文的星期幾。5.做一個隨機點名系統（點名多次，也不會重復！）;三、預習作業：1.JavaScript中常用事件都有哪些？

1.8.4 JavaScript的事件

(1) 事件處理過程

 1一、事件源:任何一個HTML元素（節點）body,div,buttonp,a,h1....... 2二、事件:你的操作 3滑鼠: 4*click單擊 5dblclick雙擊 6contextmenu(在body)文本菜單（滑鼠右鍵使用） 7要想屏蔽滑鼠右鍵使用returnfalse 8window.document.oncontextmenu=function(ent){...} 910*mouseover放上(移入)11*mouseout離開（移出）12mousedown按下13mouseup抬起14*mousemove移動15鍵盤：16keypress鍵盤事件17keydown按下1819文檔：(主要使用在body標籤中)20*load加載21unload關閉(為了兼容可使用下面函數)22beforeunload關閉之前2324表單：25*focus焦點26*blur失去焦點27*submit提交事件28*change改變（如下拉框選擇事件）29其它：30*scroll滾動事件(常用延遲加載、瀑布流技術)31window.onscroll=function(){32document.documentElement.scrollTop;//獲取滾動條的上距離33document.documentElement.scrollLeft;//滾動條的左距離34}3536selectd事件3738。。。。3940三、事件處理程序41使用一個匿名或回調函數

(2) 三種方法加事件

1第一種：2格式：<tagon事件="事件處理程序"/>3*第二種：4<script>5對象.on事件=事件處理程序6</script>7第三種：(火狐不兼容)8<scriptfor="事件源ID"event="on事件">事件處理程序</script>

(3) 事件對象

 1屬性： 21.srcElement 32.keyCode鍵盤值 4 5事件eventwindow.event 6 71.srcElement代表事件源對象 82.keyCode事件發生時的鍵盤碼keypress,keydownkeyup 93.clientX,clientY坐標位置104.screenX,screenY115.returnValue126.cancelBubble;1314//為頁面添加滑鼠右點擊事件15window.document.oncontextmenu=function(ent){16//兼容IE和火狐瀏覽器兼容17varevent=ent||window.event;18//獲取事件坐標位置19varx=event.clientX;20vary=event.clientY;21...22}2324document.getElementById("one").offsetHeight;//獲取one對應對象的高度25obj.offsetTop指obj距離上方或上層控件的位置，整型，單位像素。26obj.offsetLeft指obj距離左方或上層控件的位置，整型，單位像素。27obj.offsetWidth指obj控件自身的寬度，整型，單位像素。28obj.offsetHeight指obj控件自身的高度，整型，單位像素。2930document.all?'IE':'others'：在IE下document.all值為1，而其他瀏覽器下的值為0；

本節作業：作業:1.完善註冊的表單驗證提示，2.橫向的菜單特效3.為圖片輪換播放添加按鈕5.（選做）滾動圖片替換6.（選做）鍵盤事件的處理（通過鍵盤事件移動圖層）預習：1.JavaScript中的其他事件：（滾動事件，鍵盤事件。。）2.常用的BOM都有哪些？3.HTML中的DOM都有哪些？

1.8.5 JavaScript的BOM

 1<buttononclick="window.location=''">跳轉</button> 21.window對象 3常用的屬性： 4*document：對Document對象的只讀引用 5*history：對History對象的只讀引用。 6*location：用於窗口或框架的Location對象 7Navigator：對Navigator對象的只讀引用 8*parent：返回父窗口。 9length:設置或返回窗口中的框架數量。10Screen:對Screen對象的只讀引用11status:設置窗口狀態欄的文本。12top:返回最頂層的先輩窗口。1314常用方法：15alert()顯示帶有一段消息和一個確認按鈕的警告框。16confirm()顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。17prompt()顯示可提示用戶輸入的對話框。1819close()關閉瀏覽器窗口。20open()打開一個新的瀏覽器窗口或查找一個已命名的窗口。21scrollTo()把內容滾動到指定的坐標。2223setTimeout()在指定的毫秒數後調用函數或計算表達式。24clearTimeout()取消由setTimeout()方法設置的timeout。25setInterval()按照指定的周期（以毫秒計）來調用函數或計算表達式。26clearInterval()取消由setInterval()設置的timeout。27282.Navigator對象29Navigator對象包含的屬性描述了正在使用的瀏覽器。可以使用這些屬性進行平台專用的配置。30常用屬性：31with(document){32write("你的瀏覽器信息：<ul>");33write("<li>代碼："+navigator.appCodeName+"</li>");34write("<li>名稱："+navigator.appName+"</li>");35write("<li>版本："+navigator.appVersion+"</li>");36write("<li>語言："+navigator.language+"</li>");37write("<li>編譯平台："+navigator.platform+"</li>");38write("<li>用戶表頭："+navigator.userAgent+"</li>");39write("</ul>");40}4142433.Screen對象包含有關客戶端螢幕幕的信息。4445常用屬性：46document.write("螢幕寬度："+screen.width+"px<br/>");47document.write("螢幕高度："+screen.height+"px<br/>");48document.write("螢幕可用寬度："+screen.availWidth+"px<br/>");49document.write("螢幕可用高度："+screen.availHeight+"px");5051參考了解其他屬性信息獲取方式52網頁可見區域寬：document.body.clientWidth53網頁可見區域高：document.body.clientHeight54網頁可見區域寬：document.body.offsetWidth(包括邊線的寬)55網頁可見區域高：document.body.offsetHeight(包括邊線的高)56網頁正文全文寬：document.body.scrollWidth57網頁正文全文高：document.body.scrollHeight58網頁被卷去的高：document.body.scrollTop59網頁被卷去的左：document.body.scrollLeft60網頁正文部分上：window.screenTop61網頁正文部分左：window.screenLeft62螢幕分辨率的高：window.screen.height63螢幕分辨率的寬：window.screen.width64螢幕可用工作區高度：window.screen.availHeight65螢幕可用工作區寬度：window.screen.availWidth66674.History對象包含用戶（在瀏覽器窗口中）訪問過的URL。6869705.Location對象包含有關當前URL的信息。717273//獲取頁面中第二form表單中，一個username輸入框的值（7種方式）74//alert(document.forms[1].username.value);75alert(document.myform.username.value);76//alert(document.forms.myform.username.value);77//alert(document.forms.item(1).username.value);78//alert(document.forms['myform'].username.value);79//alert(document['myform'].username.value);80//alert(document.forms.item('myform').username.value);//火狐不兼容

1.8.6 講解HTML DOM

(1)基本概念

 1HTMLDOM定義了訪問和操作HTML文檔的標準方法。 2HTMLDOM把HTML文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。 3DOM被分為不同的部分： 41.CoreDOM 5定義了一套標準的針對任何結構化文檔的對象 62.XMLDOM 7定義了一套標準的針對XML文檔的對象 83.HTMLDOM 9定義了一套標準的針對HTML文檔的對象。1011節點：根據DOM，HTML文檔中的每個成分都是一個節點。12DOM是這樣規定的：13>整個文檔是一個文檔節點14>每個HTML標籤是一個元素節點15>包含在HTML元素中的文本是文本節點16>每一個HTML屬性是一個屬性節點17>註釋屬於註釋節點1819節點彼此間都存在關係。20>除文檔節點之外的每個節點都有父節點。21>大部分元素節點都有子節點。22>當節點分享同一個父節點時，它們就是同輩（同級節點）。23>節點也可以擁有後代，後代指某個節點的所有子節點，或者這些子節點的子節點24>節點也可以擁有先輩。先輩是某個節點的父節點，或者父節點的父節點2526查找並訪問節點27你可通過若干種方法來查找您希望操作的元素：28>通過使用getElementById()和getElementsByTagName()方法29>通過使用一個元素節點的parentNode、firstChild以及lastChildchildNodes屬性30>nextSibling返回節點之後緊跟的同級節點。/previousSibling返回節點之前緊跟的同級節點。3132節點信息33每個節點都擁有包含著關於節點某些信息的屬性。這些屬性是：34nodeName（節點名稱）35nodeValue（節點值）36nodeType（節點類型）3738nodeName屬性含有某個節點的名稱。39元素節點的nodeName是標籤名稱40屬性節點的nodeName是屬性名稱41文本節點的nodeName永遠是#text42文檔節點的nodeName永遠是#document

(2)HTML DOM 對象參考

 1Document:代表整個HTML文檔，可被用來訪問頁面中的所有元素 2常用集合屬性：forms 3Anchor:代表<a>元素 4Area:代表圖像映射中的<area>元素 5Base:代表<base>元素 6Body:代表<body>元素 7Button:代表<button>元素 8Event:代表某個事件的狀態 9Form:代表<form>元素10Frame:代表<frame>元素11Frameset:代表<frameset>元素12Iframe:代表<iframe>元素13Image:代表<img>元素14Inputbutton:代表HTML表單中的一個按鈕15Inputcheckbox:代表HTML表單中的復選框16Inputfile:代表HTML表單中的文件上傳17Inputhidden:代表HTML表單中的隱藏域18Inputpassword:代表HTML表單中的密碼域19Inputradio:代表HTML表單中的單選按鈕20Inputreset:代表HTML表單中的重置按鈕21Inputsubmit:代表HTML表單中的確認按鈕22Inputtext:代表HTML表單中的文本輸入域（文本框）23Link:代表<link>元素24Meta:代表<meta>元素25Object:代表<Object>元素26Option:代表<option>元素27Select:代表HTML表單中的選擇列表28Style:代表單獨的樣式聲明29Table:代表<table>元素30TableData:代表<td>元素31TableRow:代表<tr>元素32Textarea:代表<textarea>元素

1.8.7 繼續講解DOM(重點講XML DOM)

(1)HTML的DOM

1Object:代表<Object>元素2Option:代表<option>元素3Select:代表HTML表單中的選擇列表4Style:代表單獨的樣式聲明5Table:代表<table>元素6TableData:代表<td>元素7TableRow:代表<tr>元素8Textarea:代表<textarea>元素

(2)XML的DOM

 1DOM（DocumentObjectModel）文檔對象模型 21.document文檔HTMLXML文件（標記語言) 3<body> 4<div> 5<!----> 6<ahref="#">wwww</a> 7</div> 8</body> 9節點： 10將文檔想成一個倒樹，每一個部分（根、元素、文本（內容），屬性，註釋）都是一節點。 11根據DOM，HTML文檔中的每個成分都是一個節點。 12 13DOM是這樣規定的： 141.整個文檔是一個文檔節點(根節點) 152.每個HTML標籤是一個元素節點 163.包含在HTML元素中的文本是文本節點 174.每一個HTML屬性是一個屬性節點 185.註釋屬於註釋節點 19 202.父、子和同級節點 21節點樹中的節點彼此之間都有等級關係。 22 23父、子和同級節點用於描述這種關係。父節點擁有子節點，位於相同層級上的子節點稱為同級節點（兄弟或姐妹）。 241.在節點樹中，頂端的節點成為根節點 252.根節點之外的每個節點都有一個父節點 263.節點可以有任何數量的子節點 274.葉子是沒有子節點的節點 285.同級節點是擁有相同父節點的節點 29 30只要知道一個節點，按關係找到其它節點 31父節點：parentNode 32子節點（第一個，最後一個）childNodesfirstChildlastChild 33同胞（同輩）節點（上一個，下一個）nextSiblingpreviousSibling 34 353。獲取節點的方式： 36arraygetElementsByTagName("節點名");//獲取所對應節點名（所有），返回的是數組 37objectgetElementById("id名");//獲取id名的唯一節點對象 38 39示例：(找節點) 40document.getElementsByTagName("li");//所有所有li節點 41document.getElementById("lid");//獲取id值為lid的唯一節點 42document.getElementById("uid").getElementsByTagName("li"); 43//獲取id值為uid中所有li子節點 44document.getElementsByTagName("ul")[0].getElementsByTagName("li"); 45//獲取第一個ul節點中所有li子節點 46 47獲取到的標記名(多個)、id（唯一）、name（多個） 48 494.每個節點中的內容 50節點類型nodeType、節點名nodeName，節點值nodeValue 51 52節點名nodeName： 53nodeName是只讀的 54元素節點的nodeName與標籤名相同 55屬性節點的nodeName是屬性的名稱 56文本節點的nodeName永遠是#text 57文檔節點的nodeName永遠是#document 58 59節點值nodeValue 60元素節點的nodeValue是undefined 61文本節點的nodeValue是文本自身 62屬性節點的nodeValue是屬性的值 63 64nodeType（節點類型） 65元素類型節點類型 66元素1 67屬性2 68文本3 69註釋8 70文檔9 71 72 734.Object對象（HTML元素轉成的對象(js對象)） 74注意：如果使用js操作HTML文檔，就需要選將HTML文檔結構轉成Js對象 75a.操作屬性: 76nodeName（節點名稱） 77nodeValue（節點值） 78nodeType（節點類型） 79其他屬性：（針對於節點） 80childNodes返回節點到子節點的節點列表。 81firstChild返回節點的首個子節點。 82lastChild返回節點的最後一個子節點。 83nextSibling返回節點之後緊跟的同級節點。 84previousSibling屬性可返回某節點之前緊跟的節點（處於同一樹層級） 85parentNode返回節點的父節點。 86textContent設置或返回節點及其後代的文本內容。 87 88b.操作內容 89innerText(IE)textContent(FF)//獲取的是顯示的內容，不包含HTML標籤 90innerHTML//獲取的是顯示的內容，會包含HTML 91outerText 92outerHTML 93表單 94value 95c.操作樣式 96aobj.style.backgroundColor="red"; 97aobj.style.fontSize="3cm"; 98className 99aobj.className="test";100aobj.className+="demo";101aobj.className="";102e.操作節點：103appendChild()向節點的子節點列表的結尾添加新的子節點。104cloneNode()復制節點。105removeChild()刪除（並返回）當前節點的指定子節點。106replaceChild()用新節點替換一個子節點。107hasAttributes()判斷當前節點是否擁有屬性。108hasChildNodes()判斷當前節點是否擁有子節點。109insertBefore()在指定的子節點前插入新的子節點。110111f.創建節點：112*createElement()創建元素節點113createAttribute()來創建屬性節點可以：元素節點.屬性名=值；114createTextNode()來創建新的文本節點可以：元素節點.innerHTML=文本內容；115116有了以上三點的操作之前先轉成對象117轉成對象的兩種形式：1181.標記名(多個)、id（唯一）、name（多個）119document中的三個方法120varobjs=document.getElementsByTagName("div");//獲取多個121varobjs=document.getElementById("one");//獲取一個122varobjs=document.getElementsByName("two");123

1.8.8 Ajax

(1) JavaScript版的Ajax做到步驟

 1varxmlhttp; 2 31.創建請求對象 4if(window.XMLHttpRequest){ 5//codeforIE7+,Firefox,Chrome,Opera,Safari 6xmlhttp=newXMLHttpRequest(); 7}else{ 8//codeforIE6,IE5 9xmlhttp=newActiveXObject("Microsoft.XMLHTTP");10}11122.設置回調函數（監聽）13xmlhttp.onreadystatechange=函數名；14或15xmlhttp.onreadystatechange=function(){16函數體。。。17}18193.初始化：20xmlhttp.open("GET","gethint.php?q="+str,true);//異步以get方式發送到gethint.php21224.發送：23xmlhttp.send();

(2) xmlhttp請求對象

 1屬性： 2*readyState//請求狀態：0,1,2,3,4 3*responseText//響應內容 4responseXML//xml響應對象 5*status//瀏覽器響應狀態：200正常，404請求地址不存在,, 6statusText//狀態內容 7*onreadystatechange//回調函數屬性 8 9方法：10abort()//取消當前響應，關閉連接並且結束任何未決的網路活動。11getAllResponseHeaders()//把HTTP響應頭部作為未解析的字符串返回。12getResponseHeader()//返回指定的HTTP響應頭部的值13*open()//初始化HTTP請求參數14*send()//發送HTTP請求，使用傳遞給open()方法的參數15*setRequestHeader()//向一個打開但未發送的請求設置或添加一個HTTP請求。1617模擬POST提交代碼：18xmlhttp.open("POST","ajax_test.php",true);19xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");20xmlhttp.send("fname=Bill&lname=Gates");

福利

掃碼添加小助手微信，回復：1，入群獲取Python電子書（附代碼~~）

點擊閱讀原文，查看往期精彩文章。