JavascriptDom编程艺术学习笔记二_javascript dom编程艺术学习笔记-CSDN博客

本文链接：https://blog.csdn.net/LeapMotion1/article/details/78719431

getAttribute()和setAttribute()方法是获取节点的属性，该方法不属于document对象。
若一个站点用到多个js文件，为了减少对站点的请求次数（提高性能），应该把这些.js文件合并到一个js文件中。
事件处理函数的工作机制：如给某个超链接添加一个onclick事件处理函数，当该事件发生时，相应的JS代码就会得到执行。并返回一个布尔值true或false，如果返回的是true，则这个链接被点击了，如果返回的是false，该链接未被点击。
如下面的代码：

//因为onclick事件处理函数触发的js代码返回值为false
//则该链接的默认行为没有被触发，具体行为是由showpic()函数决定
<a href="images/book.jpg" title="Coffee" onclick="showpic(this);return false;">Coffee</a>

看上面代码，会发现showpic()函数中传递了一个参数this，this表示当前点击的对象，表示”这个<a>元素节点”。
通过this关键词，我们可以返回当前超链接的href和title属性等。
一个HTML文档是一棵家谱树，一棵树是由无数节点组成的，节点类型有12种，最常用的有3种：元素节点、文本节点、属性节点。
node.nodeType 可以查看某个节点的类型。
4.childNodes属性可以用来获取任何一个元素的所有子元素。
此外还提供了firstChild和lastChild属性，方便查找。

//该方法返回一个对象数组，而body元素只有一个，所以是[0]下标
var body_element = document.getElementsByTagName('body')[0];

//返回body元素包含的所有子元素数量，结果会让你大吃一惊
alert(body_element.childNodes.length);

5.如果想改变一个文本节点的值，可以用node.nodeValue

<p id="description">这里是图片描述</p>

<script>

//获取description元素节点
var description = document.getElementById('description');

//返回null
//因为p元素是一个元素节点，没有nodeValue值
alert(description.nodeValue); 

//首先获取p元素包含的子元素的文本节点
alert(description.childNodes[0].nodeValue); 

</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <!-- 引入less文件 -->
    <link rel="stylesheet/less" type="text/css" href="less/layout.less" />
    <!-- 引入less.js编译文件 -->
    <script src="js/less.js"></script>
</head>
<body>
    <h1>Snapshots</h1>
    <ul>
        <li>
            <a href="images/book_img1.jpg" title="Fireworks" onclick="showpic(this);return false;">Fireworks</a>
        </li>
        <li>
            <a href="images/book_img2.jpg" title="Coffee" onclick="showpic(this);return false;">Coffee</a>
        </li>
        <li>
            <a href="images/book_img3.jpg" title="Rose" onclick="showpic(this);return false;">Rose</a>
        </li>
        <li>
            <a href="images/book_img4.jpg" title="Sea" onclick="showpic(this);return false;">Sea</a>
        </li>
    </ul>
    <img id="placeholder" src="images/book_img1.jpg" title="这里是悬浮的图片描述" />
    <p id="description">这里是图片描述</p>

    <!--引入js文件-->
    <script src="js/showpic.js"></script>
</body>
</html>

//以下代码未layout.less样式文件
//在使用less时，请先去网页上搜索[less.js编译文件](http://lesscss.org/#download-options)
//背景、字体颜色样式、超链接样式
body {
  margin: 1em 10%;
  background-color: #ccc;
  font-family: "Agency FB", "Arial Narrow";
  color: #eeeeee;
  font-size: 30px;
  padding: 20px 0 30px 30px;

  //超链接
  a {
    color: antiquewhite;
    text-decoration: none;
  }
  a:active {
    color: #bbbbbb;
  }
  a:visited {
    color: antiquewhite;
  }

  //大标题
  h1 {
    font-size: 40px;
  }

  //列表样式
  ul {
    padding: 0;
    width: 100%;
    height: 50px;
    li {
      list-style: none;
      float: left;
      padding: 0 1em;
    }
    li:first-child {
      padding: 0 0;
    }
  }
  //图片框
  img {
    display: block;
    width: 600px;
    height:400px;
  }
  //图片描述
  #description {
    color: cornflowerblue;
    font-size: 18px;
    text-align: left;
  }
}

//以下是showpic.js文件
function showpic(whichpic) {
    //获取超链接的网址
    var web_img = whichpic.getAttribute('href');
    //替换img的图片地址为超链接网址
    var show_img = document.getElementById('placeholder');
    show_img.setAttribute('src', web_img);
    //获取description元素节点
    var description = document.getElementById('description');
    //设置description元素节点内包含的文本节点为超链接的title
    var text = whichpic.getAttribute('title');
    description.childNodes[0].nodeValue = text;
}