JavaScript DOM编程艺术(第二版)第四章练习

DOM常用方法：

1. getElementById
2. getAttribute
3. setAttribute

childNodes[0]：子节点数组的第一个元素，它与firstChild等价
nodeValue：改变文本节点的值

<code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;Image Gallery&lt;/title&gt;
    &lt;body&gt;
        &lt;h1&gt;Snapshots&lt;/h1&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;a href=&quot;images/fireworks.jpg&quot; title=&quot;A fireworks display&quot; onclick=&quot;showPic(this);return false;&quot;&gt;Fireworks&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;images/coffee.jpg&quot; title=&quot;A cup of black coffee&quot; onclick=&quot;showPic(this);return false;&quot;&gt;Coffee&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;images/rose.jpg&quot; title=&quot;A red, red rose&quot; onclick=&quot;showPic(this);return false;&quot;&gt;Rose&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;images/bigben.jpg&quot; title=&quot;The famous clock&quot; onclick=&quot;showPic(this);return false;&quot;&gt;Big Ben&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;img  id=&quot;placeholder&quot;  src=&quot;images/placeholder.gif&quot; alt=&quot;my image gallery&quot;/&gt;
        &lt;p id=&quot;description&quot;&gt;Choose an images&lt;/p&gt;
        &lt;script src=&quot;./jas.js&quot;/&gt;
    &lt;/body&gt;
&lt;/html&gt;</code>

<code>
window.onload=showNumb;

function showPic (whichpic) {
   var url = whichpic.getAttribute(&quot;href&quot;);
   var title = whichpic.getAttribute(&quot;title&quot;);

   var aElement = document.getElementById(&quot;placeholder&quot;);
   var pElement = document.getElementById(&quot;description&quot;);
   //改变元素节点src属性
   aElement.setAttribute(&quot;src&quot;,url);

   //改变文本节点内容方式一
   //pElement.childNodes[0].nodeValue = title;
   //改变文本节点内容方式二
   pElement.firstChild.nodeValue = title;
}</code>

关于平稳退化

html代码：

<code>&lt;a href=&quot;javascript:popUp(&#039;https://baidu.com&#039;);&quot;&gt;Example&lt;/a&gt;
&lt;a href=&quot;#&quot; onclick=&quot;popUp(&#039;https://baidu.com&#039;);return false;&quot;&gt;Example&lt;/a&gt;</code>

js代码：

<code>function popUp(winUrl){
   window.open(winUrl,&quot;my&quot;,&quot;width=320,height=480&quot;);
}</code>

以上两种打开新窗口的方式都不能平稳退化。如果用户已经禁用了浏览器的javascript功能，这样的链接将毫无用处。

比较好的做法是：

<code>&lt;a href=&quot;https://baidu.com&quot; onclick=&quot;popUp(this.href);return false;&quot;&gt;Example&lt;/a&gt;</code>

这样，因为href有了值，就可以平稳退化。即使用户禁用了javascript功能，当搜索引擎蜘蛛过来爬时候，不会受影响，照样可以爬到内容。

最后，其实最佳实践是使用“渐进增强”方法，所谓的“渐进增强”就是用一些额外的信息层去包裹原始数据。在这里，就是分离javascript，如下：

html代码：

<code>        &lt;a href=&quot;https://baidu.com&quot; class=&quot;popup&quot;&gt;Example&lt;/a&gt;</code>

js代码：

<code>function popUp(winUrl){
   window.open(winUrl,&quot;my&quot;,&quot;width=680,height=320&quot;);
}

function prepareLinks(){
    var links = document.getElementsByTagName(&quot;a&quot;);
    for(var i = 0;i&lt;links.length;i++){
        if(links[i].getAttribute(&quot;class&quot;)==&quot;popup&quot;){
            links[i].onclick=function(){
                popUp(this.getAttribute(&quot;href&quot;));
                return false;
            }
        }
    }
}</code>