js基础知识4
?
?原文鏈接：https://book.apeland.cn/details/361/#3.getElementsByClassName()方法
DOM介紹
1.文檔：DOM中的”D”
? DOM是”Document Object Model“(文檔對象模型)的首字母縮寫。如果沒有document，DOM也就無從談起。當創(chuàng)建一個網(wǎng)頁并把它加載到web瀏覽器中時，DOM就在幕后悄然而生。它將根據(jù)你編寫的網(wǎng)頁文檔創(chuàng)建一個文檔對象。
? 在我們自己的語言中，”對象“這個詞的含義往往不那么明確和具體，它幾乎可以稱呼任何一種客觀存在的事物。但在程序設計語言中，”對象“這個詞的含義非常明確和具體。
2.對象：DOM中的”O(jiān)“
對象是一種獨立的數(shù)據(jù)集合。與某個特定對象相關聯(lián)的變量被稱為這個對象的屬性；可以通過某個特定對象去調(diào)用的函數(shù)被稱為這個對象的方法。
Javascript語言中的對象可以分為三種類型：
3.模型：DOM中的“M”
? DOM中的“M”代表著“Model”(模型)，但說它代表著“Map(地圖)”也是可以的。模型也好，地圖也罷，它們的含義都是某種事物的表現(xiàn)形式。就像一個模型火車代表著一列真正的火車、一張城市街道圖代表著一個世紀存在的城市那樣，DOM代表著被加載到瀏覽器窗口里的當前網(wǎng)頁：瀏覽器由我們提供了當前的地圖（或者說模型），而我們可以通過JavaScript去讀取這張地圖。
? 既然是地圖，就必須有諸如方向、等高線和比例尺之類的記號。要想看懂和使用地圖，就必須知道這個記號的含義和用途——這個道理同樣適用于DOM。要想從DOM獲取信息，我們必須先把各種用來表示和描述一份文檔的記號弄明白。
? DOM把一份文檔表示為一顆樹（這里所說的“樹“是數(shù)學意義上的概念），這是我們理解和運用這一模型的關鍵。更具體的說，DOM把文檔表示一顆家譜樹。
? 家譜數(shù)本身又是一種模型。家譜樹的典型用法是表示一個人類家族的譜系關系并使用parent(父)、child(子)、sibling(兄弟)等記號來表明家族成員之間的關系。家譜樹可以把一些相當復雜的關系簡明表示出來：一位特定的成員既是某些成員的父輩，又是另一位成員的子輩，同時還是另一位成員的兄弟。
? 類似于人類家族譜系的情況，家譜樹模型也非常適用用來表示一份用HTML語言編寫出來的文檔。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>class list</title> </head> <body><h2>你要買什么課程？</h2><p title='請您選擇購買的課程'>本課程是web全棧課程，期待你的購買！</p><ul id='classList'><li class='item'>JavaScript</li><li class='item'>css</li><li>DOM</li></ul> </body> </html>?
? 有此圖可以看出來該家譜數(shù)以html為根元素的。毫無疑問，html元素完全可以代表整個文檔。
? 我們會發(fā)現(xiàn)<head>和<body>兩個分枝。他們存在于同一個層次且互不包含，所以他們是兄弟關系。他們有著共同的父元素<html>,但又各有各的子元素，所以它們本身又是其它一些元素的父元素。
<head>元素由兩個子元素：<meta>和<title>（這兩個元素是兄弟關系）。<body>元素由三個子元素：<h1>、<p>、<ul>(這三個元素是兄弟關系)。如果繼續(xù)深入下去，我們將發(fā)現(xiàn)<ul>也是一個父元素。他有三個子元素，他們都是<li>元素。
? 利用這種簡單的家譜關系記號，我們可以把各元素之間的關系簡明清晰地表達出來。
? 如果把各種文檔元素都想象成一顆家譜樹的各個節(jié)點的話，我們就可以用同樣的記號來描述DOM。不過，與使用”家譜樹“這個術語相比，把一份文檔稱為一顆“節(jié)點樹”更準確。
節(jié)點
? 節(jié)點（node）這個名詞來自網(wǎng)絡理論，它代表著網(wǎng)絡中的一個連接點。網(wǎng)絡是有節(jié)點構成的集合。
? 在現(xiàn)實世界里，一切事物都是有原子構成。原子是現(xiàn)實世界的節(jié)點。但原子本身還可以進一步分解為更細小的亞原子微粒。這些亞原子微粒同樣是節(jié)點。
? DOM也是同樣的情況。文檔也是有節(jié)點構成的集合，只不過此時的節(jié)點是文檔樹上的樹枝和樹葉而已。
? 在DOM里存在著許多不同類型的節(jié)點。就像原子包含著亞原子微粒那樣，有些DOM節(jié)點還包含著其他類型的節(jié)點。
1.元素節(jié)點
在剛才上述的“課程列表”的文檔時，像<body>、<p>、<ul>之類的元素這些我們都稱為叫元素節(jié)點（element node）。如果把web上的文檔比作一座樓，元素就是建造這座樓的磚塊，這些元素在文檔中的布局形成了文檔的結構。
? 各種標簽提供了元素的名字。文本段落元素的名字是”p”，無序列表元素的名字是“ul”,列表項元素的名字是“l(fā)i”
2.文本節(jié)點
元素只是不同節(jié)點類型中的一種。如果一份文檔完全由一些空白元素構成，它將有一個結構，但這份文檔本身將不會包含什么內(nèi)容。在網(wǎng)上，內(nèi)容決定著一切，沒有內(nèi)容的文檔是沒有任何價值的，而絕大數(shù)內(nèi)容都是有文本提供。
<p title='請您選擇購買的課程'>本課程是web全棧課程，期待你的購買！</p>。由此可見，<p>元素包含著文本"本課程是web全棧課程，期待你的購買！"。它是一個文本節(jié)點(text node)
3.屬性節(jié)點
還存在著其他的一些節(jié)點類型。例如，注釋就是另外一種節(jié)點類型。但這里我們介紹的是屬性節(jié)點。
? 元素都或多或少的有一些屬性，屬性的作用是對元素做出更具體的描述。例如，幾乎所有的元素都有一個title屬性，而我們可以利用這個尚需經(jīng)對包含在元素里的東西做出準確的描述：
在DOM中，title='請您選擇購買的課程'是一個屬性節(jié)點（attribute node）。如圖所示。因為屬性總是被放在起始標簽里，所以屬性節(jié)點總是被包含在元素節(jié)點當中。并非所屬地額元素都包含著屬性，但所有的屬性都會被包含在元素里。
獲取元素節(jié)點的方式
1.getElementById()方法
DOM提供了一個名為getElemntById()的方法，這個方法將返回一個與那個給定id屬性值的元素節(jié)點相對應的對象。這個方法是與document對象相關聯(lián)的函數(shù)。`getElemntById()方法只有一個參數(shù)：你想獲得的那個元素的id屬性值，這個id值必須是字符串類型。
語法：
例子：
<div id="box">mcw</div><script type="text/javascript"> var box=document.getElementById('box')console.log(box);</script>這個調(diào)用之后返回一個對象，這個對象對應著和docuemnt對象里的一個獨一無二的元素，那個元素的HTML id屬性值是?classList。
?
文檔中的每一個元素都對應著一個對象。利用DOM提供的方法，我們可以把與這些元素怒相對應的任何一個對象篩選出來。
2.getElementsByTagName()方法
這個方法將返回一個元素對象集合。
語法：
例子：
結果：
這個元素集合中的每個元素都是一個對象。我們可以通過listItems.length來獲取當前集合的長度，通過for循環(huán)來遍歷出每一項的元素對象。
請注意：即使在整個文檔里只有一個元素有給定的標簽名，getElementsByTagName()方法也將返回一個元素集合。此時，它的長度為1。
<html lang="en"> <head><meta charset="UTF-8"> </head> <body><div id="box">魔降風云變<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div><script type="text/javascript">var box=document.getElementsByTagName('div')console.log(box);var lis=document.getElementsByTagName('li')console.log(lis);</script> </body> </html> View Code遍歷li標簽
<div id="box">魔降風云變<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div><script type="text/javascript">var lis=document.getElementsByTagName('li')for(var i=0;i<lis.length;i++){console.log(lis[i]);}?
3.getElementsByClassName()方法
? 我們在構建網(wǎng)頁的時候會存在相同或更多的li標簽，如果用getElementsByTagName()方法獲取到再篩選無疑是增加工作效率。在之前我們用到了class將對應的某些元素進行歸類，同樣情況下,DOM中也提供了通過類名來獲取某些DOM元素對象的方法getElementBysClassName().
語法：
例子：
結果：
由此可見，它獲取出來的也是元素對象集合。只不過通過類名設置之后，只獲取出來一部分的元素對象。
加油干，你可以的
我們可以通過上述講解的三種方式來找到對應的元素，找到元素后，我們就可以利用getAttribute()方法和setAttribute()方法對元素的屬性值進行操作
1.getAttrbute()方法
getAttribute()方法只接收一個參數(shù)——你打算查詢的屬性的名字。
語法：
比如上述案例，如何將p標簽中的title屬性打印出來？
結果：
如果查詢不到結果，則該調(diào)用則返回null，null是JavaScript語言中的空值，其含義是’你說的這個東西不存在‘
2.setAttribute()方法
setAttrbute()方法它允許我們對屬性節(jié)點的值做出修改。此方法傳遞兩個參數(shù)。第一個參數(shù)為屬性名，第二個參數(shù)為屬性值
語法：
例如:
效果：
同樣的情況，我們也可以通過setAttribute()方法對上述的p標簽的title屬性進行修改。
? 這里有一個非常值得關注的細節(jié)：通過setAttribute()方法對文檔做出的修改，如果我們查看源代碼發(fā)現(xiàn)看到的依舊是原來的屬性值——也就是說，setAttribute()方法做出的修改不會反映為文檔本身的源碼里。這種“表里不一”的現(xiàn)象源自于DOM的工作模式：先加載文檔的靜態(tài)內(nèi)容、再以動態(tài)方式對他們進行刷新，動態(tài)刷新不影響文檔的靜態(tài)內(nèi)容。這正是DOM的真正威力和誘人之處：對頁面內(nèi)容的刷新不需要最終用戶在他們的瀏覽器里執(zhí)行頁面刷新操作就可以實現(xiàn)。
節(jié)點屬性
在文檔對象模型(DOM)中，每一個節(jié)點都是一個對象。DOM節(jié)點有三個重要的屬性：
1.nodeName屬性：節(jié)點的名稱，是只讀
2.nodeValue屬性：節(jié)點的值
元素節(jié)點的 nodeValue 是 undefined 或 null
文本節(jié)點的 nodeValue 是文本自身
3.nodeType 屬性:?節(jié)點的類型，是只讀的。
以下常用的幾種結點類型:
| 元素 | 1 |
| 屬性 | 2 |
| 文本 | 3 |
| 注釋 | 8 |
| 文檔 | 9 |
驗證
- attributes屬性是獲取到該節(jié)點對象上的所有屬性的集合
- childNodes屬性是獲取到該節(jié)點對象的所有子節(jié)點的集合
效果顯示：
console.log(divNode); 打開目錄： console.dir(divNode);?
childNodes屬性
訪問選定元素節(jié)點下的所有子節(jié)點的列表，返回的值可以看作是一個數(shù)組，他具有l(wèi)ength屬性。
語法：
注意：
如果選定節(jié)點沒有子節(jié)點，則該屬性返回不包含節(jié)點的NodeList
cn=divNode.childNodes; console.log(cn);?
?
firstChild屬性
firstChild屬性返回childNodes數(shù)組中的第一個子節(jié)點。如果選定的節(jié)點沒有子節(jié)點，則該屬性返回NULL。
語法：
與elementNode.childNodes[0]是同樣的效果
cn=divNode.firstChild;console.log(cn);
lastChild屬性
lastChild屬性返回childNodes數(shù)組中的最后一個子節(jié)點。如果選定的節(jié)點沒有子節(jié)點，則該屬性返回NULL。
語法：
與elementNode.childNodes[elementNode.childNodes.length-1]是同樣的效果
cn=divNode.lastChild;console.log(cn);
?
parentNode屬性
1.獲取指定節(jié)點的父節(jié)點
語法：
注意：父節(jié)點只能有一個
cn=divNode.parentNode;console.log(cn);
?
2.訪問祖先節(jié)點
3.訪問兄弟節(jié)點
nextSiblings屬性可返回某個節(jié)點之后緊跟的節(jié)點,如果無此節(jié)點，則該屬性返回null
語法：
previousSibling()屬性可返回節(jié)點之前緊跟的節(jié)點，如果無此節(jié)點，則該屬性返回null
語法：
以上兩個方法，在谷歌瀏覽器上獲取出來的是空白文本節(jié)點（例如，換行符號）。
解決問題方法
判斷節(jié)點的nodeType是否為1，如果是為元素節(jié)點，跳過
節(jié)點方法
1.創(chuàng)建節(jié)點createElement()
createElement()方法可創(chuàng)建元素節(jié)點。此方法可返回一個Element對象
語法：
參數(shù)：
tagName:字符傳值，這個字符串用來指明創(chuàng)建元素的類型
例子：
僅僅是創(chuàng)建了一個新的p元素節(jié)點，如何來設置該標簽的文本內(nèi)容呢？
注意：此文本內(nèi)容，p標簽既可以是純文本，也可以在p標簽中包含一些其它標簽的文本。
innerText屬性
僅僅對元素來獲取或者設置該文本
如果像在p標簽插入一段<a>mjj</a>，會發(fā)現(xiàn)<a>mjj</a>它也會充當文本的來進行設置。
innerHTML屬性
既可以設置文本又可以設置標簽
注意：如果想獲取節(jié)點對象的文本內(nèi)容，可以直接調(diào)用innerText或者innerHTML屬性來獲取
如何將創(chuàng)建的新節(jié)點對象插入到我們指定的節(jié)點位置呢？下節(jié)知曉
2.插入節(jié)點appendChild()
在指定的節(jié)點的最后一個子節(jié)點之后添加一個新的子節(jié)點
語法：
參數(shù)：
newNode：指定追加的節(jié)點
3.插入節(jié)點insertBefore()
insertBefore()方法可在已有的子節(jié)點前插入一個新的子節(jié)點
語法：
參數(shù)：
newNode:要插入的新節(jié)點
node:指定此節(jié)點前插入節(jié)點
4.刪除節(jié)點removeChild()
removeChild()方法從子節(jié)點列表中刪除某個節(jié)點。如果刪除成功，此方法可返回被刪除的節(jié)點，如失敗，則返回NULL
語法：
參數(shù)：
node：必需的，指定要刪除的節(jié)點
例子：
注意：把刪除的子節(jié)點賦值給 x，這個子節(jié)點不在DOM樹中，但是還存在內(nèi)存中，可通過 x =null來刪除對象。
5.替換元素節(jié)點replaceChild()
replaceChild實現(xiàn)子節(jié)點(對象)的替換。返回被替換對象的引用
語法：
參數(shù)：
newnode：必需，用于替換的oldnew的對象
oldnew：必需，被newnode替換的對象
例子：
6.創(chuàng)建文本節(jié)點createTextNode
createTextNode()方法創(chuàng)建新的文本節(jié)點，返回新創(chuàng)建的Text節(jié)點
語法：
參數(shù)：
data: 字符串值，可規(guī)定此節(jié)點的文本
例子：創(chuàng)建一個div并向其中添加一條消息
樣式設置
通過JavaScript以不同的方式來操作CSS樣式，我們可以通過該節(jié)點對象的style屬性來實現(xiàn)。
1.動態(tài)設置樣式
直接在想要動態(tài)設置樣式的元素內(nèi)部添加內(nèi)聯(lián)樣式。這是用HTMLElement.style屬性來實現(xiàn)。這個屬性包含了文檔中每個元素的內(nèi)聯(lián)樣式信息。你可以設置這個對象的屬性直接修改元素樣式
例子：
效果顯示：
CSS樣式的JavaSript屬性版本以小駝峰式命名法書寫，而CSS版本帶連接符號（backgroundColor?對?background-color）
2.操作屬性的類來控制樣式
- 首先在HTML的<head>中添加下列代碼
- 現(xiàn)在我們改為使用HTML操作的常用方法 —?Element.setAttribute()?— 這里有兩個參數(shù)，你想在元素上設置的屬性，你要為它設置的值。在這種情況下，我們在段落中設置類名為highlight：
兩種方式各有優(yōu)缺點，選擇哪種取決于你自己。第一種方式無需安裝，適合簡單應用，第二種方式更加正統(tǒng)（沒有CSS和JavaScript的混合，沒有內(nèi)聯(lián)樣式，而這些被認為是不好的體驗）。當你開始構建更大更具吸引力的應用時，你可能會更多地使用第二種方法，但這完全取決于你自己。
事件
事件是您在編程時系統(tǒng)內(nèi)發(fā)生的動作或者發(fā)生的事情，系統(tǒng)通過它來告訴您在您愿意的情況下您可以以某種方式對它做出回應。例如：如果您在網(wǎng)頁上單擊一個按鈕，您可能想通過顯示一個信息框來響應這個動作。
一系列的事件
就像上面提到的,?事件是您在編程時系統(tǒng)內(nèi)發(fā)生的動作或者發(fā)生的事情— 系統(tǒng)會在事件出現(xiàn)的時候觸發(fā)某種信號并且會提供一個自動加載某種動作（列如：運行一些代碼）的機制，比如在一個機場，當一架將起飛的飛機的跑道清理完成后，飛行員會收到一個信號，結果是他們開始起飛。
在Web中, 事件在瀏覽器窗口中被觸發(fā)并且通常被綁定到窗口內(nèi)部的特定部分 — 可能是一個元素、一系列元素、被加載到這個窗口的 HTML 代碼或者是整個瀏覽器窗口。舉幾個可能發(fā)生的不同事件：
- 用戶在某個元素上點擊鼠標或懸停光標。
- 用戶在鍵盤中按下某個按鍵。
- 用戶調(diào)整瀏覽器的大小或者關閉瀏覽器窗口。
- 一個網(wǎng)頁停止加載。
- 提交表單。
- 播放、暫停、關閉視頻。
- 發(fā)生錯誤
主要事件有：
| onclick | 鼠標單擊事件 |
| onmouseover | 鼠標經(jīng)過事件 |
| onmouseout | 鼠標移開事件 |
| onchange | 文本框內(nèi)容改變事件 |
| onselect | 文本框內(nèi)容被選中事件 |
| onfocus | 光標聚焦事件 |
| onblur | 光標失焦事件 |
| onload | 網(wǎng)頁加載事件 |
鼠標單擊事件(onclick)
onclick是鼠標單擊事件，當您在網(wǎng)頁上單擊鼠標時，就會發(fā)生該事件。同時onclick事件調(diào)用的程序塊也會被執(zhí)行，通常與按鈕一起使用。
比如，我們單擊按鈕時，觸發(fā)onclick事件，并計算兩個數(shù)的和。
鼠標經(jīng)過事件(onmouseover)&&鼠標移開事件(onmouseout)
鼠標經(jīng)過事件，當鼠標移到一個元素上時，該對象就出發(fā)了onmouseover事件，并執(zhí)行onmouseover事件調(diào)用的程序。
當鼠標移到一個元素上時，該對象就出發(fā)了onmouseout事件，并執(zhí)行onmouseout事件調(diào)用的程序。
光標聚焦事件(onfocus)&&光標失焦事件(onblur)
當網(wǎng)頁中的。元素獲得焦點時，執(zhí)行onfocus事件，并調(diào)用程序讓程序執(zhí)行。尤其是表單控件。onblur事件和onfocus是相對事件，當光標離開當前聚焦元素的時候，觸發(fā)onblur事件，同時執(zhí)行被調(diào)用的程序。
內(nèi)容選中事件
當文本框或者文本域中的文字被選中時，觸發(fā)onselect事件，同時帶調(diào)用的程序就會被執(zhí)行。
文本框內(nèi)容改變事件(onchange)
通過改變文本框的內(nèi)容來觸發(fā)onchange事件，同時執(zhí)行被調(diào)用的程序。
當改變用戶文本框內(nèi)的文字后，觸發(fā)onchange事件。
加載事件(onload)
事件會在頁面加載完成后，立即發(fā)生，同時執(zhí)行被調(diào)用的程序。
注意：加載頁面時，觸發(fā)onlaod事件，事件寫在body標簽內(nèi)。
?
轉載于:https://www.cnblogs.com/machangwei-8/p/10974441.html
總結
- 上一篇： 内部类及内部类什么时候使用
- 下一篇： Linux基础书籍推荐