下面是我整理的一些JavaScript常用的API清單。

目錄

1：元素查找
2：class操作
3：節(jié)點(diǎn)操作
4：屬性操作
5：內(nèi)容操作
6：css操作
7：位置大小
8：事件
9：DOM加載完畢
10：綁定上下文
11：去除空格
12：Ajax
13：JSON處理
14：節(jié)點(diǎn)遍歷

元素查找

-------------------------------------------------------------------- 注：如果你對(duì)python感興趣，我這有個(gè)學(xué)習(xí)Python基地，里面有很多學(xué)習(xí)資料，感興趣的+Q群：895817687 -------------------------------------------------------------------- // Node document.getElementById(id) // document.getElementById('test') document.querySelector(selectors) // document.querySelector('#test div') document.doctype document.documentElement document.head document.title document.body// NodeList document.getElementsByClassName(names) // document.getElementsByClassName('test') document.getElementsByName(name) // document.getElementsByName('demo') document.getElementsByTagName(name) // document.getElementsByTagName('div') document.getElementsByTagNameNS(namespace, name) // document.getElementsByTagNameNS('http://www.w3.org/1999/xhtml', 'div') document.querySelectorAll(selectors) // document.querySelectorAll('#test div') document.links document.scripts document.images document.embeds document.forms

class操作

// ie8// add classel.className += ' ' + className;// has classfunction hasClass(el,className){return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);}// toggle classfunction toggleClass(el,className){var classes = el.className.split(' ');var existingIndex = -1;for (var i = classes.length; i--;) {if (classes[i] === className){existingIndex = i;}}if (existingIndex >= 0){classes.splice(existingIndex, 1);}else{classes.push(className);}el.className = classes.join(' ');}// remove classfunction remove(el,className){el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');}// ie 10el.classList.add(className); // add classel.classList.remove(className); // remove classel.classList.contains(className); // has classel.classList.toggle(className); // toggle class

節(jié)點(diǎn)操作

// 創(chuàng)建var el = document.createElement(name);// 復(fù)制el.cloneNode(true); // 默認(rèn)為false(克隆節(jié)點(diǎn)及其后代), true(克隆節(jié)點(diǎn)及其屬性，以及后代)// 向節(jié)點(diǎn)添加最后一個(gè)子節(jié)點(diǎn)parent.appendChild(el);// 在指定子節(jié)點(diǎn)之前插入新的子節(jié)點(diǎn)parent.insertBefore(el, parent.childNodes[0]);// insertAdjacentHTML方法el.insertAdjacentHTML(where, htmlString);el.insertAdjacentHTML('beforeBegin', htmlString); // 在該元素前插入el.insertAdjacentHTML('afterBegin', htmlString); // 在該元素第一個(gè)子元素前插入el.insertAdjacentHTML('beforeEnd', htmlString); // 在該元素最后一個(gè)子元素后面插入el.insertAdjacentHTML('afterEnd', htmlString); // 在該元素后插入// 父元素el.parentNode// 刪除節(jié)點(diǎn)el.parentNode.removeChild(el);// 兄弟節(jié)點(diǎn) ie9+var siblings = Array.prototype.filter.call(el.parentNode.children, function(child){return child !== el;})// 下一個(gè)兄弟節(jié)點(diǎn)// ie8function nextElementSibling(el) {do { el = el.nextSibling; } while ( el && el.nodeType !== 1 );return el;}nextElementSibling(el);// ie9+el.nextElementSibling;// 上一個(gè)兄弟節(jié)點(diǎn)// ie8function previousElementSibling(el) {do { el = el.previousSibling;} while ( el && el.nodeType !== 1 );return el;}previousElementSibling(el);// ie9+el.previousElementSibling;// Children// ie8var children = [];for (var i = el.children.length; i--;) {// Skip comment nodes on IE8if (el.children[i].nodeType != 8)children.unshift(el.children[i]);}// ie9+el.children屬性操作// 獲取屬性值el.getAttribute('alt');// 設(shè)置屬性值el.setAttribute('alt', '圖片描述');

內(nèi)容操作

// 獲取元素內(nèi)容el.innerHTML// 設(shè)置元素內(nèi)容el.innerHTML = string// 獲取元素內(nèi)容(包含元素自身)el.outerHTML// 設(shè)置元素內(nèi)容(包含元素自身)el.outerHTML = string// 獲取文本內(nèi)容// ie8el.innerText// ie9+el.textContent// 設(shè)置文本內(nèi)容// ie8el.innerText = string// ie9+el.textContent = stringCSS操作// 獲取css樣式// ie8el.currentStyle[attrName]// ie9+window.getComputedStyle(el)[attrName]// 偽類window.getComputedStyle(el , ":after")[attrName];// 設(shè)置CSS樣式el.style.display = 'none';

位置大小

// getBoundingClientRect返回一個(gè)對(duì)象，包含top,left,right,bottom,width,height// width、height 元素自身寬高// top 元素上外邊界距窗口最上面的距離// right 元素右外邊界距窗口最上面的距離// bottom 元素下外邊界距窗口最上面的距離// left 元素左外邊界距窗口最上面的距離// width 元素自身寬(包含border,padding) // height 元素自身高(包含border,padding) // 元素在頁(yè)面上的偏移量var rect = el.getBoundingClientRect()return {top: rect.top + document.body.scrollTop,left: rect.left + document.body.scrollLeft}// 元素自身寬(包含border,padding) el.offsetWidth// 元素自身高(包含border,padding) el.offsetHeight// 元素的左外邊框至包含元素的左內(nèi)邊框之間的像素距離el.offsetLeft// 元素的上外邊框至包含元素的上內(nèi)邊框之間的像素距離el.offsetTop //通常認(rèn)為 <html> 元素是在 Web 瀏覽器的視口中滾動(dòng)的元素（IE6 之前版本運(yùn)行在混雜模式下時(shí)是 <body> 元素） //因此，帶有垂直滾動(dòng)條的頁(yè)面總高度就是 document.documentElement.scrollHeight// 在沒(méi)有滾動(dòng)條的情況下，元素內(nèi)容的總高度scrollHeight// 在沒(méi)有滾動(dòng)條的情況下，元素內(nèi)容的總寬度scrollWidth// 被隱藏在內(nèi)容區(qū)域左側(cè)的像素?cái)?shù)。通過(guò)設(shè)置這個(gè)屬性可以改變?cè)氐臐L動(dòng)位置scrollLeft// 被隱藏在內(nèi)容區(qū)域上方的像素?cái)?shù)。通過(guò)設(shè)置這個(gè)屬性可以改變?cè)氐臐L動(dòng)位置scrollTop// 視口大小// ie9+var pageWidth = window.innerWidth,pageHeight = window.innerHeight;if (typeof pageWidth != "number"){ // ie8if (document.compatMode == "CSS1Compat"){pageWidth = document.documentElement.clientWidth;pageHeight = document.documentElement.clientHeight;} else { // ie6混雜模式pageWidth = document.body.clientWidth;pageHeight = document.body.clientHeight;}}

事件

// 綁定事件// ie9+el.addEventListener(eventName, handler , Booleans); // Booleans默認(rèn)false(事件在冒泡階段執(zhí)行),true(事件在捕獲階段執(zhí)行)// ie8el.attachEvent('on' + eventName, function(){handler.call(el);});// 移除事件// ie9+el.removeEventListener(eventName, handler); // ie8el.detachEvent('on' + eventName, handler);// 事件觸發(fā)if (document.createEvent) {// ie9+var event = document.createEvent('HTMLEvents');event.initEvent('change', true, false);el.dispatchEvent(event);} else {// ie8el.fireEvent('onchange');}// event對(duì)象var event = window.event||event;// 事件的目標(biāo)節(jié)點(diǎn)var target = event.target || event.srcElement;// 事件代理ul.addEventListener('click', function(event) {if (event.target.tagName.toLowerCase() === 'li') {console.log(event.target.innerHTML)}});

DOM加載完畢

function ready(fn) {if (document.readyState != 'loading'){// ie9+document.addEventListener('DOMContentLoaded', fn);} else {// ie8document.attachEvent('onreadystatechange', function() {if (document.readyState != 'loading'){fn();}});}}

綁定上下文

// ie8fn.apply(context, arguments);// ie9+fn.bind(context);

去除空格

// ie8string.replace(/^\s+|\s+$/g, '');// ie9+string.trim();

ajax

// GETvar request = new XMLHttpRequest();request.open('GET', 'user.php?fname=Bill&lname=Gates', true); // false（同步）request.send();// ie8request.onreadystatechange = function() {if (this.readyState === 4) {if (this.status >= 200 && this.status < 400) {// Success!var data = JSON.parse(this.responseText);} else {// 錯(cuò)誤}}};// ie9+request.onload = function() {if (request.status >= 200 && request.status < 400) {// Success!var data = JSON.parse(request.responseText);} else {// 服務(wù)器返回出錯(cuò)}};request.onerror = function() {// 連接錯(cuò)誤};// POSTvar request = new XMLHttpRequest(); request.open('POST', 'user.php', true); // false（同步）request.setRequestHeader("Content-type","application/x-www-form-urlencoded");request.send(dataString);

JSON處理

JSON.parse(string);JSON.String(Object)

節(jié)點(diǎn)遍歷

function forEach( nodeList, callback ) {if(Array.prototype.forEach){// ie9+Array.prototype.forEach.call( nodeList, callback );}else {// ie8for (var i = 0; i < nodeList.length; i++){callback(nodeList[i], i);}}}forEach(document.querySelectorAll(selector),function(el, i){})

總結(jié)

以上是生活随笔為你收集整理的JavaScript常用API总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。