标签：text nodevalue dom get source col 分解 des fun
本案例主要学习理解，用到的几个DOM方法
01、getAttribute（）方法，获取元素的属性值
02、setAttribute(‘src‘,source) 方法，用后边的值修改前边这个元素的属性值
1 <h1>图片点击切换</h1> 2 <ul id="imagegallery"> 3 <li><a href="images/654.jpg" title="图片一说明">图片一</a></li> 4 <li><a href="images/contentimg.jpg" title="图片二说明">图片二</a></li> 5 <li><a href="images/tuku.jpg" title="图片三说明">图片三</a></li> 6 </ul> 7 <img src="images/toutiao3.jpg" alt="占位图" id="img"> 8 <p id="description">图片说明</p>
实现的思路分解：
01、用getAttribute()方法获取到a标签的href的属性值
02、用document.getElementById()方法获取到图片
03、用setAttribute(‘要修改的元素属性‘,用href的值修改)
点击修改图片基本思路就是这样。
01、用getAttribute()方法获取到a标签的title的属性值
02、获取要修改的id
03、获取p元素的第一个文本节点的值 用到firstChild.nodeValu获取
04、我们把获取到的title的属性值赋值给03步骤的变量
1 function showpic(winpic){ 2 if(!document.getElementById(‘img‘)) return false; 3 var source = winpic.getAttribute(‘href‘); 4 var oImg = document.getElementById(‘img‘); 5 if(oImg.nodeName !=‘IMG‘) return false; 6 oImg.setAttribute(‘src‘,source); 7 if(document.getElementById(‘description‘)){ 8 var description = document.getElementById(‘description‘); 9 var text = winpic.getAttribute(‘title‘); 10 description.firstChild.nodeValue = text; 11 //description.innerHTML = text; 12 } 13 return true; 14 } 15 16 function prepareGallery(){ 17 if(!document.getElementsByTagName) return false; 18 if(!document.getElementById) return false; 19 if(!document.getElementById(‘imagegallery‘)) return false; 20 var gallery = document.getElementById(‘imagegallery‘); 21 var links = gallery.getElementsByTagName(‘a‘); 22 for(var i=0;i<links.length;i++){ 23 links[i].onclick = function(){ 24 //return showpic(this) ? return : false; 25 showpic(this); 26 return false; 27 } 28 } 29 } 30 31 prepareGallery();
标签：text nodevalue dom get source col 分解 des fun
原文地址：https://www.cnblogs.com/xingfuggz/p/9577422.html
