DOM基础
DOM:document
兼容 IE 10% (IE9以下)
chrome 60%
Firefox 99%
DOM节点
子节点
<script>
window.onload=function(){
var oUl=document.getElementById('ul1');
//IE6-8节点数为2 其他为5
//alert(oUl.childNodes.length);
//for(var i=0;i<oUl.childNodes.length;i++){
//oUl.childNodes[i].style.background='red'; 无法修改
//nodeType==3 -->文本节点
//nodeType==1 -->元素节点
// alert(oUl.childNodes[i].nodeType)
// if(oUl.childNodes[i].nodeType==1){
// oUl.childNodes[i].style.background='red';
// }
//}
//children 只算元素节点只算第一层
for(var i=0;i<oUl.children.length;i++){
oUl.children[i].style.background='red';
}
}
</script>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
</body>
父节点
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';
}
}
}
<ul id="ul1">
<li>hahdb <a href="javascript:;">隐藏</a></li>
<li>hasefa <a href="javascript:;">隐藏</a></li>
<li>sdhth <a href="javascript:;">隐藏</a></li>
<li>dhedhbd <a href="javascript:;">隐藏</a></li>
<li>srhbeg <a href="javascript:;">隐藏</a></li>
offsetParent 寻找某一个语素用来定位的父级
<style>
#div1{
width: 200px;
height: 200px;
background: gray;
margin: 100px;
/*position: relative;*/ /*有div2根据div1进行定位
没有根据body进行定位*/
}
#div2{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 50px;
top: 50px;
}
</style>
<script>
window.onload=function(){
//offsetParent 寻找某一个语素用来定位的父级
var oDiv2=document.getElementById('div2');
alert(oDiv2.offsetParent)
}
</script>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
首尾子节点
存在兼容问题
<script>
window.onload=function(){
var oUl1=document.getElementById('ul1');
//IE6-8
//oUl1.firstChild.style.background='red';
//高级浏览器
//oUl1.firstElementChild.style.background='red';
//处理兼容问题
if(oUl1.firstElementChild){
oUl1.firstElementChild.style.background='red';
}
else{
oUl1.firstChild.style.background='red';
}
}
</script>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
操纵元素的属性
<script>
window.onload=function(){
var oTxt=document.getElementById('txt1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
//oTxt.value='afadad';
//oTxt['value']='afadad';
oTxt.setAttribute('value','hghchh');
// getAttribute(名称) --->获取
// setAttribute(名称,值) --->设置
// removeAttribute(名称) --->删除
}
}
</script>
</head>
<body>
<input id="txt1" type="text">
<input id="btn1" type="button" value="按钮">
</body>
DOM元素灵活查找
用className选择元素
如何用className选择元素
选出所有元素
通过className条件筛选
封装成函数
<script>
//封装函数
function getByClass(oParent,sClass){
var aResult=[];
var aEle=oParent.getElementsByTagName('*');
for(var i=0;i<aEle.length;i++){
if(aEle[i].className==sClass){
aResult.push(aEle[i]);
}
}
return aResult;
}
window.onload=function(){
var oUl=document.getElementById('ul1');
var aBox=getByClass(oUl,'box');
for(var i=0;i<aBox.length;i++){
aBox[i].style.background='red';
}
//var aLi=oUl.getElementsByTagName('li');
// for(var i=0;i<aLi.length;i++){
// if(aLi[i].className=='box'){
// aLi[i].style.background='red';
// }
// }
}
</script>
</head>
<body>
<ul id="ul1">
<li class="box"></li>
<li class="box"></li>
<li></li>
<li></li>
<li></li>
<li class="box"></li>
<li></li>
</ul>
</body>