DOM document
childNodes:
<script>
window.onload=function(){
var oDiv=document.getElementById('ul1');
//在IE6-8没问题。
alert(oDiv.childNodes.length)//5个节点除了两个li之外还有三个空。所以是有小问题的,把空的文本节点也算在里边了。
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
nodeType:
<script>
window.onload=function(){
var oDiv=document.getElementById('ul1');
for(var i=0;i<oDiv.childNodes.length;i++){
//childNodes==3-->文本节点
//childNodes==1-->元素节点
// alert(oDiv.childNodes[i].nodeType);
if(oDiv.childNodes[i].nodeType==1){
oDiv.childNodes[i].style.background='red';
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
</ul>
</body>
children:只包括元素不包括文本(空格 字符等)。找直接子节点。
parentNode:找直接父节点。
<script>
window.onload=function(){
var aA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1');
var aLi=oUl.getElementsByTagName('li');
for(var i=0;i<aA.length;i++){
aA[i].onclick=function(){
this.parentNode.style.display='none';
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>fjfnjskdfsdn <a href="javascript:;">隐藏</a></li>
<li>12345667<a href="javascript:;">隐藏</a></li>
<li>fecdvb<a href="javascript:;">隐藏</a></li>
<li>htjiohodhqihdqo<a href="javascript:;">隐藏</a></li>
<li>cacsdqsxsxdq<a href="javascript:;">隐藏</a></li>
</ul>
</body>
offsetParent是随父级元素变而变。元素的父级是谁,就根据谁的位置变。
DOM节点:
- 首尾子节点 (有兼容性问题) firstChild、firstElementChild,lastChild、lastElementChild
- 兄弟节点(有兼容性问题)nextSibling、nextElementsSibling,previousSibling、previousElementSibling
firstChild也和childNodes一样,也把空的子节点算在内。但是在低版本IE6-8的浏览器中没有问题。
<script>
window.onload=function(){
var oUl=document.getElementById('ul1');
/*//IE6-8
oUl.firstChild.style.background='red';
//高级浏览器
oUl.firstElementChild.style.background='red';*/
if(oUl.firstElementChild){
oUl.firstElementChild.style.background='red';
}else{
oUl.firstChild.style.background='red';
}
}
</script>
<body>
</body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
DOM操作元素属性:
元素属性操作:
- oDiv.style.display='block'
- oDiv.style["display"]="block";
- DOM方式
DOM方式:
- 获取:getAttribute(名称)
- 设置:setAttribute(名称,值)
- 删除:removeAttribute(名称)
<script>
window.onload=function(){
var otxt1=document.getElementById('otxt');
var obtn1=document.getElementById('obtn');
obtn1.onclick=function(){
//otxt1.value='ddsadsa';
//otxt1['value']='dqfqfefewq';
otxt1.setAttribute('value','ddxwqrxasfgrehtrhrt');
}
}
</script>
<body>
<input type="text" id="otxt"/>
<input type="button" id="obtn" value="设置文字"/>
</body>
<script>
window.onload=function(){
var aLi=document.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 class="box"></li>
<li></li>
</ul>
</body>