//window.onload=function(){
// document.getElementById();
// document.getElementsByClassName();
// document.getElementsByName();
// document.getElementsByTagName();
// document.querySelector();对象
// document.querySelectorAll();数组
// var li = document.querySelector("#li1");
// console.log(li.parentElement.parentElement.parentElement);
// console.log(li.parentNode.parentNode.parentNode.parentNode);
// var ul =document.querySelector("ul");
// console.log(ul.childNodes);文本节点
// console.log(ul.children);不包括文本节点
// var li = document.querySelector("#li1");
//console.log(li.nextElementSibling)//获取下个元素节点
//console.log(li.previousElementSibling)//获取上一个元素节点
//console.log(li.nextSibling())//文本节点
//样式 style
//var li = document.querySelector("#li1");
// li.style.color="red";
// // li.style.background-color="#ccc";
// // li.style.bagroundColor="#ccc";
// li.style["background-color"]="#ccc";
//属性 attributes
// console.log(li.id);
// console.log(li.data-id); 错误的
// console.log(li["data-id"]);
//console.log(li.attributes["data-id"].value); name获取属性名 value 获取属性
// 得使用attributes来获取属性
//console.log(li.className);
//事件
// *click 单击
//*change 改变 经常用在单选、多选状态改变得时候触发 下拉框选项改变触发 文本框的值改变时触发
//*mouseover 鼠标移入
//*mouseout 移出
//keydowm
//*keypress
//keyup
// var btn=document.querySelector("button");
// btn.noclick=function(){
// //console.log(this.value) 交互控件的值 表单元素
// }
// var li =document.querySelector("#li1");
// li.onclick=function(){
// // console.log(this.innerHTML);//获取里面所有的内容
// // console.log(this.innerText);//获取元素或子元素内容标签内容
// console.log(this.outerHTML);//获取含有本身标签
// }
//var select=document.querySelector("select");
// select.onclick=function(){
// console.log(this.value); 不会改变值
// }
//select.onchange=function(){
// console.log(this.value); //经常用onchange会改变值不会浪费资源
//}
<body>
<!-- ul>li{列表$}*5 -->
<!-- <ul>
<li id="li1" class="li" data-id="0">liebiao1</li>
<li>liebiao2</li>
<li>liebiao3</li>
<li>liebiao4</li>
<li>liebiao5</li>
</ul>
<button value="click">单击</button> -->
<!-- size="" multiple多选 -->
<!-- <select name="" id="" >
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select> -->
<body/>
浙公网安备 33010602011771号