整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
DOM（Document Object Model 文檔對象模型）是W3C的標準，是所有瀏覽器公共遵守的標準。
DOM的設計是以對象管理組織（OMG）的規約為基礎的，因此可以用于任何編程語言。最初人們把它認為是一種讓JavaScript在瀏覽器間可移植的方法，不過DOM的應用已經遠遠超出這個范圍。
DOM定義了訪問 HTML 和 XML 文檔的標準，是HTML和XML的應用程序接口（API），它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。Dom技術使得用戶頁面可以動態地變化，如可以動態地顯示或隱藏一個元素，改變它們的屬性，增加一個元素等，Dom技術使得頁面的交互性大大地增強。
當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。HTML DOM 模型被構造為對象的樹，這種結構被稱為節點樹：
通過 HTML DOM，樹中的所有節點均可通過 JavaScript 進行訪問。所有 HTML 元素（節點）均可被修改，也可以創建或刪除節點。
節點父、子和同胞
節點樹中的節點彼此擁有層級關系。
父（parent）、子（child）和同胞（sibling）等術語用于描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。
在節點樹中，頂端節點被稱為根（root）
每個節點都有父節點、除了根（它沒有父節點）
一個節點可擁有任意數量的子
同胞是擁有相同父節點的節點
下面的圖片展示了節點樹的一部分，以及節點之間的關系：
編程接口
可通過 JavaScript （以及其他編程語言）對 HTML DOM 進行訪問。所有 HTML 元素被定義為對象，而編程接口則是對象方法和對象屬性。
當瀏覽器載入 HTML 文檔, 它就會成為 document 對象。document 對象是HTML文檔的根節點與所有其他節點（元素節點，文本節點，屬性節點, 注釋節點）。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。提示：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。
document.activeElement 屬性返回文檔中當前獲得焦點的元素
document.addEventListener() 函數用于向文檔添加事件句柄
document.adoptNode(node) 函數從另外一個文檔返回 adapded 節點到當前文檔
document.anchors 屬性集合返回了當前頁面的所有超級鏈接數組
document.applets返回對文檔中所有 Applet 對象的引用
document.baseURI 屬性返回 HTML 文檔的基礎URI
document.body 屬性返回文檔的body元素
document.close()用于關閉瀏覽器窗口
document.cookie 屬性返回當前文檔所有 鍵/值 對的所有 cookies
document.createAttribute() 函數用于創建一個指定名稱的屬性，并返回Attr 對象屬性
document.createComment() 函數可創建注釋節點
document.createDocumentFragment() 函數創建了一虛擬的節點對象，節點對象包含所有屬性和方法
document.createElement() 函數通過指定名稱創建一個元素
document.createTextNode() 函數可創建文本節點
document.doctype 屬性可返回與文檔相關的文檔類型聲明（Document Type Declaration）
document.documentElement 屬性以一個元素對象返回一個文檔的文檔元素
document.documentMode 屬性返回瀏覽器渲染文檔的模式
document.documentURI 屬性可設置或返回文檔的位置
document.domain 屬性可返回下載當前文檔的服務器域
document.domConfig 屬性 返回normalizeDocument()被調用時所使用的配置
document.embeds 集合 返回文檔中所有嵌入的內容（embed）集合
document.forms 集合返回當前頁面所有表單的數組集合
document. getElementsByClassName() 函數返回文檔中所有指定類名的元素集合，作為 NodeList 對象
document.getElementById() 函數可返回對擁有指定 ID 的第一個對象的引用
document.getElementsByName() 函數可返回帶有指定名稱的對象的集合
document.getElementsByTagName() 函數可返回帶有指定標簽名的對象的集合
document.images 集合返回當前文檔中所有圖片的數組
document.implementation 屬性可返回處理該文檔的 DOMImplementation 對象
document.importNode() 函數把一個節點從另一個文檔復制到該文檔以便應用
document.inputEncoding 屬性可返回文檔的編碼（在解析時）
document.lastModified 屬性可返回文檔最后被修改的日期和時間
document.links 集合返回當期文檔所有鏈接的數組
document.normalize() 函數合并相鄰的文本節點并刪除空的文本節點
document.normalizeDocument() 函數可以移除空文本節點 , 并合并相鄰節點
document.open() 函數打開一個輸出流來收集 document.write() 或 document.writeln() 方法輸出的內容
document.querySelector() 函數返回文檔中匹配指定 CSS 選擇器的一個元素
document.querySelectorAll() 函數 document.querySelectorAll() 是 HTML5中引入的新方法，返回文檔中匹配的CSS選擇器的所有元素節點列表
document.readyState 屬性返回當前文檔的狀態（載入中……）
document.referrer 屬性返回載入當前文檔的來源文檔的URL
document.removeEventListener() 函數用于移除由 document.addEventListener() 方法添加的事件句柄
document.scripts 集合返回頁面中所有腳本的集合
document.strictErrorChecking 屬性可設置或返回是否強制進行錯誤檢查（error-checking）
document.title 屬性可返回當前文檔的標題（ HTML title 元素中的文本）
document.URL 屬性可返回當前文檔的 URL
document.write() 函數可向文檔寫入 HTML 表達式或 JavaScript 代碼
document.writeln() 函數與 write() 方法作用相同，外加可在每個表達式后寫一個換行符
在 HTML DOM 中, 元素對象代表著一個 HTML 元素。元素對象 的 子節點可以是, 可以是元素節點，文本節點，注釋節點。NodeList 對象 代表了節點列表，類似于 HTML元素的子節點集合。所有主流瀏覽器都支持元素對象和NodeList 對象。
element.accessKey 屬性可設置或返回訪問單選按鈕的快捷鍵
element.addEventListener() 函數用于向指定元素添加事件句柄
element.appendChild() 函數http://techbrood.com/jsref?p=met-node-appendchild
element.attributes 屬性返回指定節點屬性的集合
element.childNodes 屬性返回包含被選節點的子節點的 NodeList
element.classlist 屬性返回元素的類名，作為 DOMTokenList 對象
element.className 屬性設置或返回元素的 class 屬性
element.clientHeight 屬性在頁面上返回內容的可視高度（不包括邊框，邊距或滾動條）
element.clientWidth 屬性在頁面上返回內容的可視寬度（不包括邊框，邊距或滾動條）
element.cloneNode() 函數可創建指定的節點的精確拷貝，拷貝所有屬性和值，該方法將復制并返回調用它的節點的副本。如果傳遞給它的參數是 true，它還將遞歸復制當前節點的所有子孫節點。否則，它只復制當前節點。
element.compareDocumentPosition() 函數按照文檔順序，比較當前節點與指定節點的文檔位置
element.contentEditable 屬性用于設置或返回元素的內容是否可編輯
element.dir 屬性設置或返回元素的文字方向
element.firstChild 屬性返回被選節點的第一個子節點，如果選定的節點沒有子節點則該屬性返回NULL
element.focus() 函數用于為元素設置焦點（如果可以設置）
element.getAttribute() 函數通過名稱獲取屬性的值
element.getAttributeNode() 函數從當前元素中通過名稱獲取屬性節點
element.getElementsByTagName() 函數可返回帶有指定標簽名的對象的集合
element. getElementsByClassName() 函數返回文檔中所有指定類名的元素集合，作為 NodeList 對象
element.getFeature() 函數返回指定特征的執行APIs對象
element.getUserData() 函數返回一個元素中關聯鍵值的對象
element.hasAttribute() 函數通過名稱獲取屬性的值
element.hasAttributes() 函數如果某節點有任何屬性時返回 true，否則返回 false
element.hasChildNodes() 函數可在某節點用于任何子節點時返回 true，否則返回 fals
element.hasfocus() 函數返回布爾值，用于檢測文檔(或文檔內的任一元素)是否獲取焦點
element.id 屬性設置或者發回元素的id
element.innerHTML 屬性設置或返回表格行的開始和結束標簽之間的 HTML
element.insertBefore() 函數可在已有的子節點前插入一個新的子節點
element.isContentEditable 屬性返回元素的內容是否可編輯
element.isDefaultNamespace() 函數如果指定的命名空間是默認的 ，isDefaultNamespace() 方法返回 true，否則返回 false
element.isEqualNode() 函數用于檢查兩個節點是否相等
element.isSameNode() 函數可在某個節點與給定的節點是同一個節點時返回 true，否則返回 false
element.isSupported() 函數用于判斷當前節點是否支持某個特性
element.lang 屬性設置或返回元素的語言
element.lastChild 屬性可返回文檔的最后一個子節點
element.namespaceURI 屬性為被選節點返回命名空間的 URI
element.nextSibling 屬性可返回某個元素之后緊跟的元素（處于同一樹層級中）
element.nodeName 屬性可依據節點的類型返回其名稱
element.nodeType 屬性屬性返回節點類型
element.nodeValue 屬性根據節點的類型設置或返回節點的值
element.normalize() 函數合并相鄰的文本節點并刪除空的文本節點
element.offsetHeight 屬性返回任何一個元素的高度包括邊框和填充，但不是邊距
element.offsetWidth 屬性返回元素的寬度，包括邊框和填充，但不是邊距
element.offsetLeft 屬性返回當前元素的相對水平偏移位置的偏移容器
element.offsetParent 屬性返回元素的偏移容器
element.offsetTop 屬性返回當前元素的相對垂直偏移位置的偏移容器
element.ownerDocument 屬性可返回某元素的根元素
element.parentNode 屬性可返回某節點的父節點
element.previousSibling 屬性可返回某節點之前緊跟的節點（處于同一樹層級）
element.querySelector() 函數返回匹配指定 CSS 選擇器元素的第一個子元素
document.querySelectorAll() 函數返回匹配指定 CSS 選擇器元素的所有子元素節點列表
element.removeAttribute() 函數刪除指定的屬性
element.removeAttributeNode() 函數從元素中刪除指定的屬性節點
element.removeChild() 函數可從子節點列表中刪除某個節點
element.removeEventListener() 函數用于移除由 addEventListener() 方法添加的事件句柄
element.replaceChild() 函數可將某個子節點替換為另一個，新節點可以是文本中已存在的，或者是你新創建的
element.scrollHeight 屬性返回整個元素的高度（包括帶滾動條的隱蔽的地方）
element.scrollLeft 屬性返回當前視圖中的實際元素的左邊緣和左邊緣之間的距離
element.scrollTop 屬性返回當前視圖中的實際元素的頂部邊緣和頂部邊緣之間的距離
element.scrollWidth 屬性返回元素的整個寬度（包括帶滾動條的隱蔽的地方）
element.setAttribute() 函數創建或改變某個新屬性，如果指定屬性已經存在,則只設置該值
element.setAttributeNode() 函數用于添加新的屬性節點
element.setIdAttribute() 函數
element.setIdAttributeNode() 函數
element.setUserData() 函數在元素中為指定鍵值關聯對象
element.style 屬性設置或返回元素的樣式屬性
element.tabIndex 屬性可設置或返回單選按鈕的 tab 鍵控制次序
element.tagName 屬性返回元素的標簽名
element.textContent 屬性設置或者返回指定節點的文本內容
element.title 屬性設置或返回元素的標題
element.toString() 函數 一個元素轉換成字符串
nodelist.item() 函數返回一個節點列表中指定索引的節點
nodelist.length 屬性返回節點集合的數目
在 HTML DOM 中, Attr 對象 代表一個 HTML 屬性。所有主流瀏覽器都支持 Attr 對象和 NamedNodeMap 對象 (在HTML DOM中, NamedNodeMap對象表示一個無順序的節點列表, 我們可通過節點名稱來訪問 NamedNodeMap 中的節點)
attr.isId 屬性如果屬性是 ID 類型（例如，包含了其所屬的元素的標識符），則 isId 屬性返回 true，否則返回 false
name 屬性返回屬性名稱
value 屬性用于設置或者返回屬性的值。
specified 屬性如果在文檔中設置了屬性值，則specified屬性返回 true，如果是 DTD/Schema 中的默認值，則返回 false
length 屬性可返回集合中節點的選項數目
getNamedItem() 函數返回節點列表中指定屬性名的值
item() 函數可返回節點列表中處于指定索引號的節點
removeNamedItem() 函數可刪除指定的節點
setNamedItem() 函數用于添加指定節點。如果節點已經存在，它將被替換，并返回替換節點的值，否則將返回 null。
事件允許Javascript在HTML文檔元素中注冊不同事件處理程序。事件通常與函數結合使用，函數不會在事件發生前被執行！
鼠標事件
onclick事件會在元素被點擊時發生
oncontextmenu事件在元素中用戶右擊鼠標時觸發并打開上下文菜單
ondblclick事件會在對象被雙擊時發生
onmousedown事件會在鼠標按鍵被按下時發生。
onmouseenter事件在鼠標指針移動到元素上時觸發
onmouseleave事件在鼠標移除元素時觸發
onmousemove事件會在鼠標指針移出指定的對象時發生
onmouseover事件會在鼠標指針移動到指定的元素上時發生
onmouseout事件會在鼠標指針移出指定的對象時發生
onmouseup事件會在鼠標按鍵被松開時發生
鍵盤事件
onkeydown事件會在用戶按下一個鍵盤按鍵時發生
onkeypress事件會在鍵盤按鍵被按下并釋放一個鍵時發生
onkeyup事件會在鍵盤按鍵被松開時發生
框架/對象（Frame/Object）事件
onabort事件在用戶中止加載 或提交元素時觸發
onbeforeunload事件在即將離開當前頁面（刷新或關閉）時觸發
onerror事件在加載外部文件（文檔或圖像）發生錯誤時觸發
onhashchange事件在當前 URL 的錨部分(以 '#' 號為開始) 發生改變時觸發
onload事件會在頁面或圖像加載完成后立即發生
onpageshow事件在用戶瀏覽網頁時觸發
onpagehide事件在用戶離開網頁時觸發
onresize事件會在窗口或框架被調整大小時發生
onscroll事件在元素滾動條在滾動時觸發
onunload事件在用戶退出頁面時發生
表單事件
onblur事件會在對象失去焦點時發生
onchange事件會在域的內容改變時發生
onfocus事件在對象獲得焦點時發生
onfocusin事件在一個元素即將獲得焦點時觸發
onfocusout事件在元素即將失去焦點時觸發
oninput事件在用戶輸入時觸發
onreset事件在表單被重置后觸發
onsearch事件在用戶按下"ENTER（回車）" 按鍵或點擊 type="search" 的 元素的 "x(搜索)" 按鈕時觸發
onselect事件會在文本框中的文本被選中時發生
onsubmit事件在表單提交時觸發
剪貼板事件
oncopy事件在用戶拷貝元素上的內容時觸發
oncut事件在用戶剪切元素的內容時觸發
onpaste事件在用戶向元素中粘貼文本時觸發
打印事件
onafterprint事件在頁面打印后觸發，或者打印對話框已經關閉
onbeforeprint事件在頁面即將打印時觸發 (在打印窗口出現前
拖動事件
ondrag事件在元素或者選取的文本被拖動時觸發
ondragend事件在用戶完成元素或首選文本的拖動時觸發
ondragenter事件在拖動的元素或選擇的文本進入到有效的放置目標時觸發
ondragleave事件在可拖動的元素或選取的文本移出放置目標時執觸發
ondragover事件在可拖動元素或選取的文本正在拖動到放置目標時觸發
ondragstart事件在用戶開始拖動元素或選擇的文本時觸發
ondrop事件在可拖動元素或選取的文本放置在目標區域時觸發
多媒體（Media）事件
onabort事件在視頻/音頻（audio/video）終止加載時觸
oncanplay事件在用戶可以開始播放視頻/音頻（audio/video）時觸發。
oncanplaythrough事件在視頻/音頻（audio/video）可以正常播放且無需停頓和緩沖時觸發
ondurationchange事件在視頻/音頻（audio/video）的時長發生變化時觸發
onemptied當期播放列表為空時觸發
onended事件在視頻/音頻（audio/video）播放結束時觸發
onerror事件在視頻/音頻（audio/video）數據加載期間發生錯誤時觸發
onloadeddata事件在當前幀的數據加載完成且還沒有足夠的數據播放視頻/音頻（audio/video）的下一幀時觸發
onloadedmetadata事件在指定視頻/音頻（audio/video）的元數據加載后觸發
onloadstart事件在瀏覽器開始尋找指定視頻/音頻（audio/video）觸發
onpause事件在視頻/音頻（audio/video）暫停時觸發
onplay事件在視頻/音頻（audio/video）開始播放時觸發
onplaying事件在視頻/音頻（audio/video）暫停或者在緩沖后準備重新開始播放時觸發
onprogress事件在瀏覽器下載指定的視頻/音頻（audio/video）時觸發
onratechange事件在視頻/音頻（audio/video）的播放速度發生改變時觸發
onseeked事件在用戶重新定位視頻/音頻（audio/video）的播放位置后觸發
onseeking事件在用戶開始重新定位視頻/音頻（audio/video）時觸發
onstalled事件在瀏覽器獲取媒體數據，但媒體數據不可用時觸發
onsuspend事件在瀏覽器讀取媒體數據中止時觸發
ontimeupdate事件在視頻/音頻（audio/video）當前的播放位置發送改變時觸發
onvolumechangehttp://techbrood.com/jsref?p=event-onvolumechange
onwaiting事件在視頻由于要播放下一幀而需要緩沖時觸發
動畫事件
animationend事件在 CSS 動畫完成后觸發
animationiteration事件在 CSS 動畫重新播放時觸發
animationstart事件在 CSS 動畫開始播放時觸發
過渡事件
transitionend事件在 CSS 完成過渡后觸發
其他事件
onmessage該事件通過或者從對象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時觸發
ononline事件在瀏覽器開始在線工作時觸發
onoffline事件在瀏覽器離線工作時觸發
onpopstate該事件在窗口的瀏覽歷史（history 對象）發生改變時觸發
onshow事件當 <menu> 元素在上下文菜單顯示時觸發
onstorage該事件在 Web Storage(HTML 5 Web 存儲)更新時觸發
ontoggle事件在用戶打開或關閉 &lgt;details> 元素時觸發
onwheel事件在鼠標滾輪在元素上下滾動時觸發
BOM（Browser Object Model）瀏覽器對象模型，它提供了一組用于操作瀏覽器窗口和瀏覽器本身的對象。通過BOM我們可以使用JavaScript獲取和修改瀏覽器的屬性和狀態，例如修改URL、打開新窗口、獲取用戶的瀏覽器信息等。
DOM（Document Object Model）DOM是指文檔對象模型，它提供了一種表示和操作HTML、XML文檔的方式。DOM將文檔解析為一個由節點和對象（包括元素、屬性、文本等）組成的結構，通過DOM，我們可以使用JavaScript來操作這些節點和對象，實現對文檔的增刪改查操作。
window對象是BOM（Browser Object Model）中的頂層對象，表示瀏覽器窗口或標簽頁。它包含了一系列屬性和方法，可以用來操作和控制瀏覽器窗口。
一些常用的window對象屬性和方法包括：
window.innerWidth / window.innerHeight：獲取瀏覽器窗口的內部寬度和高度（不包含瀏覽器工具欄和滾動條）。
window.outerWidth / window.outerHeight：獲取瀏覽器窗口的外部寬度和高度（包含瀏覽器工具欄和滾動條）。
window.location：獲取或設置當前頁面的URL信息，包括協議、主機、路徑、查詢參數等。
window.open(url, name, features)：打開一個新的瀏覽器窗口或標簽頁，并加載指定的URL。
window.close()：關閉當前的瀏覽器窗口或標簽頁。
window.alert(message)：在瀏覽器中彈出一個警告框，顯示指定的消息。
window.confirm(message)：在瀏覽器中彈出一個確認框，詢問用戶是否確定。
window.prompt(message, default)：在瀏覽器中彈出一個提示框，詢問用戶輸入信息。
window.scrollTo(x, y)：將頁面滾動到指定的位置。window.open('url','','height=800px,width=800px,top=400px,left=400px')
#用于新建窗口和控制打開窗口的位置
window.navigator對象
window.navigator.userAgent #用來標識當前是否是一個瀏覽器
如果是window的子對象，那么window可以省略不寫
window.history.back() #回退到上一頁
window.history.forward() #前進到下一頁window.location
window.location.href
#獲取當前頁面的url。也可以給其賦值一個url。賦值的話會跳轉到那個url頁面。
window.location.reload() #刷新頁面1、警告框
alert('string...')
2、確認框
confirm('string...')
3、提示框
prompt('string...','這里是個input框可以添加默認值')
1、過一段時間之后觸發（一次）
let t = setTimeout（function，3000）
//單位為毫秒，3秒后自動執行function函數
clearTimeout(t，9000) //取消定時任務,9000毫秒后取消
2、每隔一段時間后觸發一次（循環）
setInterval（function）
//單位為毫秒，每3秒后自動執行function函數
clearInterval（function） //清循環的除定時任務
DOM操作操作標簽樣式 統一先用style起手
直接查找（必要掌握）：
1、id查找：
document.getElementById('d1')
2、類查找：
document.getElementsByClassName（‘c1’）
3、標簽查找：
document.getElementsByTagName（‘div’）
三種查找方式的返回值是不一樣的，需要判斷返回的是對象還是容器類型，來做下一步操作。
當你用變量名指代標簽對象的時候，一般情況下都推薦你書寫成xxxEle
間接查找（熟悉）：
pEle.parentElement #查找我的父標簽
divEle.children #查找子標簽查找父標簽和子標簽示例
divEle.firstElementChild #拿第一個子標簽
divEle.lastElementChild #拿最后一個子標簽
divEle.nextElementSibling #拿下一個同級別的標簽
divEle.previousElementSibling #拿上一個同級別的標簽1、通過DOM操作動態的創建img標簽，并且給標簽加屬性，最后將標簽添加到文本中。
2、創建a標簽，設置屬性，設置文本，添加到標簽內部。添加到標簽內部，指定標簽的上面。
額外補充：
innertext與innerHTML的對比
節點操作2：
class操作
設置標簽內屬性
達到某個事先設定的條件，自動觸發的動作。就是事件。
綁定事件的兩種方式
onclick：等待xx加載完畢
s一個非常重要的作用就是對dom進行操作，所謂的dom，可以理解為html代碼里的一個個節點。比如，body標簽元素就是一個dom。本文對js的dom操作進行一些總結。
按照慣例，先上一個剛寫好的小例子，代碼在最后給出：
現在，來看看js對dom的一些操作吧。
首先，給出一個html模板，接下來開始用js來做一些有趣的事情吧，css樣式的繪制就不細說了，先上代碼：
css
*{margin: 0;padding: 0;}
.parent {
width: 305px;
height: 302px;
background: #d7e6ea;
margin: 100px auto;
}
.parent .child {
width: 80px;
height: 80px;
background: deepskyblue;
float: left;
margin-top: 10px;
margin-left: 9px;
margin-right: 12px;
margin-bottom: 12px;
box-shadow: 3px -3px 2px #9898c7;
text-align: center;
line-height: 80px;
font-family: "微軟雅黑";
font-size: 28px;
text-shadow: 2px 2px 2px yellowgreen;
}
html
<body> <div class='parent'> <div class='child'>1</div> <div class='child'>2</div> <div class='child'>3</div> <div class='child'>4</div> <div class='child'>5</div> <div class='child'>6</div> <div class='child'>7</div> <div class='child'>8</div> <div class='child'>9</div> </div> </body>
效果圖
從代碼中，我們可以看到，body是一個大節點，里面套了一個class屬性為parent的div盒子，然后我們又在這個盒子里面放了9個小盒子。
1.最簡單的dom方法封裝
在本系列中，假設我們不考慮用jQuery。
現在給第三個盒子添加一個id。
<div id='targetBox' class='child'>3</div>
如何拿到這個盒子呢？
很顯然，最先想到的肯定是document.getElementById() 方法，于是就有了這樣的代碼。
var box = document.getElementById('targetBox');
box.style.background = '#FEAF51';
效果：
當然，我們很多時候都不希望每次都把document.getElementById（id）給寫一遍，那么，是不是可以將這一個過程封裝起來呢？
于是，自然而然的，我們會這么寫：
//獲取JavaScript的dom對象
function dom(id){
return document.getElementById(id);
};
var box = dom('targetBox');
box.style.background = '#FEAF51';
完美運行，我們知道，在jQuery中，是這樣的：
var box = $('#targetBox');
那么，為了讓代碼更加山寨，不妨將dom方法稍微改進一下嘞！
//獲取JavaScript的dom對象
function dom(id){
if(id.toString().indexOf('#') != -1) {
id = id.replace('#','');
}
return document.getElementById(id);
};
var box = dom('#targetBox');
box.style.background = '#FEAF51';
2.如何獲取dom元素在父盒子中的位置？
剛才，我們已經獲得了編號為3的div盒子，要得到它在父盒子的角標位置，首先肯定要拿到它的父盒子對象吧。
像這樣：
var box = dom('#targetBox');
var parent = box.parentElement;
parent打印出來是這樣的：
看來很順利呢，接下來因為要知道目標元素在父盒子的位置，則需要拿到父盒子所有的孩子節點。
像這樣：
var children = parent.children;
打印結果：
接下來就要遍歷這些孩子節點啦，children 的數據類型是object。
然而，在js中我們可以遍歷數組，卻無法直接遍歷object，咋辦呢？
原來，這是一個特殊的object，因為它有一個length屬性。有length屬性的object，可以通過以下方式轉換成數組（注：當然，這邊也可以直接獲取獲取object中的length，然后來遍歷。）：
Array.prototype.slice.call(object);
舉個例子：
var obj ={length:2,0:'first',1:'second'};
objArr = Array.prototype.slice.call(obj);
alert(objArr);
結果：
注1： length是幾個，就轉換幾個，如果你length寫1，那么只彈出first。
注2： key必須為數字，而且與數組的角標是對應的。
這里不深究call的的意思，我會在以后重新寫這方面的內容。
回到正題，現在可以拿到數組形式的children了！
var children = Array.prototype.slice.call(parent.children);
開始遍歷：
for(var i = 0,len = children.length;i < len;i++){
if(children[i] == box){
alert(i);
}
}
結果：
彈出來下標是2，因為數組下標的起始值是從0開始的。
上面的循環結構還欠缺了一個東西，就是一旦找到box之后，因為及時退出循環才是。像這樣：
for(var i = 0,len = children.length;i < len;i++){
if(children[i] == box){
alert(i);
break;
}
}
這樣便可以一定程度地提高性能。順便附上forEach的寫法：
children.forEach(function(child,index){
if(child == box){
alert(index);
return false;
}
});
這樣也可以，最后，將這些內容封裝成方法，就采用forEach的方式吧！
//查找當前dom元素在父盒子中的位置
function getIndex(dom){
var index = -1;
var domArr = Array.prototype.slice.call(dom.parentElement.children);
domArr.forEach(function(obj,i){
if(obj==dom){
index = i;
return false;
}
});
return index;
};
我學習js的路線就是如此，先想盡辦法把功能實現了，然后才開始封裝成方法。封裝的好處不言而喻，沒有人喜歡每次用到這個功能的時候，就去把實現代碼拷貝一份吧。
3.如何獲取parent下面指定class的元素列表？
parent盒子下面有9個孩子節點，我們能否通過一個什么辦法獲取到這9個孩子節點呢？顯然，這些孩子節點都有一個共同的className，那么我們可以通過這個className來獲取。
IE9 + 已經可以通過下面的方式來實現了：
var children = parent.getElementsByClassName('child');
效果：
IE678還是不支持的，那么，如果讓我們自己來封裝一個方法，又該如何呢？
這里提供一種思路：
1.用getElementsByTagName獲取parent元素下所有的節點。
2.遍歷這些節點，比較className，如果相同，就用一個數組裝起來。
3.返回這個數組。
上代碼：
/*通過className獲取dom元素進行過濾*/
function getClass(pid,sClass){
var aEle = dom(pid).getElementsByTagName('*');
var arrs = [];
for(var i=0;i<aEle.length;i++){
if(aEle[i].className.indexOf(sClass)!=-1){
arrs.push(aEle[i]);
}
}
return arrs;
}
最后，附上最開始小例子的源碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
body {
background: url(https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/skin/12.jpg?2) no-repeat;
background-size: 100% 128%;
overflow: hidden;
}
.content {
height: 600px;
width: 305px;
margin: 100px auto;
position: relative;
border-top:8px solid #ccc;
border-right:10px solid #ccc;
}
.content .screen {
height: 298px;
width: 305px;
background: #333;
position: absolute;
}
.content .screen .icon {
width: 78px;
height: 78px;
display: inline-block;
background: url(android.png) no-repeat;
background-size: 100% 100%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -39px;
margin-left: -39px;
}
.parent {
width: 305px;
height: 302px;
background: #d7e6ea;
position: absolute;
bottom: 0px;
}
.parent .child {
width: 80px;
height: 80px;
background: #eee;
float: left;
margin-top: 10px;
margin-left: 9px;
margin-right: 12px;
margin-bottom: 12px;
box-shadow: 3px -3px 2px #9898c7;
text-align: center;
line-height: 80px;
font-family: "微軟雅黑";
font-size: 28px;
text-shadow: 2px 2px 2px yellowgreen;
}
.parent .child:hover {
cursor: pointer;
background: linear-gradient(#ccc,#666);
}
.putIn {
position: absolute;
width:100%;
height:60px;
line-height: 60px;
color: #fff;
bottom:0;
right: 0;/*為了讓padding起作用*/
text-align:right;
font-size: 40px;
overflow: hidden;
padding-right: 8px;
padding-bottom: 8px;
}
</style>
</head>
<body>
<div class="content">
<div class="screen">
<i class="icon"></i>
<span id="putIn" class="putIn"></span>
</div>
<div class='parent'>
<div class='child'>1</div>
<div class='child'>2</div>
<div id='targetBox' class='child'>3</div>
<div class='child'>4</div>
<div class='child'>5</div>
<div class='child'>6</div>
<div class='child'>7</div>
<div class='child'>8</div>
<div class='child'>9</div>
</div>
</div>
</body>
<script>
//獲取JavaScript的dom對象
function dom(id){
if(id.toString().indexOf('#') != -1) {
id = id.replace('#','');
}
return document.getElementById(id);
};
var buttons = document.getElementsByClassName('child');
var putIn = dom('#putIn');
for(var i = 0,len = buttons.length;i < len;i++){
buttons[i].onclick = function(){
var num = this.innerHTML;
if(putIn.innerText.length < 13 )
putIn.innerText = putIn.innerText + num;
}
}
</script>
</html>
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
