进入正题，开始学习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" }')
好了，第一部分先写这么多，下次见！！
