总结一下这几天学的《JavaScript DOM编程艺术第2版》（1）

最新推荐文章于 2022-10-05 17:14:21 发布

ali19415

最新推荐文章于 2022-10-05 17:14:21 发布

阅读量1.8k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u013236064/article/details/38499893

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

整本书都是关于如何利用好DOM来进行相应的编程，总的来说，DOM的意识确实加强了，不过最深的还是书中利用DOM来编写的图片滑动的两个例子，一个是第六章，另一个是第十章。具体代码见【下载地址】

第六章要点分析：

HTML页面

首先在HTML页面一个<ul>多个li标签</ul>其中<li></li>的标签具体样式如下,给<ul>设置id是为了在js内获得ul的相应属性

<pre name="code" class="html">  <ul id="imagegallery">
<li></li>
.....  
<li>
      <a href="images/bigben.jpg" title="The famous clock">
        <img src="images/thumbnail_bigben.jpg" alt="Big Ben" />
      </a>
    </li>
</ul>

然后在<ul></ul>结束后加上一个占位标签，就是一开始的时候要有张图片占有具体大小的位置，然后点击<li>标签内的图片时，图片变化实在下面方框中进行变化的

<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />  
<p id="description">Choose an image.</p>

<p>标签只是在图片滑动时相应的显示<li>中图片的<title>中的内容

JS代码

通过js DOM来获得html页面中相应标签的属性，然后修改该标签的属性（我觉得整本书就是在讲这个，哦还有就是通过DOM添加一些标签，再为该标签添加属性）

以下是JS的完整代码

function showPic(whichpic) {
  if (!document.getElementById("placeholder")) return true;
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  if (!document.getElementById("description")) return false;
  if (whichpic.getAttribute("title")) {
    var text = whichpic.getAttribute("title");
  } else {
    var text = "";
  }
  var description = document.getElementById("description");
  if (description.firstChild.nodeType == 3) {
    description.firstChild.nodeValue = text;
  }
  return false;
}

function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this);
	}
    links[i].onkeypress = links[i].onclick;
  }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

addLoadEvent(prepareGallery);

一个函数一个函数来讲吧

首先是showPic(whichpic)

该函数是通过var source = whichpic.getAttribute("href");来获得当前对象的href属性

getAttribute("**")是获得当前对象的**属性。

再通过新建变量placeholder来获得id为placeholder的src属性，再将placeholder中的src更改为所选中图片的href；

placeholder.setAttribute("src",source)

setAttribute("**",#)是将#的属性替换掉**的属性。

其中有个description.firstChild.nodeType == 3

这里做个说明