JavaScript-图片库

第四章：JavaScript 图片交互

<ul>
    <li><a href="images/3840x2160-3122452-creative-wallpapers.jpg" onclick="showpic(this);return false;">1</a></li>
    <li><a href="images/3840x2160-3374593-free-dusk-wallpapers.jpg" onclick="showpic(this);return false;">2</a></li>
    <li><a href="images/3840x2160-3957507-photos-wallpapers.jpg">3</a></li>
    <li><a href="images/3840x2160-4279191-stunning-retina-wallpapers.jpg">4</a></li>
  </ul>

//占位符
  <img src="images/3840x2160-3122452-creative-wallpapers.jpg" alt="" id="placeholder">

function showpic(whichpic){
  var imgPlaceholder = document.getElementById("placeholder");
  var nodeSource = whichpic.href;
  imgPlaceholder.src = nodeSource;
}
//控制图片href

• childNodes 属性 //获取一个元素的所有子元素

  由 childnodes属性返回的数组包含所有类型的节点,而不仅仅是元素节点。事实上,文档里几乎每一样东西都是一个节点,甚至连空格和换行符都会被解释为节点,而它们也全都包含在childNodes属性所返回的数组当中。

  var body_ele = document.getElementsByTagName('body')[0];
  var body_all_child = body_ele.childNodes;
  //获取全部body 下面的子元素
  //text元素、ul、img、script等

• nodeType属性 //获取元素 节点的属性

  body_ele.nodeType;
  //返回值1:元素节点，2:属性节点，3:文本节点

• nodeValue 属性 //获取节点的值

  var para = document.getElementById("paragraph");
  
  console.log(para.nodeValue) //返回值为null
  //para元素本身的nodeValue属性是空值
  //para元素包含很多子元素
  console.log(para.childNodes[0].nodeValue)
  
  //childNodes 获取当前元素的所有元素信息，第一个是元素的文本信息节点，第二个是元素下挂载的其他元素

• firstChild和lastChild 属性

  node.firstChild = node.childNodes[0];
  node.lastChild = node.childNodes[node.childNodes.length-1]