<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>DOM基础</title>
<style></style>
<script type="text/javascript">
window.οnlοad=function(){
var oUl=document.getElementById('ul1');
// alert(oUl.childNodes.length); //返回5
//与原因在于childNodes包含了所有的节点:文本节点、文本节点、
// for(var i=0;i<oUl.childNodes.length;i++){
// //文本节点 3 文本节点 1
// alert(oUl.childNodes[i].nodeType); //返回3 1 3 1
// }
//一种过滤掉childNodes中文本节点的方法:
// for(var i=0;i<oUl.childNodes.length;i++){
// if(oUl.childNodes[i].nodeType==1){ //如果是元素节点
// oUl.childNodes[i],style.background='red';
// }
// }
//children属性就只包含元素节点,而且兼容性非常好
//这里返回的子节点只包含下一层的子节点(不包含子节点的子节点)
// alert(oUl.children.length); //返回2
//父节点 parentNode
// alert(oUl.parentNode); //返回 object HTMLBodyElement
//来一个应用父节点的小例子 点击/隐藏
// var aA=document.getElementsByTagName('a');
// for(var i=0;i<aA.length;i++){
// aA[i].οnclick=function(){
// this.parentNode.style.display='none';
// }
// }
//offsetparent
//复习一个CSS小知识点:绝对定位是根据什么定位的?
//是根据该元素的有定位的父元素来定位的,如果上一级父元素没有定位,就去找上上一级父元素,直到找到有定位的
//父元素或者是到body
//那么offsetparent就是可用来获取一个元素可以用来定位的那个父级元素,根据样式不同是会发生变化的
//firstChild与firstElementChild的区别
// var oUl=document.getElementById('ul1');
//IE6-8在才能使用
// oUl.firstChild.style.background='red';
//高级浏览器下才能使用
// oUl.firstElementChild.background='red';
//如何解决兼容性问题?
// if(oUl.firstElementChild){
// oUl.firstElementChild.background='red';
// }
// else{
// oUl.firstChild.style.background='red';
// }
}
</script>
</head>
<body>
<!-- 对应前面的笔记
<ul id='ul1'>
<li></li>
<li></li>
</ul> -->
<!-- 对应父节点的小栗子 -->
<ul id='ul2'>
<li>sskskjnbbh <a href="javascript:;">隐藏</a></li>
<li>znxnnai <a href="javascript:;">隐藏</a></li>
<li>ssk <a href="javascript:;">隐藏</a></li>
<li>sskskjnbbhmsmsm<a href="javascript:;">隐藏</a></li>
<li>jnbbh <a href="javascript:;">隐藏</a></li>
</ul>
</body>
</html>
JS小练习之childNodes,children,parentNode,offsetparent,firstChild与firstElementChild的用法
最新推荐文章于 2021-03-04 18:48:30 发布