原生JavaScript操作——节点操作

进入正题，开始学习JavaScript原生节点操作。

1.查找节点

获取一般节点（当然也可以获取特殊关系节点）

按id查找

document.getElementByID('patty');

按class名查找

document.getElementsByClassName('patty');

按标签名查找

document.getElementsByTagName('patty');

统一查找

document.querySelector('#id');
document.querySelectorAll('#id div');

获取特殊关系节点

获取父节点

document.getElementByID('patty').parentNode;

获取元素子节点

/*childNodes会返回指定元素的所有种类节点
  children只返回指定元素的元素节点，ie下包括注释节点
*/
var getChildNodes=function(ele){
    var childArr=ele.children || ele.childNodes;
    children=new Array();
    for(var i=0;i<childArr.length;i++){
      if(childArr[i].nodeType==1){
          children.push(childArr[i]);
      }
   }
};

获取上一个兄弟节点

/*nextSibling,previousSibling都会将空格或者换行当做节点处理
   nextElementSibling,priviousElementSibling 直接返回元素节点
*/
function getPreviousElementSibling(ele) {    
     if(ele.previousElementSibling) {    
        return ele.previousElementSibling;    
     } else {    
           do {     
           ele= ele.previousSibling;     
            } while ( ele && ele.nodeType !== 1 );       
          return ele;    
  }   
}  ；   
getPreviousElementSibling(document.getElementById('patty'));

获取下一个兄弟节点与获取上一个兄弟节点类似

getNextElementSibling(ele)

获取第一个和最后一个兄弟节点

/*firstChild,lastChild都会将空格或者换行当做节点处理
   firstElementChild,lastElementChild 直接返回元素节点
  这里只列举第一个孩子
*/
 function getFirstElementChild(ele) {    
     if(ele.firstElementChild) {    
        return ele.firstElementChild;    
     } else {    
           do {     
           ele=getNextElementSibling(ele) ;     
            } while ( ele && ele.nodeType !== 1 );       
          return ele;    
  }   
}  ；

2.插入节点

JS提供appendChild(),insertBefore()两个方法插入节点

插入新的子节点

var span = document.createElement('span');
document.querySelector('div').appendChild(span);

在指定节点前插入子节点

var patty = document.getElementById('patty');
var span = document.createElement('span');
patty.parentNode.insertBefore(span, patty);

/*更简单的*/
patty.insertAdjacentHTML('beforeBegin', '<span></span>');

在指定节点后插入子节点

function insertAfter(ele, newNode){
    if(ele.nextElementSibling) {
        ele.parentNode.insertBefore(newNode, ele.nextElementSibling);
     } else {
       ele.parentNode.appendChild(newNode);
    }
}
var patty = document.getElementById('patty');
var span = document.createElement('span');
insertAfter(patty, span);

/*更简单的*/
patty.insertAdjacentHTML('afterEnd', '<span></span>');

3.删除节点

JS只提供removeChild()删除节点

var  patty= document.getElementById('patty');
patty.parentNode.removeChild(patty);

4.清空节点

var  patty= document.getElementById('patty');
patty.innerHTML=' ';

5.判断节点是否存在

document.getElementById('patty')!==null;
document.querySelectorAll(''div).length>0;

6.遍历节点

/*IE的数组类型没有forEach函数
  array.forEach(function(currentValue, index, arr), thisValue)
*/
function forEach(elems, callback) {
     if([].forEach) {
        [].forEach.call(elems, callback);
     } else {
        for(var i = 0; i < elems.length; i++) {
        callback(elems[i], i);   }
      }
}

var div = document.querySelectorAll('div');
forEach(div, function(elem, i){

});

7.复制节点

document.getElementById('patty').cloneNode(true);

8.获取／设置节点的内容

获取／设置节点内的内容

/*获取*/
 document.querySelecotr('div').innerHTML
 var  div= document.querySelector('div');
 div.textContent  || div.innerText;
/*设置*/
 document.querySelecotr('div').innerHTML = '<span>abc</span>';
 document.querySelecotr('div').textContent = 'abc'

获取／设置包含节点本身的内容

/*获取*/
document.getElementById('patty').outerHTML
/*设置*/
document.getElementById('patty').outerHTML="<div>pattyzzh</div>";

获取／设置表单的内容

/*获取*/
document.querySelector('input').value;
/*设置*/
document.querySelector('input').value="pattyzzh";

9.属性操作

判断是否设置属性

document.getElementById('pattyzzh').hasAttribute('class');

获取属性

document.getElementById('pattyzzh').getAttribute('class');

删除属性

document.getElementById('pattyzzh').removeAttribute('class');

设置属性

document.getElementById('pattyzzh').setAttribute('class'，‘patty’);

10.CSS样式操作

/*设置样式*/
document.getElementById('pattyzzh').style.color = '#e4e4e4';
/*获取样式
万恶的ie只支持currentStyle
*/
var getStyle = function(dom, attr) {   
     return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr];  
   };

getStyle(document.getElementById('pattyzzh'), 'color');
/*获取伪类的样式（ie不支持）*/
window.getComputedStyle(el , ":after")[attrName];

11.Class操作

新增类

function addClass(elem, className) {
       if(elem.classList) {
         elem.classList.add(className);
       } else {
       elem.className += ' ' + className;
     }
}

addClass(document.getElementById('test'), 'a');

删除类

function removeClass(ele, className) {
    if(ele.classList) {
       ele.classList.remove(className);
      } else {
      ele.className = ele.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
     }
}
removeClass(document.getElementById('pattyzzh'), 'patty');

判断是否包含类

function hasClass(ele, className) {
  if(ele.classList) {
    return ele.classList.contains(className);
  } else {
    return new RegExp('(^| )' + className + '( |$)', 'gi').test(ele.className);

  }
}
hasClass(document.getElementById('pattyzzh'), 'patty');

12.字符串操作

/*去除空格*/
function trim(str){
     if(str.trim) {
       return str.trim();
      } else {
       return str.replace(/^\s+|\s+$/g, '');
  }
}
trim(' pattyzzh ');

/*JSON序列化*/
JSON.stringify({name: "pattyzzh"})

/*JSON反序列化*/
JSON.parse('{ "name": "pattyzzh" }')

好了，第一部分先写这么多，下次见！！