<body>
<div class="box" id="box">
<div id="divSpan" class="divSpan">
<span>娱乐</span>
<span id="sp">新闻</span>
<span>体育</span>
<span>实时</span>
</div>
<div id="" class="divUl">
<ul>
<li >这是娱乐</li>
<li class="curr">这是新闻</li>
<li>这是体育</li>
<li>这是实时</li>
</ul>
</div>
</div>
<script>
function my$(id){
return document.getElementById(id);
}
var objDiv=my$("divSpan");
//父节点
console.log(objDiv.parentNode);
//父元素
console.log(objDiv.parentElement);
//子节点
console.log(objDiv.childNodes+"===子节点");
//子元素
console.log(objDiv.children);
//第一个子节点
console.log(objDiv.firstChild);
//第一个子元素
console.log(objDiv.firstElementChild);
//最后一个子节点
console.log(objDiv.lastChild);
//最后一个子元素
console.log(objDiv.lastElementChild);
//某个元素的前一个节点
console.log(my$("sp").previousSibling);
//某个元素的前一个元素
console.log(my$("sp").previousElementSibling);
//某个元素的后一个节点
console.log(my$("sp").nextSibling)
//某个元素的后一个元素\
console.log(my$("sp").nextElementSibling);
</script>
</body>
<div id="" class="divUl">
<ul id="divUl">
<li>这是娱乐</li>
<li>这是新闻</li>
<li>这是体育</li>
<li>这是实时</li>
</ul>
</div>
<script>
var arr=my$("divUl").childNodes;
console.log(arr);
var count=0;
for(var i=0;i<arr.length;i++){
//筛出所有的li
if(arr[i].nodeType==1&&arr[i].nodeName=="LI"){
arr[i].style.backgroundColor=count%2==0?"red":"yellow";
count++;
}
}
</script>
</body>
body图片替换
<body>
<style>
img{
height: 300px;
width: 400px;
}
body{
background: url();
}
</style>
<div id="dv">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
</div>
<script>
//获取子元素
var objEle=my$("dv").children;
//遍历
for(var i=0;i<objEle.length;i++){
objEle[i].onclick=function(){
document.body.style.backgroundImage="url("+this.src+")";
}
}
</script>
</body>
4808
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
