Element类型和HTML元素获取

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>js_0321作业</title>
        <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            
        </style>
    </head>
    <body>

        <img id="myImg" src="img/ft-top.jpg"/>        
        <input type="button" name="" id="btn1" value="第一题a" />
        <input type="button" name="" id="btn2" value="第二题b" />
        <input type="button" name="" id="btn3" value="第三题c" />
        <input type="button" name="" id="btn4" value="第四题d" />
        <input type="button" name="" id="btn5" value="第五题e" />
        <input type="button" name="" id="btn6" value="第六题f" />
        <input type="button" name="" id="btn7" value="第六题g" />
    </body>
</html>

html部分

 1 window.onload=function(){
 2     //获取myImg元素的标签名
 3     var b1=document.getElementById("btn1");
 4     var myImg=document.getElementById("myImg");
 5     if(myImg.nodeType==1){
 6         b1.onclick=function(){
 7         alert(myImg.tagName);
 8      }
 9     }
10     //获取myImg元素的id值和src的值，并打印输出，并修改src值
11     var b2=document.getElementById("btn2");
12     b2.onclick=function(){
13         alert(myImg.id);
14         alert(myImg.src);
15         alert(myImg.src="img/jddog.gif");
16     }
17     //给myImg元素添加title属性，值为“这是一个图片”
18     var b3=document.getElementById("btn3");
19     b3.onclick=function(){
20         alert(myImg.title="这是一个图片");
21     }
22     //给myImg元素添加“data-id属性”，值为“img001”。
23     var b4=document.getElementById("btn4");
24     b4.onclick=function(){
25     myImg.setAttribute("data-id","myImg001");
26     }
27     
28     //修改“data-id属性”，修改值为“image001”（方法：有则修改，无则指定）
29     var b5=document.getElementById("btn5");
30     b5.onclick=function(){
31     myImg.setAttribute("data-id","myimage001");
32     }
33     
34     var b6=document.getElementById("btn6");
35     b6.onclick=function(){
36         var attrs=myImg.attributes;
37         for(i=0;i<attrs.length;i++){
38             alert(attrs[i].nodeName);
39             alert(attrs[i].nodeValue);
40         }
41     }
42     //删除“data-id”
43     var b7=document.getElementById("btn7");
44     b7.onclick=function(){
45         myImg.removeAttribute("data-id")
46     }
47 }

Element类型和HTML元素获取

推荐阅读