获取元素 

 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>

 

posted @ 2021-11-05 17:22  小小不小阿  阅读(26)  评论(0)    收藏  举报