1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style type="text/css">
7
8
9 li{
10 background: gray;
11 margin-top: 50px;
12 height: 50px;
13 }
14 .active{
15 background: red;
16 }
17 </style>
18
19 </head>
20 <body>
21 <input type="text" name="text" id="" value="测试input" />
22 <img src="img/1.jpg" />
23
24 <div id="box" title="我测试一下">
25 <p class="p1" id="content1">你好么</p>
26 <div id="conten2" class="contentDiv">
27 <ul id="listID" class="listClass">
28 <li class="active">1</li>
29 <li>2</li>
30 <li>3</li>
31 <li>4</li>
32 </ul>
33 </div>
34
35 </div>
36 </body>
37
38 <script type="text/javascript">
39 var box = document.getElementById("box");
40 var p1 = document.getElementById("content1");
41 var content2Div = document.getElementById("conten2");
42 var list = document.getElementById("listID");
43 var liArray = list.getElementsByTagName("li");
44
45 // 1、获取一个元素的 id（也可以修改）
46 console.log(p1.id);
47 p1.id = "pId";
48 console.log(p1.id);
49 // 2、修改 className
50 for (var i = 0;i < liArray.length;i++) {
51 liArray[i].hehehehh = i;
52 }
53
54 for (var i = 0;i < liArray.length;i++) {
55
56 liArray[i].onmouseover = function(){
57 allGray();
58 this.className = "active";
59 // alert(this.hehehehh);
60
61 }
62 }
63 // 实现所有 li 标签变为 gray
64 function allGray(){
65 for(var i = 0;i < liArray.length;i++){
66 liArray[i].className = "";
67 }
68 }
69
70 // 3、获取并且可以修改元素的 title 属性
71
72
73 /*element方法*/
74 //1、获取元素的属性(包括自定义的属性) 如果没有返回 null
75 var img = document.querySelector("img");
76 // 自定义属性
77 img.gadakdhakj = "12121212";
78 var input = document.getElementsByTagName("input")[0];
79 // alert(img.gadakdhakj);
80
81 // 2、设置属性，可以新增属性，也可以给原来的属性设置值
82 img.setAttribute("src","1"); //等价于点语法
83 img.setAttribute("qwerasd","123");
84 alert(img.getAttribute("qwerasd"));
85
86 // 3、删除元素的属性 removeAttribute
87 img.removeAttribute("qwerasd");
88 alert(img.getAttribute("qwerasd"));
89
90
91 </script>
92 </html>