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基础书籍推荐