js dom学习
创建dom元素
var oLi = document.creteElement('li'); //创建li
var aLi = oUl.getElementsByTagName('li');
oLi.innerHTML = oTxt.value
oUl.appendChild(oLi)
父节点.insertBefore(子节点，谁之前)
oUl.insertBefore(oLi,aLi[0]) 如果一个都没有就会出错
if(aLi.length==0)
{
oUl.appendChild(oLi)
}else{
oUl.insertBefore(oLi,aLi[0])
}
window.onload = function()
{
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName('li');
var oBtn = document.getElementById('btn1');
var oTxt = document.getElementById('txt');
oBtn.onclick = function()
{
var oLi = document.createElement('li');
oLi.innerHTML = oTxt.value;
if(aLi.length>0)
{
oUl.insertBefore(oLi,aLi[0]);
}else{
oUl.appendChild(oLi);
}
}
}
删除 removeChild(子节点)
oUl.remove(this.parentNode)
<script>
window.onload = function()
{
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName('li');
var oA = oUl.getElementsByTagName('a');
for(var i=0;i<oA.length;i++)
{
oA[i].onclick = function(){
oUl.removeChild(this.parentNode)
}
}
}
</script>
文档碎片，提高文档效率的（理论上）
new Date().getTime();
时间戳
createDocumentFragment
实际上还不如之前的那种
dom1 dom2
火狐是最标准
dom的childNodes 是会包含txt文本节点
nodeType 节点类型 配合使用
3 文本节点
1 元素节点 标签节点
<script>
window.onload = function(){
var oUl = document.getElementById('ul1');
for(var i=0;i<oUl.childNodes.length;i++)
{
if(oUl.childNodes[i].nodeType == 1)
{
oUl.childNodes[i].style.background = "red"
}
}
}
</script>
children 兼容版本的childNodes
<script>
window.onload = function(){
var oUl = document.getElementById('ul1');
for(var i=0;i<oUl.children.length;i++)
{
oUl.children[i].style.background = "red"
}
}
</script>
父节点
parentNode
<script>
window.onload = function(){
var oA = document.getElementsByTagName('a');
for(var i=0;i<oA.length;i++)
{
oA[i].onclick = function(){
this.parentNode.style.display="none";
}
}
}
</script>
offsetParent 定位的父集
firstChild 火狐下用
firstElementChild
lastChild
var oFirst = oUl.firstElementChild || oUl.firstChild
兄弟节点
nextSibling nextElementSibling
prviousSibling
操作元素属性：
通过id操作 document.getElementById
dom方式操作
otxt.setAttribute('value',"22");
getAttribute('id')
removeAttribute
用className 选择元素
document.getElementsByClassName
var getElementsByClass = function(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
