首页 > 代码库 > 《对象及DOM知识点及其应用1》

《对象及DOM知识点及其应用1》

1.图片间的来回切换用if{}else{};

<超链接方式的切换图片(常用)>
如:<a href="http://www.mamicode.com/images1/1-small.jpg" id="bnn"/>切换图片</a><br/>
<img src="http://www.mamicode.com/images1/2-small.jpg" id="btt"/>
<script>
document.getElementById("bnn").onclick=function (){
var ar=document.getElementById("btt");//获取图片元素
ar.src=http://www.mamicode.com/this.href;
return false;//避免链接跳转

}


2.封装函数到js文件夹下
如: function my$(id){
return document.getElementById(id);
};
function mt$(id){
return document.getElementsByTagName(id);
}


3.<ul class="un1" id="uz">
<li><a href="http://www.mamicode.com/images1/1.jpg" id="bnt1" title="美女1" ><img src="http://www.mamicode.com/images1/1-small.jpg" width="100" /></a></li>
<li><a href="http://www.mamicode.com/images1/2.jpg" id="bnt2" title="美女2" ><img src="http://www.mamicode.com/images1/2-small.jpg" width="100" /></a></li>
<li><a href="http://www.mamicode.com/images1/3.jpg" id="bnt3" title="美女3" ><img src="http://www.mamicode.com/images1/3-small.jpg" width="100" /></a></li>
<li><a href="http://www.mamicode.com/images1/4.jpg" id="bnt4" title="美女4" ><img src="http://www.mamicode.com/images1/4-small.jpg"width="100" /></a></li>
</ul>

如要调用ul中的a,用2中的封装可以简写为
var img1=my$("uz").mt("a");


4.在循环中,不推荐使用匿名函数的形式
如arr[i].onclick=function (){}
//下面的写法好,节省空间
arr[i].onclick=array;
function array{};


5<innerText,textContent的兼容问题>
注意:
2者都可以获取和设置文本的内容
而innerHTML可以获取和设置标签以及文本的内容
function getInnerTxt(element){//element表示标签
return element.innerText?element.innerText:element.textContent;
}

function setInnerTxt(element,value){
//三元运算符也可以,2个都分别写一遍
if(element.innerText){
element.innerText=value;
}else{
element.textContent=value;

}
}

《对象及DOM知识点及其应用1》