JavaScript常用API总结

原创

mob604756f261ee 2021-03-23 11:52:09 ©著作权

文章标签 java 文章分类 Java 后端开发

©著作权归作者所有：来自51CTO博客作者mob604756f261ee的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

元素查找
class操作
节点操作
属性操作
内容操作
css操作
位置大小
事件
DOM加载完毕
绑定上下文
去除空格
Ajax
JSON处理
节点遍历

元素查找

// Nodedocument.getElementById(id) // document.getElementById('test')document.querySelector(selectors) // document.querySelector('#test div')document.doctypedocument.documentElementdocument.headdocument.titledocument.body // NodeListdocument.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.linksdocument.scriptsdocument.imagesdocument.embedsdocument.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

节点操作

// 创建var el = document.createElement(name); // 复制el.cloneNode(true); // 默认为false(克隆节点及其后代), true(克隆节点及其属性，以及后代) // 向节点添加最后一个子节点parent.appendChild(el); // 在指定子节点之前插入新的子节点parent.insertBefore(el, parent.childNodes[0]); // insertAdjacentHTML方法el.insertAdjacentHTML(where, htmlString);el.insertAdjacentHTML('beforeBegin', htmlString); // 在该元素前插入el.insertAdjacentHTML('afterBegin', htmlString); // 在该元素第一个子元素前插入el.insertAdjacentHTML('beforeEnd', htmlString); // 在该元素最后一个子元素后面插入el.insertAdjacentHTML('afterEnd', htmlString); // 在该元素后插入 // 父元素el.parentNode // 删除节点el.parentNode.removeChild(el); // 兄弟节点 ie9+var siblings = Array.prototype.filter.call(el.parentNode.children, function(child){  return child !== el;}) // 下一个兄弟节点// ie8function nextElementSibling(el) {  do { el = el.nextSibling; } while ( el && el.nodeType !== 1 );  return el;}nextElementSibling(el);// ie9+el.nextElementSibling; // 上一个兄弟节点// 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 IE8  if (el.children[i].nodeType != 8)    children.unshift(el.children[i]);}// ie9+el.children

属性操作

// 获取属性值el.getAttribute('alt'); // 设置属性值el.setAttribute('alt', '图片描述');

内容操作

// 获取元素内容el.innerHTML// 设置元素内容el.innerHTML = string// 获取元素内容(包含元素自身)el.outerHTML// 设置元素内容(包含元素自身)el.outerHTML = string // 获取文本内容// ie8el.innerText// ie9+el.textContent// 设置文本内容// ie8el.innerText = string// ie9+el.textContent = string

CSS操作

// 获取css样式// ie8el.currentStyle[attrName]// ie9+window.getComputedStyle(el)[attrName]// 伪类window.getComputedStyle(el , ":after")[attrName]; // 设置CSS样式el.style.display = 'none';

位置大小

// getBoundingClientRect返回一个对象，包含top,left,right,bottom,width,height// width、height 元素自身宽高// top 元素上外边界距窗口最上面的距离// right 元素右外边界距窗口最上面的距离// bottom 元素下外边界距窗口最上面的距离// left 元素左外边界距窗口最上面的距离// width 元素自身宽(包含border,padding) // height 元素自身高(包含border,padding)  // 元素在页面上的偏移量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// 元素的左外边框至包含元素的左内边框之间的像素距离el.offsetLeft// 元素的上外边框至包含元素的上内边框之间的像素距离el.offsetTop  //通常认为 <html> 元素是在 Web 浏览器的视口中滚动的元素（IE6 之前版本运行在混杂模式下时是 <body> 元素） //因此，带有垂直滚动条的页面总高度就是 document.documentElement.scrollHeight// 在没有滚动条的情况下，元素内容的总高度scrollHeight// 在没有滚动条的情况下，元素内容的总宽度scrollWidth// 被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置scrollLeft// 被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置scrollTop // 视口大小// ie9+var pageWidth = window.innerWidth,    pageHeight = window.innerHeight;if (typeof pageWidth != "number"){   // ie8  if (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默认false(事件在冒泡阶段执行),true(事件在捕获阶段执行)// ie8el.attachEvent('on' + eventName, function(){  handler.call(el);}); // 移除事件// ie9+el.removeEventListener(eventName, handler); // ie8el.detachEvent('on' + eventName, handler); // 事件触发if (document.createEvent) {  // ie9+  var event = document.createEvent('HTMLEvents');  event.initEvent('change', true, false);  el.dispatchEvent(event);} else {  // ie8  el.fireEvent('onchange');} // event对象var event = window.event||event; // 事件的目标节点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 {    // ie8    document.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 {      // 错误    }  }}; // ie9+request.onload = function() {  if (request.status >= 200 && request.status < 400) {    // Success!    var data = JSON.parse(request.responseText);  } else {    // 服务器返回出错  }};request.onerror = function() {  // 连接错误}; // 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)

节点遍历

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

欢迎补充。