JavaScript前端開發(fā)案例教程-第6章 DOM（上）

第6章DOM（上）《JavaScript前端開發(fā)案例教程（第2版）》學習目標/Target

熟悉WebAPI的概念，能夠說出WebAPI的作用

熟悉什么是DOM，能夠說出DOM中文檔、元素和節(jié)點的關(guān)系

掌握多種獲取元素的方法，能夠根據(jù)不同場景選擇合適的方法獲取元素

了解事件的概念，能夠說出事件的3個要素學習目標/Target

掌握事件的注冊，能夠為頁面中的元素注冊事件

掌握操作元素內(nèi)容的方法，能夠根據(jù)不同場景選擇合適的方法操作元素內(nèi)容

掌握操作元素樣式的方法，能夠根據(jù)不同場景選擇合適的方法操作元素樣式

掌握操作元素屬性的方法，能夠根據(jù)不同場景選擇合適的方法操作元素屬性章節(jié)概述/Summary通過前面的學習，相信大家已經(jīng)掌握了JavaScript的基礎(chǔ)知識。但是，要想實現(xiàn)網(wǎng)頁交互效果，僅僅掌握基礎(chǔ)知識是不夠的。例如，通過JavaScript改變元素的內(nèi)容、樣式和屬性，為元素注冊事件，要實現(xiàn)這些功能，都需要用到DOM的相關(guān)知識。本章將針對DOM的一些基本知識進行詳細講解。目錄/Contents010203WebAPI簡介DOM簡介獲取元素04事件基礎(chǔ)目錄/Contents050607元素內(nèi)容操作元素樣式操作元素屬性操作08動手實踐：顯示和隱藏密碼WebAPI簡介6.1

先定一個小目標！熟悉WebAPI的概念，能夠說出WebAPI的作用6.1WebAPI簡介若要開發(fā)一個美顏相機的手機應(yīng)用，該應(yīng)用需要調(diào)起手機上的攝像頭來拍攝畫面。那么手機應(yīng)用如何訪問攝像頭的功能呢？6.1WebAPI簡介手機操作系統(tǒng)提供了攝像頭API，手機應(yīng)用通過攝像頭API就可以獲得訪問攝像頭的功能。什么是API？應(yīng)用程序編程接口（ApplicationProgrammingInterface，API）是軟件系統(tǒng)預(yù)先定義的接口，用于軟件系統(tǒng)不同組成部分的銜接。每一種開發(fā)語言都有自己的API。6.1WebAPI簡介API在Web開發(fā)中的作用是什么？6.1WebAPI簡介WebAPI是指在Web開發(fā)中用到的API。在JavaScript語言中，WebAPI被封裝成了對象，用來幫助開發(fā)者實現(xiàn)某種功能。開發(fā)人員無須訪問對象源代碼，也無須理解對象內(nèi)部工作機制和細節(jié)，只需掌握對象的屬性和方法具體如何使用即可。例如，在前面的開發(fā)中，經(jīng)常使用console.log()。這里的console就是一個WebAPI對象，用于操作控制臺，它的log()方法用于在控制臺輸出信息。6.1WebAPI簡介DOM簡介6.2

先定一個小目標！熟悉DOM的概念，能夠說出DOM中文檔、元素和節(jié)點的關(guān)系6.2DOM簡介文檔對象模型（DocumentObjectModel，DOM）是W3C組織制定的用于處理HTML文檔和XML文檔的編程接口。6.2DOM簡介利用DOM可完成元素獲取以及元素內(nèi)容、屬性和樣式的操作。在實際開發(fā)中，許多帶有交互效果的頁面，如改變盒子的大小、Tab欄的切換、購物車功能等，都離不開DOM。6.2DOM簡介購物車Tab欄的切換DOM將整個文檔視為樹形結(jié)構(gòu)，這個結(jié)構(gòu)被稱為文檔樹。DOM中基本名詞解釋文檔（document）：一個頁面就是一個文檔。元素（element）：頁面中的所有標簽都是元素。節(jié)點（node）：頁面中所有的內(nèi)容在文檔樹中都是節(jié)點（如元素節(jié)點、文本節(jié)點、注釋節(jié)點等）。6.2DOM簡介簡單的文檔樹示例：6.2DOM簡介獲取元素6.3

先定一個小目標！掌握根據(jù)id屬性獲取元素，能夠利用相關(guān)方法完成元素的獲取6.3.1根據(jù)id屬性獲取元素在頁面中有一個ul無序列表，若要通過id屬性從列表中獲取其中一項，如何實現(xiàn)呢？6.3.1根據(jù)id屬性獲取元素6.3.1根據(jù)id屬性獲取元素根據(jù)id屬性獲取元素的示例代碼如下。document.getElementById('id屬性值');實現(xiàn)方法：可以為目標元素設(shè)置id屬性作為唯一標識，然后結(jié)合document對象提供的getElementById()方法獲取目標元素。getElementById()方法在使用時只需將id屬性值作為參數(shù)傳入即可，調(diào)用后會返回一個元素對象，這個元素對象就是根據(jù)id屬性獲取的目標元素。

先定一個小目標！掌握根據(jù)標簽名獲取元素，能夠利用相關(guān)方法完成元素的獲取6.3.2根據(jù)標簽名獲取元素在頁面中有一個ul無序列表，若要通過元素的標簽名從列表中獲取全部項，如何實現(xiàn)呢？6.3.2根據(jù)標簽名獲取元素實現(xiàn)方法：可以通過getElementsByTagName()方法獲取具有相同標簽名的元素。getElementsByTagName()方法在使用時只需將標簽名作為參數(shù)傳入即可。因為具有相同標簽名的元素可能有多個，所以該方法返回的結(jié)果不是單個元素對象，而是一個集合。6.3.2根據(jù)標簽名獲取元素根據(jù)標簽名獲取元素的示例代碼如下。document.getElementsByTagName('標簽名');

先定一個小目標！掌握根據(jù)name屬性獲取元素，能夠利用相關(guān)方法完成元素的獲取6.3.3根據(jù)name屬性獲取元素開發(fā)者若要通過name屬性獲取表單元素，該如何實現(xiàn)呢？6.3.3根據(jù)name屬性獲取元素實現(xiàn)方法：可以通過document對象提供的getElementsByName()方法獲取表單元素。getElementsByName()方法在使用時只需將name屬性值作為參數(shù)傳入即可。因為name屬性的值不要求必須是唯一的，所以該方法返回的結(jié)果不是單個元素對象，而是一個集合。6.3.3根據(jù)name屬性獲取元素根據(jù)name屬性獲取元素的示例代碼如下。document.getElementsByName('name屬性值');

先定一個小目標！掌握根據(jù)類名獲取元素，能夠利用相關(guān)方法完成元素的獲取6.3.4根據(jù)類名獲取元素在頁面中，我們?yōu)樵卦O(shè)置了類名，那么能不能通過類名去獲取目標元素呢？6.3.4根據(jù)類名獲取元素6.3.4根據(jù)類名獲取元素根據(jù)類名獲取元素的示例代碼如下。document.getElementsByClassName('類名');實現(xiàn)方法：可以使用document對象提供的getElementsByClassName()方法獲取元素。getElementsByClassName()方法在使用時只需將元素類名作為參數(shù)傳入即可，該方法返回的結(jié)果是一個集合。

先定一個小目標！掌握根據(jù)CSS選擇器獲取元素，能夠利用相關(guān)方法完成元素的獲取6.3.5根據(jù)CSS選擇器獲取元素在JavaScript中可以通過CSS選擇器的語法獲取元素嗎？6.3.5根據(jù)CSS選擇器獲取元素實現(xiàn)方法：可以使用document對象新增的querySelector()和querySelectorAll()方法獲取目標元素。在使用querySelector()和querySelectorAll()方法時，只需將CSS選擇器作為參數(shù)傳入即可。前者返回指定選擇器的第一個元素對象，后者返回指定選擇器的所有元素對象集合。6.3.5根據(jù)CSS選擇器獲取元素根據(jù)選擇器獲取元素的示例代碼如下。document.querySelector('CSS選擇器');document.querySelectorAll('CSS選擇器');6.3.5根據(jù)CSS選擇器獲取元素querySelector()和querySelectorAll()方法在使用時需要注意IE瀏覽器的兼容問題，這兩個方法從IE9開始才被完整支持，IE8對選擇器的支持不完整。Tip

先定一個小目標！掌握獲取基本結(jié)構(gòu)元素，能夠完成基本結(jié)構(gòu)元素的獲取6.3.6獲取基本結(jié)構(gòu)元素在實際開發(fā)中，若想獲取HTML的基本結(jié)構(gòu)元素，如html元素、body元素等，如何獲取呢？6.3.6獲取基本結(jié)構(gòu)元素屬性說明document.documentElement獲取文檔的html元素document.body獲取文檔的body元素document.forms獲取文檔中包含所有form元素的集合document.images獲取文檔中包含所有image元素的集合6.3.6獲取基本結(jié)構(gòu)元素實現(xiàn)方法：我們可以使用document對象的相關(guān)屬性來獲取HTML的基本結(jié)構(gòu)元素。6.3.6獲取基本結(jié)構(gòu)元素在開發(fā)中，若需要獲取或設(shè)置當前文檔的標題，可以使用document對象的title屬性，該屬性的返回結(jié)果是字符串，示例代碼如下。多學一招：獲取或設(shè)置當前文檔的標題document.title6.3.6獲取基本結(jié)構(gòu)元素多學一招：獲取或設(shè)置當前文檔的標題驗證title屬性返回的結(jié)果，示例代碼如下。<head><title>Hello！</title></head><body><script>console.log(document.title);console.log(typeofdocument.title);</script></body>

6.3.6獲取基本結(jié)構(gòu)元素多學一招：獲取或設(shè)置當前文檔的標題控制臺輸出結(jié)果為“Hello!

”，返回結(jié)果的類型是一個字符串。事件基礎(chǔ)6.4

先定一個小目標！了解事件的概念，能夠說出事件的3個要素6.4.1事件概述日常生活中，我們接觸的頁面幾乎都是具有交互效果的，這些交互效果是如何實現(xiàn)的？6.4.1事件概述實現(xiàn)方法：交互效果通過事件來完成。事件對實現(xiàn)網(wǎng)頁的交互效果起著重要的作用。事件是指可以被JavaScript偵測到的行為，如鼠標單擊頁面、鼠標指針滑過某個區(qū)域等，不同行為對應(yīng)不同事件，并且每個事件都對應(yīng)著與其相關(guān)的事件驅(qū)動程序（回調(diào)函數(shù)）。事件驅(qū)動程序由開發(fā)人員編寫，用來實現(xiàn)由該事件產(chǎn)生的網(wǎng)頁交互效果。事件是一種“觸發(fā)-響應(yīng)”機制，行為產(chǎn)生后，對應(yīng)的事件就被觸發(fā)了，事件相應(yīng)的事件驅(qū)動程序就會被調(diào)用，從而使網(wǎng)頁響應(yīng)交互效果。6.4.1事件概述事件的3個要素及具體解釋如下。事件源：承受事件的元素對象。例如，在單擊按鈕的過程中，按鈕就是事件源。事件類型：使網(wǎng)頁產(chǎn)生交互效果的行為動作對應(yīng)的事件種類。例如，單擊事件的事件類型為click。事件驅(qū)動程序：事件觸發(fā)后為了實現(xiàn)相應(yīng)的網(wǎng)頁交互效果而執(zhí)行的代碼。6.4.1事件概述在開發(fā)過程中，實現(xiàn)一個交互效果的步驟首先需要確定事件源，事件源確定后就可以獲取這個元素；然后需要確定事件類型，為獲取的元素注冊該類型的事件；最后分析事件觸發(fā)后，實現(xiàn)相應(yīng)網(wǎng)頁交互效果的邏輯，編寫實現(xiàn)該邏輯的事件驅(qū)動程序。6.4.1事件概述

先定一個小目標！掌握事件的注冊，能夠為頁面中的元素注冊事件6.4.2注冊事件注冊事件又稱為綁定事件，注冊事件的兩種方式如下。6.4.2注冊事件注冊事件的兩種方式在標簽中注冊事件在JavaScript中注冊事件6.4.2注冊事件在標簽中注冊事件的示例代碼如下。<divonclick="">點我</div>在onclick屬性的值中可以編寫事件驅(qū)動程序6.4.2注冊事件在JavaScript中注冊事件的示例代碼如下。//元素對象.事件屬性=事件處理函數(shù);element.onclick=function(){};

首先通過onclick事件屬性為元素對象element注冊click事件（單擊事件），然后在事件處理函數(shù)中編寫事件驅(qū)動程序，并將事件處理函數(shù)賦值給onclick事件屬性。元素內(nèi)容操作6.5

先定一個小目標！掌握innerHTML的使用，能夠操作元素的HTML內(nèi)容6.5.1innerHTML在實際開發(fā)中，有時需要元素內(nèi)容可以根據(jù)需求發(fā)生改變。那么如何操作元素的內(nèi)容呢？6.5.1innerHTML實現(xiàn)方法：可以使用DOM中的innerHTML屬性設(shè)置或獲取元素開始標簽和結(jié)束標簽之間的HTML內(nèi)容，返回結(jié)果包含HTML標簽，并保留空格和換行。6.5.1innerHTMLinnerHTML屬性的使用示例如下。element.innerHTML='HTML內(nèi)容'; //設(shè)置內(nèi)容console.log(element.innerHTML); //獲取內(nèi)容當獲取元素得到的結(jié)果是集合時，需要先通過索引訪問集合內(nèi)部的元素對象，再通過元素對象訪問innerHTML屬性。注意

先定一個小目標！掌握innerText的使用，能夠設(shè)置或者獲取元素中的文本內(nèi)容6.5.2innerText使用DOM中的innerText屬性可以設(shè)置或獲取元素的文本內(nèi)容，獲取的時候會去除HTML標簽和多余的空格、換行，在設(shè)置的時候會進行特殊字符轉(zhuǎn)義。6.5.2innerTextinnerText屬性的示例代碼如下。element.innerText='文本內(nèi)容'; //設(shè)置內(nèi)容console.log(element.innerText); //獲取內(nèi)容6.5.2innerText相同點：都可以設(shè)置或獲取元素開始標簽和結(jié)束標簽之間的內(nèi)容。不同點：innerHTML屬性獲取的元素內(nèi)容包含HTML標簽，而innerText屬性獲取的元素內(nèi)容不包含HTML標簽。innerText屬性與innerHTML屬性的相同點和不同點如下。

先定一個小目標！掌握textContent的使用，能夠設(shè)置或獲取元素中的文本內(nèi)容6.5.3textContent6.5.3textContenttextContent屬性的示例代碼如下。element.textContent='文本內(nèi)容'; //設(shè)置內(nèi)容console.log(element.textContent); //獲取內(nèi)容使用DOM中的textContent屬性可以設(shè)置或獲取元素的文本內(nèi)容，保留空格和換行。相同點：都可以用來設(shè)置或獲取元素的文本內(nèi)容，并且返回的時候會去除HTML標簽。不同點：textContent屬性還可以設(shè)置和獲取占位隱藏元素的文本內(nèi)容。通過給元素的visibility樣式屬性設(shè)置hidden值即可實現(xiàn)占位隱藏。需要說明的是，IE8及更早版本的瀏覽器不支持textContent屬性，所以在使用時需要注意瀏覽器兼容問題。6.5.3textContenttextContent屬性和innerText屬性相同點和不同點如下。元素樣式操作6.6

先定一個小目標！掌握如何通過style屬性操作樣式，能夠通過style屬性操作頁面中元素的樣式6.6.1通過style屬性操作樣式操作元素樣式的3種方式如下。6.6.1通過style屬性操作樣式循環(huán)結(jié)構(gòu)語句通過style屬性操作樣式通過className屬性操作樣式通過classList屬性操作樣式循環(huán)語句操作元素樣式操作style屬性的示例代碼如下。element.style.樣式屬性名='樣式屬性值'; //設(shè)置樣式console.log(element.style.樣式屬性名); //獲取樣式6.6.1通過style屬性操作樣式元素對象樣式屬性名的書寫需要去掉CSS樣式名里的連字符“-”，并將連字符“-”后面的單詞首字母大寫style屬性中常用的樣式屬性名如下。名稱說明background設(shè)置或獲取元素的背景屬性backgroundColor設(shè)置或獲取元素的背景色display設(shè)置或獲取元素的顯示類型fontSize設(shè)置或獲取元素的字體大小height設(shè)置或獲取元素的高度left設(shè)置或獲取定位元素的左部位置listStyleType設(shè)置或獲取列表項標記的類型overflow設(shè)置或獲取如何處理呈現(xiàn)在元素框外面的內(nèi)容textAlign設(shè)置或獲取文本的水平對齊方式textDecoration設(shè)置或獲取文本的修飾textIndent設(shè)置或獲取文本第一行的縮進transform向元素應(yīng)用2D或3D轉(zhuǎn)換6.6.1通過style屬性操作樣式

先定一個小目標！掌握單擊按鈕改變按鈕顏色案例的開發(fā)，能夠?qū)崿F(xiàn)單擊按鈕后改變按鈕顏色的效果6.6.2【案例】單擊按鈕改變按鈕顏色案例實現(xiàn)步驟首先需要為頁面中所有的按鈕元素注冊鼠標單擊事件，然后在事件處理函數(shù)中對按鈕進行遍歷，判斷每個按鈕是否為當前觸發(fā)事件的按鈕，如果是則改變按鈕顏色，如果不是則恢復(fù)按鈕默認顏色。6.6.2【案例】單擊按鈕改變按鈕顏色6.6.2【案例】單擊按鈕改變按鈕顏色使用鼠標單擊第3個按鈕后的效果如下。

先定一個小目標！掌握如何通過className屬性操作樣式，能夠?qū)崿F(xiàn)元素樣式的設(shè)置或獲取6.6.3通過className屬性操作樣式當為元素對象設(shè)置多種樣式時，如果使用style屬性，就需要編寫多行“element.style.樣式屬性名”形式的代碼，比較煩瑣。那么有沒有簡便的方式呢？6.6.3通過className屬性操作樣式6.6.3通過className屬性操作樣式當為元素對象設(shè)置多種樣式時，可以操作元素對象的className屬性。先將元素對象的樣式寫在CSS中，利用CSS類選擇器為元素設(shè)置樣式，然后通過JavaScript操作className屬性更改元素的類名，從而更改元素的樣式。element.className='類名'; //設(shè)置類名console.log(element.className); //獲取類名操作className屬性的示例代碼如下。

先定一個小目標！掌握如何通過classList屬性操作樣式，能夠?qū)υ刂械念惷M行獲取、添加、移除、判斷操作6.6.4通過classList屬性操作樣式在開發(fā)過程中，對于元素中類的操作，我們可以使用元素對象的classList屬性。classList屬性的使用方式很靈活，可以對元素中的類名進行獲取、添加、移除、判斷等操作。6.6.4通過classList屬性操作樣式element.classList通過classList屬性獲取類名的示例代碼如下。6.6.4通過classList屬性操作樣式classList屬性返回一個對象，稱為classList對象。classList對象是一個偽數(shù)組，偽數(shù)組中的每一項對應(yīng)一個類名，可通過數(shù)組索引訪問類名。TipclassList屬性在使用時需要注意IE瀏覽器的兼容問題，該屬性從IE10版本才開始才被支持，且IE10版本中classList屬性不能對SVG（可縮放矢量圖形）元素進行操作。classList對象常用的屬性和方法如下。名稱說明length 獲取類名的數(shù)量add(class1,class2,…)為元素添加一個或多個class類名remove(class1,class2,…)移除元素的一個或多個class類名toggle(class,true|false)為元素切換class類名，第2個參數(shù)是可選參數(shù)，設(shè)為true表示添加，設(shè)為false表示移除，不設(shè)置表示有則移除，沒有則添加contains(class)判斷元素中指定的類名是否存在，返回布爾值item(index) 獲取元素中索引對應(yīng)的類名，索引從0開始6.6.4通過classList屬性操作樣式元素屬性操作6.76.7元素屬性操作在一個功能完善的頁面中，交互效果往往多種多樣，僅通過操作元素的內(nèi)容和樣式并不能滿足開發(fā)條件，我們還需要學習如何操作元素屬性。在DOM中，我們可以操作property屬性、attribute屬性和data-*屬性。

先定一個小目標！掌握如何操作property屬性，能夠操作元素的property屬性6.7.1操作property屬性6.7.1操作property屬性property不是一個屬性名，而是一個統(tǒng)稱，它是指元素在DOM中作為對象擁有的屬性，即內(nèi)置屬性。通常情況下，每個元素都具有內(nèi)置屬性。例如，img元素、input元素常用的property屬性如下。img元素：src、title屬性。input元素：disabled、checked和selected屬性。6.7.1操作property屬性

先定一個小目標！掌握如何操作attribute屬性，能夠為元素設(shè)置屬性、獲取屬性值、移除屬性6.7.2操作attribute屬性6.7.2操作attribute屬性attribute屬性也是一個統(tǒng)稱，它是指HTML標簽的屬性，在程序中對attribute屬性的操作會直接反映到HTML標簽中。attribute屬性不僅可以操作元素的內(nèi)置屬性，還可以操作元素的自定義屬性。操作attribute屬性的方式如下。設(shè)置屬性：通過元素對象的setAttribute()方法可以設(shè)置屬性。獲取屬性值：通過元素對象的getAttribute()方法可以獲取屬性值。移除屬性：通過元素對象的removeAttribute()方法可以移除屬性。6.7.2操作attribute屬性element.setAttribute('屬性','值');element.getAttribute('屬性');element.removeAttribute('屬性');

先定一個小目標！掌握Tab欄切換案例的開發(fā)，能夠?qū)崿F(xiàn)多個內(nèi)容塊間的切換6.7.3【案例】Tab欄切換Tab欄在網(wǎng)站中的使用非常普遍，它的優(yōu)勢在于可以在有限的空間內(nèi)展示多塊的內(nèi)容，用戶可以通過單擊標簽項在多個內(nèi)容塊之間進行切換。6.7.3【案例】Tab欄切換6.7.3【案例】Tab欄切換實現(xiàn)【案例】Tab欄切換的大致流程如下。編寫HTML頁面，完成Tab欄的標簽結(jié)構(gòu)和內(nèi)容區(qū)布局。通過JavaScript實現(xiàn)Tab欄的切換效果。通過JavaScript實現(xiàn)內(nèi)容區(qū)的展示效果。6.7.3【案例】Tab欄切換編寫HTML頁面Tab欄由上、下兩部分結(jié)構(gòu)組成，上半部分是Tab欄的標簽結(jié)構(gòu)，用于展示標簽項；下半部分是Tab欄的內(nèi)容區(qū)，用于展示內(nèi)容項。每個標簽項都有相對應(yīng)的內(nèi)容項，通過鼠標單擊Tab欄的標簽項可以實現(xiàn)對應(yīng)內(nèi)容項的切換。6.7.3【案例】Tab欄切換通過JavaScript實現(xiàn)Tab欄的切換效果首先需要獲取目標元素，然后通過for語句為每個元素對象注冊單擊事件，最后實現(xiàn)Tab欄的切換效果。6.7.3【案例】Tab欄切換通過JavaScript實現(xiàn)內(nèi)容區(qū)的展示效果內(nèi)容區(qū)展示的內(nèi)容隨標簽項的切換而切換，我們可以通過操作attribute屬性來完成。

先定一個小目標！掌握如何操作data-*屬性，能夠操作data-*自定義屬性6.7.4操作data-*屬性HTML5提供了一種新的自定義屬性的方式：通過data-*設(shè)置自定義屬性。這種方式是通過“data-”前綴來設(shè)置開發(fā)所需要的自定義屬性，“*”可以自行命名。6.7.4操作data-*屬性data-*屬性的操作方式如下。設(shè)置data-*屬性獲取data-*屬性值6.7.4操作data-*屬性在HTML中，可以直接在標簽中為元素設(shè)置data-*屬性，示例代碼如下。<divdata-index="2"></div>“data-”是屬性前綴開發(fā)者自定義的屬性名在JavaScript中，設(shè)置data-*屬性的兩種方式如下。第1種方式是通過“element.dataset.屬性名='屬性值'”設(shè)置；第2種方式是通過setAttribute()方法設(shè)置。6.7.4操作data-*屬性第1種方式存在IE瀏覽器的兼容問題，這種方式從IE11版本才開始才被支持。Tip6.7.4操作data-*屬性下面演示設(shè)置data-*屬性的兩種方式，示例代碼如下。<body><div></div><script>vardiv=document.querySelector('div');div.dataset.index='2'; //演示第1種方式

div.setAttribute('data-name','andy'); //演示第2種方式

</script></body>設(shè)置自定義屬性“data-index”，屬性值為“2”設(shè)置自定義屬性“data-name”，屬性值為“andy”在瀏覽器中查看div元素對應(yīng)的標簽，結(jié)果如下。6.7.4操作data-*屬性<divdata-index="2"data-name="andy"></div