進入正題，開始學(xué)習(xí)JavaScript原生節(jié)點操作。
1.查找節(jié)點
獲取一般節(jié)點（當(dāng)然也可以獲取特殊關(guān)系節(jié)點）
按id查找
document.getElementByID('patty');
按class名查找
document.getElementsByClassName('patty');
按標(biāo)簽名查找
document.getElementsByTagName('patty');
統(tǒng)一查找
document.querySelector('#id');
document.querySelectorAll('#id div');
獲取特殊關(guān)系節(jié)點
獲取父節(jié)點
document.getElementByID('patty').parentNode;
獲取元素子節(jié)點
/*childNodes會返回指定元素的所有種類節(jié)點
children只返回指定元素的元素節(jié)點，ie下包括注釋節(jié)點
*/
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]);
}
}
};
獲取上一個兄弟節(jié)點
/*nextSibling,previousSibling都會將空格或者換行當(dāng)做節(jié)點處理
nextElementSibling,priviousElementSibling 直接返回元素節(jié)點
*/
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'));
獲取下一個兄弟節(jié)點與獲取上一個兄弟節(jié)點類似
getNextElementSibling(ele)
獲取第一個和最后一個兄弟節(jié)點
/*firstChild,lastChild都會將空格或者換行當(dāng)做節(jié)點處理
firstElementChild,lastElementChild 直接返回元素節(jié)點
這里只列舉第一個孩子
*/
function getFirstElementChild(ele) {
if(ele.firstElementChild) {
return ele.firstElementChild;
} else {
do {
ele=getNextElementSibling(ele) ;
} while ( ele && ele.nodeType !== 1 );
return ele;
}
} ；
2.插入節(jié)點
JS提供appendChild(),insertBefore()兩個方法插入節(jié)點
插入新的子節(jié)點
var span = document.createElement('span');
document.querySelector('div').appendChild(span);
在指定節(jié)點前插入子節(jié)點
var patty = document.getElementById('patty');
var span = document.createElement('span');
patty.parentNode.insertBefore(span, patty);
/*更簡單的*/
patty.insertAdjacentHTML('beforeBegin', '<span></span>');
在指定節(jié)點后插入子節(jié)點
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.刪除節(jié)點
JS只提供removeChild()刪除節(jié)點
var patty= document.getElementById('patty');
patty.parentNode.removeChild(patty);
4.清空節(jié)點
var patty= document.getElementById('patty');
patty.innerHTML=' ';
5.判斷節(jié)點是否存在
document.getElementById('patty')!==null;
document.querySelectorAll(''div).length>0;
6.遍歷節(jié)點
/*IE的數(shù)組類型沒有forEach函數(shù)
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.復(fù)制節(jié)點
document.getElementById('patty').cloneNode(true);
8.獲取／設(shè)置節(jié)點的內(nèi)容
獲?。O(shè)置節(jié)點內(nèi)的內(nèi)容
/*獲取*/
document.querySelecotr('div').innerHTML
var div= document.querySelector('div');
div.textContent || div.innerText;
/*設(shè)置*/
document.querySelecotr('div').innerHTML = '<span>abc</span>';
document.querySelecotr('div').textContent = 'abc'
獲?。O(shè)置包含節(jié)點本身的內(nèi)容
/*獲取*/
document.getElementById('patty').outerHTML
/*設(shè)置*/
document.getElementById('patty').outerHTML="<div>pattyzzh</div>";
獲?。O(shè)置表單的內(nèi)容
/*獲取*/
document.querySelector('input').value;
/*設(shè)置*/
document.querySelector('input').value="pattyzzh";
9.屬性操作
判斷是否設(shè)置屬性
document.getElementById('pattyzzh').hasAttribute('class');
獲取屬性
document.getElementById('pattyzzh').getAttribute('class');
刪除屬性
document.getElementById('pattyzzh').removeAttribute('class');
設(shè)置屬性
document.getElementById('pattyzzh').setAttribute('class'，‘patty’);
10.CSS樣式操作
/*設(shè)置樣式*/
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" }')
好了，第一部分先寫這么多，下次見??！
