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(); 是否有节点 返回布尔值