DOM操作

1、用原生js写面板

由于在循环btn的时候，i会形成闭包，将最终的i保存，无法找到想要的i。

这时需要用立即执行函数将i存到ao。保存在ao里面

html

<div class="wrap">
		<button class="active">1</button>
		<button>2</button>
		<button>3</button>
		<div class="show">1</div>
		<div>2</div>
		<div>3</div>				
	</div>

js

    var btn = $('button');
	var box = $('.wrap div');
	for (var i = 0; i < btn.length; i++) {
		(function(n){
			btn[n].onclick = function(){
				for (var j = 0; j < btn.length; j++) {
					box[j].className = '';
					btn[j].className = "";
				}
				this.className = 'active';
				box[n].className = 'show';
			}
		}(i))
		
	}

2、节点选择

document.getElementsByTagName();//选一组 类数组
document.getElementsByClassName();//选一组 类数组
document.getElementById();//选一个

// html5新增选择  缺点：不实时 当做所选节点做了删除或新增，都不会改变已选项。
document.querySelector('div>.classname');//选一个 选第一个
document.querySelectorAll('.box');//选一组

var div = document.getElementsByTagName('div');
var div = document.querySelector('div');

// 当 删除其中一个div 或者页面新增div
// getElementsByTagName('');会实时的跟着修改所选择的节点。
// 而query.selector();不会

3、节点类型

2、节点类型

元素节点——1

属性节点——2

文本节点——3

注释节点——8

document——9

DocumentFragment——11

2、父节点 box.parentNode;

3、节点childNodes、firstChild、lastChild、nextSibling、previousSibling包括文本节点。

4、元素节点树不包括文本节点注释节点等。只包括元素节点

parentNode与parentElement都是父节点。区别在后者没有document

5、节点的属性

box.nodeName   元素的标签名 以大写形式表示  只读

box.nodeValue   只用于Text文本节点跟Comment注释节点文本内容。 可读写

box.nodeType 节点类型  只读

box.attributes  Element节点的属性集合

节点的一个方法：

Node.hasChildNodes();  是否有节点  返回布尔值