1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 <script>
8 window.onload = function(){
9 //获取元素:
10 //document.getElementById();
11 //document.getElementsByClassName();
12 // document.getElementsByName();
13 //document.getElementsByTagName();
14
15 // document.querySelector();//对象
16 // document.querySelectorAll();//数组
17
18
19 // var li = document.querySelector("#li1");
20 // console.log(li.parentElement.parentElement.parentElement.parentElement);
21 // console.log(li.parentNode.parentNode.parentNode.parentNode);
22
23
24 // var ul = document.querySelector("ul");
25 // console.log(ul.childNodes);//文本节点
26 // console.log(ul.children);//不包括文本节点
27
28 // var li = document.querySelector("#li1");
29 // console.log( li.nextElementSibling);
30 // console.log( li.nextSibling);
31
32 //样式
33 // var li = document.querySelector("#li1");
34 // li.style.color="red";
35 // // li.style.background-color="#ccc";//不能使用短横线,识别不了
36 // // li.style.backgroundColor="#ccc";//第二个字母大写可以识别
37 // li.style["background-color"]="#ccc";//中括号里面加也可以识别
38 // li.style["height"]="90px";//同样这样设置宽高
39
40
41 // //属性 attributes
42 // console.log(li.id);
43 // console.log(li.className);
44 //console.log(li["data-id"]);这样写错误的
45 // console.log(li.attributes["data-id"]) name value //不明白
46
47 //事件 单击事件click 单选\多选状态改变 change <-下拉框选项改变 文本框的值改变
48 //鼠标事件 mouseover mouseout
49 //键盘事件 keydown keypress keyup
50
51 // var btn=document.querySelector("button");
52 // btn.onclick = function(){
53 // console.log(this.value)//交互控件的的值
54
55 // }
56 // var li=document.querySelector("#li1");
57 // li.onclick = function(){
58 // console.log(this.innerHTML)//不含有本身
59
60 // // console.log(this.innerText) text
61
62 // // console.log(this.outerHTML)含有本身
63 // }
64 var select=document.querySelector("select");
65 // select.onclick = function(){
66 // console.log(this.value)//交互控件的的值
67
68 // }
69 select.onchange = function(){
70 console.log(this.value)//交互控件的的值
71
72 }
73 }
74 </script>
75 </head>
76 <body>
77 <!-- <ul>
78 <li id="li1" class="li" data-id="1">哎1<span>8282</span></li>
79 <li>哎2</li>
80 <li>哎3</li>
81 <li>4</li>
82 <li>5</li>
83 </ul> -->
84 <button value="click">单击</button>
85 <!-- size=0或小于0时候都是多选 multiple是可以选中多个-->
86 <select name="" id="" size="3" multiple>
87 <option value="1">选项1</option>
88 <option value="2">选项2</option>
89 <option value="3">选项3</option>
90 </select>
91 </body>
92 </html>