使用clasname找出特定的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//找出父元素下特定的子元素函數(shù)
function getByClass(oParsent,oclass){
//選擇父節(jié)點下面的所有元素節(jié)點
var oEle = oParsent.getElementsByTagName('*');
var aResult =[];
for(var i= 0;i<oEle.length;i++){
if(oEle[i].className == oclass){
aResult.push(oEle[i]);
}
}
return aResult;
}
//將找出來的子元素改變顏色
window.onload = function(){
var oUl = document.getElementById('ul1');
var aBox = getByClass(oUl,'box');
alert(aBox.length);
for (var i=0;i<aBox.length;i++) {
aBox[i].style.background = 'red';
}
}
</script>
</head>
<body>
<ul id="ul1">
<li class="box"></li>
<li></li>
<li class="box"></li>
<li></li>
<li></li>
</ul>
</body>
</html>
JS中dom的元素獲取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 200px;
height: 200px;
background: #CCCCCC;
margin: 100px;
position: relative;
}
#div2{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 50px;
top: 50px;
}
</style>
<script>
window.onload = function(){
oUl = document.getElementById('ul1');
//這個循環(huán)是找出childnodes中的有效元素
for (var i = 0;i<oUl.childNodes.length;i++) {
if(oUl.childNodes[i].nodeType==1 )
{
oUl.childNodes[i].style.background ='red';
}
}
//直接用children找出有效元素,不用判斷,和上面的循環(huán)作用一致.
for (var i=0;i<oUl.children.length;i++) {
oUl.children[i].style.background='red';
}
//設(shè)置點擊事件,將a元素所在的li隱藏
oAl = document.getElementsByTagName('a');
for (var i =0;i<oAl.length;i++) {
oAl[i].onclick = function(){
this.parentNode.style.display = 'none';
}
}
//查看相對父元素的位置偏移,offsetParent用來定位參考的父元素
// var oDiv2= document.getElementById('div2');
// alert(oDiv2.offsetParent);
//firstElementChild兼容性問題
if(oUl.firstElementChild ){
oUl.firstElementChild.style.background='red';
}else
{
oUl.firstChild.style.background = 'red';
}
}
</script>
</head>
<body>
<ul id="ul1">
<li><a href="javascript:;">隱藏</a></li>
<li><a href="javascript:;">隱藏</a></li>
<li><a href="javascript:;">隱藏</a></li>
<li><a href="javascript:;">隱藏</a></li>
<li><a href="javascript:;">隱藏</a></li>
<li><a href="javascript:;">隱藏</a></li>
</ul>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
dom簡單的插入和刪除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
var oText = document.getElementById('text1');
var oUl = document.getElementById('ul1');
var oLi = oUl.getElementsByTagName('li');
//刪除函數(shù),有一個問題,刪除怎么刪不了
// function deleteRow(deleNum){
// oLi.removeChild(deleNum.parentNode);
// }
//點擊函數(shù)
oBtn.onclick = function(){
var aLi = document.createElement('li');
aLi.innerHTML =oText.value+'\t'+"<input type ='button' value ='刪除' onclick='deleteRow(this)'></input>";
if(oLi.length>0)
{
oUl.insertBefore(aLi,oLi[0]);
}else
{
oUl.appendChild(aLi)
}
}
}
</script>
</head>
<body>
<input type="text" id="text1" />
<input type="button" id="btn1" value="插入" />
<ul id="ul1"></ul>
<a class="box"></a>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
