<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>
