js document 

<html><head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        // document的常见用法
        // 1.document能够动态的获取到网页中的任何一个标签(节点,元素)
        // 2.document可以动态的对拿到的标签进行"增删改查"操作
        // CRUD CRUD是指在做计算处理时的增加(Create)、读取(Retrieve)（重新得到数据）、更新(Update)和删除(Delete)几个单词的首字母简写

//        写入
//       document.write('hello world!');
//       document.write('<img src="https://www.baidu.com/img/bd_logo1.png" width="200" height="100">');
//       document.write('<input>');
//       document.write('<input type="color">');
//       document.write('<a href="http://www.520it.com" target="_blank">百度一下</a>');

//        更改图片
        var img = document.getElementById('icon');
        console.log(img);
    </script>
</head>
<body>
   <img id="icon" name="test2" class="test1" src="img/img_01.jpg">
   <p></p>
   <button onclick="changeImg();">更改图片</button>
   <!--<p class="test1"></p>-->
   <script>
       // 更改图片
//  document.getElementById 根据id名找到对应的标签
//  document.getElementsByClassName  根据类名找到对应的标签(注意:elements有多个)
//  document.getElementsByName  根据名称找到对应的标签(注意:elements有多个)
//  document.getElementsByTagName 根据标签名找到对应的标签 (注意:elements有多个)
       var img = document.getElementsByTagName('img')[0];
       console.log(img);

       function changeImg(){
           img.src = 'img/img_02.jpg';
       }
   </script>

</body></html>

 

posted @ 2015-06-22 19:57  Emyin  阅读(154)  评论(0)    收藏  举报