标签：style console log 元素 li 获取 querySelector document
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>
标签：style,console,log,元素,li,获取,querySelector,document 来源： https://www.cnblogs.com/lvzhnehan/p/15514314.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。