JavaScript常用APIのまとめ

目次
1.要素検索2.class操作3.ノード操作4.属性操作5.コンテンツ操作6.css操作7.位置サイズ8.イベント9.DOMローディング完了10.バインディングコンテキスト11.スペース12.Ajax 13.JSON処理14.ノードエルゴード
要素検索

// 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

クラス操作

// ie8
// add class
el.className += ' ' + className;
 
// has class
function hasClass(el,className){
  return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
}
 
// toggle class
function 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 class
function remove(el,className){
  el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
 
// ie 10
el.classList.add(className); // add class
el.classList.remove(className); // remove class
el.classList.contains(className); // has class
el.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;
})
 
//        
// ie8
function nextElementSibling(el) {
  do { el = el.nextSibling; } while ( el && el.nodeType !== 1 );
  return el;
}
nextElementSibling(el);
// ie9+
el.nextElementSibling;
 
//        
// ie8
function previousElementSibling(el) {
  do { 
    el = el.previousSibling;
  } 
  while ( el && el.nodeType !== 1 );
  return el;
}
previousElementSibling(el);
// ie9+
el.previousElementSibling;
 
// Children
// ie8
var 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
 
//       
// ie8
el.innerText
// ie9+
el.textContent
//       
// ie8
el.innerText = string
// ie9+
el.textContent = string

CSS操作

//   css  
// ie8
el.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 
 
//           Web             （IE6                   ） 
//  ，                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(         )
// ie8
el.attachEvent('on' + eventName, function(){
  handler.call(el);
});
 
//     
// ie9+
el.removeEventListener(eventName, handler); 
// ie8
el.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();
      }
    });
  }
}

バインドされたコンテキスト

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

スペースを削除

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

ajax

// GET
var request = new XMLHttpRequest();
request.open('GET', 'user.php?fname=Bill&lname=Gates', true); // false（  ）
request.send();
 
// ie8
request.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() {
  //     
};
 
// POST
var 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){
 
})