DOM基础

·DOM基础-1

子节点：childNodes ，只算第一层的

alert(oUl.childNodes.length);

节点类型：nodeType  与childNodes配合解决兼容问题

alert(oUl.childNodes[1].nodeType);

var oUl = document.getElementById('ul1');
for(var i=0;i<oUl.childNodes.length;i++)
{
	//nodeType==3	->	文本节点
	//nodeType==1	->	元素节点
	if(oUl.childNodes[i].nodeType==1)
	{
		oUl.childNodes[i].style.background='red';
			
	}
}

子节点:children,与childNodes相似，但是不会出现问题

alert(oUl.children.length);

父节点：parentNode

		var oUl = document.getElementById('ul1');
		alert(oUl.parentNode);

父节点应用：实现点击隐藏的功能

window.οnlοad=function ()
{
	var aA = document.getElementsByTagName('a');
	
	for(var i=0;i<aA.length;i++)  
	{
		aA[i].οnclick=function ()
		{
			this.parentNode.style.display='none';
		};
	}
};

offsetParent：寻找父节点，获取元素在页面上的实际位置，position设置不同就会不同

<script>
window.οnlοad=function ()
{
	var oDiv2=document.getElementById('div2');
	
	alert(oDiv2.offsetParent);
};
</script>

·DOM基础-2

firstChild、lastChild  (高版本浏览器有兼容问题)
firstChildElementChild、lastElementChild(低版本浏览器有兼容问题)

//IE6-8浏览器可以用
oUl.firstChild.style.background='red';
//高级浏览器可以用
oUl.firstElementChild.style.background='red';

使用if判断解决兼容问题

		if(oUl.firstElementChild)
		{
			oUl.firstElementChild.style.background='red';
		}
		else
		{
			oUl.firstChild.style.background='red';
		}

·操纵元素属性

获取：getAttribute(名称)
设置：setAttribute(名称，值) （第三种操作属性的方法）
删除：removeAttribute(名称)

	window.οnlοad=function()
	{
		var oTxt = document.getElementById('txt1');
		var oBtn = document.getElementById('btn1');

		oBtn.onclick = function()
		{
			//三个语句设置属性效果一样
			//oTxt.value='asdas';
			//oTxt['value']='asdas';
			oTxt.setAttribute('value','asdas');
		};
	};

alert(oBtn.getAttribute('value')); //获取

alert(oBtn.removeAttribute('value')); //删除

·DOM元素灵活查找
用className选择元素

	window.οnlοad=function ()
	{
		var oUl = document.getElementById('ul1');
		var aLi = oUl.getElementsByTagName('li');
		for(var i=0;i<aLi.length;i++)
		{
			if(aLi[i].className=='box')
			{
				aLi[i].style.background='red';
			}
		}

	};

封装成函数，通配符*的使用，arr.push()数组尾部添加

	function getByClass(oParent,oClass)
	{
		var aResult = [];
		var aEle = oParent.getElementsByTagName('*');

		for(var i=0;i<aEle.length;i++)
		{
			if (aEle[i].className==oClass) 
			{
				aResult.push(aEle[i]);
			}
		}
		return aResult;
	}

	window.οnlοad=function ()
	{
		var oUl = document.getElementById('ul1');
		var aBox = getByClass(oUl,'box');

		for(var i=0;i<aBox.length;i++)
		{
			aBox[i].style.background='red';
		}
	};