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

Posted 2020-08-09

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

<超链接方式的切换图片（常用）>
如：<a href="../images1/1-small.jpg" id="bnn"/>切换图片</a><br/>
<img src="../images1/2-small.jpg" id="btt"/>
<script>
document.getElementById("bnn").onclick=function (){
var ar=document.getElementById("btt");//获取图片元素
ar.src=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="images1/1.jpg" id="bnt1" title="美女1" ><img src="images1/1-small.jpg" width="100" /></a></li>
<li><a href="images1/2.jpg" id="bnt2" title="美女2" ><img src="images1/2-small.jpg" width="100" /></a></li>
<li><a href="images1/3.jpg" id="bnt3" title="美女3" ><img src="images1/3-small.jpg" width="100" /></a></li>
<li><a href="images1/4.jpg" id="bnt4" title="美女4" ><img src="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;

}
}