原生JS
獲取
- document.getElementBy..("id") 獲取element對象
- document.querySelectorAll(".class") 和 document.querySelector("#id") 獲取element對象(IE>8)
修改內容
- element.innerHTML 返回或修改標籤內所有內容,包括html標籤,輸出格式帶縮進和換行
- element.innerText 返回或修改文本內容,不包括html標籤,輸出格式不帶縮進,自動換行,不輸出隱藏標籤的內容,不輸出style標籤的內容
- element.textContent 返回或修改文本內容,不包括html標籤,輸出格式帶縮進和換行,會輸出display:none標籤的內容,會輸出style標籤的內容
修改屬性
- element.attribute 獲取所有的屬性,返回的是一個NamedNodeMap對象
- element.getAttribute() 返回指定的屬性值
- element.setAttribute() 設定指定的屬性值
修改CSS
- element.style.fontSize 由於font-size並非JavaScript有效的命名,需要改寫成駝峯式
修改類
- element.classList.add() 添加class
- element.classList.remove() 移除class
操作DOM(操作的是Node節點node)
DOM查找
- element.children 獲取當前元素的所有子元素(element)
- element.childNodes 獲取當前節點的所有子節點
- element.firstChild 獲取當前節點的第一個子節點
- element.lastChild 獲取當前節點的最後一個子節點
- element.parentNode 獲取當前節點的父節點
- element.previousSibling 獲取當前節點的前一個同級節點
- element.nextSibling 獲取當前節點的後一個同級節點
DOM創建
- document.createElement(Tag) 創建一個html標記對象
- document.createTextNode('text') 創建一個文本節點
DOM插入
- element.appendChild() 向元素中添加節點
- element.insertBefore() 在指定的已有的子節點之前插入新節點
DOM刪除
- element.removeChild() 從元素中移除子節點
DOM替換
- element.replaceChild() 替換元素中的子節點
DOM克隆
- element.cloneNode(true|false) 克隆選中的節點,並返回副本,括號中的參數爲是否要克隆所有後代
JQuery
獲取
- $(selector)獲取的是一個包含element元素的數組 ,$("#id")[0] === document.getElementById("id"),可以通過這個方式來調用原生js的方法
修改內容
- $(selector).html()
- $(selector).text()
- $(selector).val()
修改屬性
- $(selector).attr()
修改CSS
- $(selector).css()
修改類
- $(selector).addClass()
- $(selector).removeClass()
操作DOM(操作的是元素節點element)
DOM查找
- $(selector).parent() 方法返回被選元素的直接父元素(1個）
- $(selector).parents() 方法返回被選元素的所有祖先元素。(1個或多個）
- $(selector).prev() 方法返回被選元素的前一個兄弟元素(1個）。相同父元素的元素。
- $(selector).next() 方法返回被選元素的後一個兄弟元素(1個）。相同父元素的元素。
- $(selector).siblings() 方法返回被選元素的所有兄弟元素(1個或多個）。相同父元素的元素。
- $(selector).find() 方法返回被選元素的所有後代元素。後代是子、孫、曾孫、依此類推。
- $(selector).children() 方法返回被選元素的所有直接子元素
DOM創建
- var oDiv=$("<div>我是DOM</div>")
DOM插入
-
$(selector).append() 向該元素內部增加內容（末尾）父 添加 子
-
$(selector).appendTo() 將要增加的內容增加到元素（末尾） 子 給 父
-
$(selector).after() 方法在被選元素之後插入內容。(兄弟)
-
$(selector).before() 方法在被選元素之前插入內容。(兄弟)
DOM刪除
-
$(selector).remove()刪除被選元素（刪除自身及其子元素）
-
$(selector).empty(）清空子該元素（只刪除所有子節點）
DOM替換
- $(selector).replaceWith() 將所選擇的元素(select)替換成括號中的元素
-
$(selector).replaceAll() 用括號中的元素替換成所選擇的元素(select)
DOM克隆
- $(selector).clone(true|false) 生成被選元素的副本,包含子節點,文本和屬性,括號中的參數爲是否要複製時間處理程序