1. 程式人生 > >JavaScript常用DOM操作方法和函數

JavaScript常用DOM操作方法和函數

children 否則 script 調用 font 倒數 arr valueof AS

查找節點
ocument.querySelector(selectors) //接受一個CSS選擇器作為參數,返回第一個匹配該選擇器的元素節點。
document.querySelectorAll(selectors) //接受一個CSS選擇器作為參數,返回所有匹配該選擇器的元素節點。
document.getElementsByTagName(tagName) //返回所有指定HTML標簽的元素
document.getElementsByClassName(className) //返回包括了所有class名字符合指定條件的元素
document.getElementById(id) //返回匹配指定id屬性的元素節點。


document.getElementsByName(name) //用於選擇擁有name屬性的HTML元素(比如<form>、<radio>、<img>、<frame>、<embed>和
<object>等)

生成節點
document.createElement(tagName) //用來生成HTML元素節點。
document.createTextNode(text) //用來生成文本節點
document.createAttribute(name) //生成一個新的屬性對象節點,並返回它。
document.createDocumentFragment() //生成一個DocumentFragment對象


Element節點的屬性
Element.attributes //返回當前元素節點的所有屬性節點
Element.id //返回指定元素的id屬性,可讀寫
Element.tagName //返回指定元素的大寫標簽名
Element.innerHTML //返回該元素包含的HTML代碼,可讀寫
Element.outerHTML //返回指定元素節點的所有HTML代碼,包括它自身和包含的的所有子元素,可讀寫
Element.className //返回當前元素的class屬性,可讀寫
Element.classList //返回當前元素節點的所有class集合
Element.dataset //返回元素節點中所有的data-*屬性。


Element.clientHeight //返回元素節點可見部分的高度
Element.clientWidth //返回元素節點可見部分的寬度
Element.clientLeft //返回元素節點左邊框的寬度
Element.clientTop //返回元素節點頂部邊框的寬度
Element.scrollHeight //返回元素節點的總高度
Element.scrollWidth //返回元素節點的總寬度
Element.scrollLeft //返回元素節點的水平滾動條向右滾動的像素數值,通過設置這個屬性可以改變元素的滾動位置
Element.scrollTop //返回元素節點的垂直滾動向下滾動的像素數值
Element.offsetHeight //返回元素的垂直高度(包含border,padding)
Element.offsetWidth //返回元素的水平寬度(包含border,padding)
Element.offsetLeft //返回當前元素左上角相對於Element.offsetParent節點的垂直偏移
Element.offsetTop //返回水平位移
Element.style //返回元素節點的行內樣式
Element.children //包括當前元素節點的所有子元素
Element.childElementCount //返回當前元素節點包含的子HTML元素節點的個數
Element.firstElementChild //返回當前節點的第一個Element子節點
Element.lastElementChild //返回當前節點的最後一個Element子節點
Element.nextElementSibling //返回當前元素節點的下一個兄弟HTML元素節點
Element.previousElementSibling //返回當前元素節點的前一個兄弟HTML節點
Element.offsetParent //返回當前元素節點的最靠近的、並且CSS的position屬性不等於static的父元素。
節點屬性
Node.nodeName //返回節點名稱,只讀
Node.nodeType //返回節點類型的常數值,只讀
Node.nodeValue //返回Text或Comment節點的文本值,只讀
Node.textContent //返回當前節點和它的所有後代節點的文本內容,可讀寫
Node.baseURI //返回當前網頁的絕對路徑
Node.ownerDocument //返回當前節點所在的頂層文檔對象,即document
Node.nextSibling //返回緊跟在當前節點後面的第一個兄弟節點
Node.previousSibling //返回當前節點前面的、距離最近的一個兄弟節點
Node.parentNode //返回當前節點的父節點
Node.parentElement //返回當前節點的父Element節點
Node.childNodes //返回當前節點的所有子節點
Node.firstChild //返回當前節點的第一個子節點
Node.lastChild //返回當前節點的最後一個子節點
//parentNode接口
Node.children //返回指定節點的所有Element子節點
Node.firstElementChild //返回當前節點的第一個Element子節點
Node.lastElementChild //返回當前節點的最後一個Element子節點
Node.childElementCount //返回當前節點所有Element子節點的數目。

生成節點
document.createEvent(type) //生成一個事件對象,該對象能被element.dispatchEvent()方法使用
document.addEventListener(type,listener,capture) //註冊事件
document.removeEventListener(type,listener,capture) //註銷事件
document.dispatchEvent(event) //觸發事件


屬性
Element.getAttribute():讀取指定屬性
Element.setAttribute():設置指定屬性
Element.hasAttribute():返回一個布爾值,表示當前元素節點是否有指定的屬性
Element.removeAttribute():移除指定屬性

操作
Node.appendChild(node) //向節點添加最後一個子節點
Node.hasChildNodes() //返回布爾值,表示當前節點是否有子節點
Node.cloneNode(true); // 默認為false(克隆節點), true(克隆節點及其屬性,以及後代)
Node.insertBefore(newNode,oldNode) // 在指定子節點之前插入新的子節點
Node.removeChild(node) //刪除節點,在要刪除節點的父節點上操作
Node.replaceChild(newChild,oldChild) //替換節點
Node.contains(node) //返回一個布爾值,表示參數節點是否為當前節點的後代節點。
Node.compareDocumentPosition(node) //返回一個7個比特位的二進制值,表示參數節點和當前節點的關系
Node.isEqualNode(noe) //返回布爾值,用於檢查兩個節點是否相等。所謂相等的節點,指的是兩個節點的類型相同、屬性相同、子節點相同。
Node.normalize() //用於清理當前節點內部的所有Text節點。它會去除空的文本節點,並且將毗鄰的文本節點合並成一個。

//ChildNode接口
Node.remove() //用於刪除當前節點
Node.before() //
Node.after()
Node.replaceWith()

事件方法
document.createEvent(type) //生成一個事件對象,該對象能被element.dispatchEvent()方法使用
document.addEventListener(type,listener,capture) //註冊事件
document.removeEventListener(type,listener,capture) //註銷事件
document.dispatchEvent(event) //觸發事件

數組
a.valueof() //返回數組本身
a.toString() //返回數組的字符串形式
a.push(value,vlaue....) //用於在數組的末端添加一個或多個元素,並返回添加新元素後的數組長度。
pop() //用於刪除數組的最後一個元素,並返回該元素
join() //以參數作為分隔符,將所有數組成員組成一個字符串返回。如果不提供參數,默認用逗號分隔。
concat() //用於多個數組的合並。它將新數組的成員,添加到原數組的尾部,然後返回一個新數組,原數組不變。
shift() //用於刪除數組的第一個元素,並返回該元素。
unshift(value) //用於在數組的第一個位置添加元素,並返回添加新元素後的數組長度。
reverse() //用於顛倒數組中元素的順序,返回改變後的數組
slice(start_index, upto_index); //用於提取原數組的一部分,返回一個新數組,原數組不變。第一個參數為起始位置(從0開始),第二個參數為終止位置
(但該位置的元素本身不包括在內)。如果省略第二個參數,則一直返回到原數組的最後一個成員。負數表示倒數第幾個。
splice(index, count_to_remove, addElement1, addElement2, ...); //用於刪除原數組的一部分成員,並可以在被刪除的位置添加入新的數組成員,返回
值是被刪除的元素。第一個參數是刪除的起始位置,第二個參數是被刪除的元素個數。如果後面還有更多的參數,則表示這些就是要被插入數組的新元素。
sort() //對數組成員進行排序,默認是按照字典順序排序。排序後,原數組將被改變。如果想讓sort方法按照自定義方式排序,可以傳入一個函數作為參數
,表示按照自定義方法進行排序。該函數本身又接受兩個參數,表示進行比較的兩個元素。如果返回值大於0,表示第一個元素排在第二個元素後面;其他
情況下,都是第一個元素排在第二個元素前面。
map() //對數組的所有成員依次調用一個函數,根據函數結果返回一個新數組。
map(elem,index,arr) //map方法接受一個函數作為參數。該函數調用時,map方法會將其傳入三個參數,分別是當前成員、當前位置和數組本身。
forEach() //遍歷數組的所有成員,執行某種操作,參數是一個函數。它接受三個參數,分別是當前位置的值、當前位置的編號和整個數組。

字符串
var s = new String()
s.chatAt(index) //返回指定位置的字符
s.fromCharCode() //該方法的參數是一系列Unicode碼點,返回對應的字符串。
s.charCodeAt(index) //返回給定位置字符的Unicode碼點(十進制表示)
s.concat(s2) //用於連接兩個字符串
s.slice(start,end) //用於從原字符串取出子字符串並返回,不改變原字符串。第一個參數是子字符串的開始位置,第二個參數是子字符串的結束位置(不
含該位置)。如果參數是負值,表示從結尾開始倒數計算的位置,即該負值加上字符串長度。
s.substring(start,end) //用於從原字符串取出子字符串並返回,不改變原字符串.第一個參數表示子字符串的開始位置,第二個位置表示結束位置。
s.substr(start,length) //用於從原字符串取出子字符串並返回,不改變原字符串。第一個參數是子字符串的開始位置,第二個參數是子字符串的長度。如
果第一個參數是負數,表示倒數計算的字符位置。如果第二個參數是負數,將被自動轉為0,因此會返回空字符串。
s.indexOf(s) //返回給定元素在字符串中第一次出現的位置,如果沒有出現則返回-1。可以接受第二個參數,表示搜索的開始位置
s.lastIndexOf() //返回給定元素在字符串中最後一次出現的位置,如果沒有出現則返回-1。
s.trim() //用於去除字符串兩端的空格,返回一個新字符串
s.toLowerCase() //用於將一個字符串全部轉為小寫,返回一個新字符串,不改變原字符串。
s.toUpperCase() //全部轉為大寫
s.localeCompare(s2) //用於比較兩個字符串。它返回一個整數,如果小於0,表示第一個字符串小於第二個字符串;如果等於0,表示兩者相等;如果大於
0,表示第一個字符串大於第二個字符串。
s.match(regexp) //用於確定原字符串是否匹配某個子字符串,返回一個數組,成員為匹配的第一個字符串。如果沒有找到匹配,則返回null。
s.search() //返回值為匹配的第一個位置。如果沒有找到匹配,則返回-1。
s.replace(oldValue,newValue) //用於替換匹配的子字符串,一般情況下只替換第一個匹配(除非使用帶有g修飾符的正則表達式)。
s.split() //按照給定規則分割字符串,返回一個由分割出來的子字符串組成的數組。還可傳入第二個參數,決定了返回數組的成員數。

console對象
console.log(text,text2,...) //用於在console窗口輸出信息。它可以接受多個參數,將它們的結果連接起來輸出。如果第一個參數是格式字符串(使用了格
式占位符),console.log方法將依次用後面的參數替換占位符,然後再進行輸出。
console.info() //在console窗口輸出信息,同時,會在輸出信息的前面,加上一個藍色圖標。
console.debug() //在console窗口輸出信息,同時,會在輸出信息的前面,加上一個藍色圖標。
console.warn() //輸出信息時,在最前面加一個黃色三角,表示警告;
console.error() //輸出信息時,在最前面加一個紅色的叉,表示出錯,同時會顯示錯誤發生的堆棧
console.table() //可以將復合類型的數據轉為表格顯示。
console.count() //用於計數,輸出它被調用了多少次。
console.dir() //用來對一個對象進行檢查(inspect),並以易於閱讀和打印的格式顯示。
console.dirxml() //用於以目錄樹的形式,顯示DOM節點。
console.assert() //接受兩個參數,第一個參數是表達式,第二個參數是字符串。只有當第一個參數為false,才會輸出第二個參數,否則不會有任何結果。

//這兩個方法用於計時,可以算出一個操作所花費的準確時間。
console.time()
console.timeEnd()
//time方法表示計時開始,timeEnd方法表示計時結束。它們的參數是計時器的名稱。調用timeEnd方法之後,console窗口會顯示“計時器名稱: 所耗費的
時間”。

console.profile() //用來新建一個性能測試器(profile),它的參數是性能測試器的名字。
console.profileEnd() //用來結束正在運行的性能測試器。

console.group()
console.groupend()
//上面這兩個方法用於將顯示的信息分組。它只在輸出大量信息時有用,分在一組的信息,可以用鼠標折疊/展開。
console.groupCollapsed() //用於將顯示的信息分組,該組的內容,在第一次顯示時是收起的(collapsed),而不是展開的。

console.trace() //顯示當前執行的代碼在堆棧中的調用路徑。
console.clear() //用於清除當前控制臺的所有輸出,將光標回置到第一行。

JavaScript常用DOM操作方法和函數