DOM基础

2020-05-26 21:01:25 作者：互联网

DOM基础

DOM基础 - 1

什么是DOM

DOM实际上就是document，对页面上所有元素的操作都是通过document操作的

浏览器支持

浏览器支持程度

IE 10%

Chrome 60%

FF 99%

浏览器	支持程度
IE	10%
Chrome	60%
FF	99%

DOM节点

childNode子节点

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			window.onload=function(){
				var oUl=document.getElementById('ul1');
                //IE6-8正常
				alert(oUl.childNodes.length);			//ul有两个li元素，但返回子结点个数却是5
			}
		</script>
	</head>
	<body>
        <!--ul有两个li元素-->
		<ul id="ul1">
			<li></li>
			<li></li>
		</ul>
	</body>
</html>

通过上面例子，发现ul中只有两个li元素，但返回ul子结点的个数却是5，原因是节点包含以下两种节点

文本节点： abcdef

元素节点： abcdef

要想解决这个问题，便要用到接下来要说的nodeType

nodeType节点类型

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

children子节点，只含元素节点（主要）

window.onload=function(){
				var oUl= document.getElementById("ul1");
				alert(oUl.children.length);		//这时children只返回元素节点的个数
			};

parentNode父节点

/*例子：点击链接，隐藏整个li*/
window.onload=function(){
				var aA= document.getElementsByTagName('a');
				for(var i=0;i<aA.length;i++)
				{
					aA[i].onclick=function(){
						this.parentNode.style.display='none';
					}
				};
			};

offsetParent 非结构上的父级，而是用来定位的父级

补充：css内的绝对定位absolute是根据它的父级定位来定位的，如果父级没有定位，则逐级向上查找定位，直到找到body,接下来例子会用到

/*获取元素在页面上的实际位置*/
window.onload=function(){
				var oDiv2= document.getElementById('div2');	
				alert(oDiv2.offsetParent);			//因为div2定义在div1内，所以返回的是div2的父级div
			};

DOM基础 - 2

DOM节点（2）

首尾子节点

有兼容性问题

firstChild，firstElementChild

lastChile，lastElementChild

兄弟节点

有兼容性问题

nextSibling,nextElementSibling

previousSibling,previousElementSibling

操纵元素属性

元素属性操作

第一种：oDib,style.display = 'block'

第二种：oDib,style["display "] = 'block'

第三种：DOM方式

window.onload=function(){
				var oTxt=document.getElementById('txt1');
				var oBtn=document.getElementById('btn1');
				
				oBtn.onclick=function(){
					//oTxt.value='abcd';
					//oTxt['value']='abcd';
                    
                      //DOM方法，setAttribute，第一个参数是要设置的属性名称，第二个参数是属性值
					oTxt.setAttribute('value','hello world')
				};
			};

DOM方式操作元素属性

获取：getAttribute(名称)

设置：setAttribute(名称，值)

删除：removeAttribute(名称)

DOM元素灵活查找

用className选择元素

如何用className选择元素

选出所有元素

通过className条件筛选

封装成函数

/*通过某class来修改样式，第一个参数为父节点，第二参数为classname*/
function getByClass(oParent,sClass)
			{
				var aResult=[];
				var aEle=oParent.getElementsByTagName('*');		//css中的通配符,代表所有标签
				for(var i=0;i<aEle.length;i++)
				{
					if(aEle[i].className==sClass)
					{
						aResult.push(aEle[i]);
					}
				}
				return aResult;
			}

标签：DOM,元素,基础,oUl,var,document,节点
来源： https://www.cnblogs.com/potatolulu/p/12968639.html