// document.querySelector();对象 // document.querySelectorAll();数组
// var li=document.querySelector("#li1"); // li.parentElement.style.color="red"; // console.log(li.parentElement) // console.log(li.parentNode) // var ul=document.querySelector("ul"); // console.log(ul.children) 文本节点 // console.log(ul.childNodes) 不包括文本节点 // var li =document.querySelector("#li1"); // console.log(li.nextElementSibling) // console.log(li.previousElementSibling)
//样式 style // var li =document.querySelector("#li1"); // li.style.color="red"; // 不能用 ‘ - ’ 链接(去掉‘ - ’,在原‘ - ’后面的首字母大写) 驼峰命名法 // li.style.backgroundColor="#333"; // li.style["background-color"]="#333"; //属性 attributes (作用于非原始属性) // console.log(li.id); // console.log(li.className); //console.log(li.dataId);不行 // console.log(li.attributes["data-id"].name) name获取的是名字 value获取的是值 // console.log(li.attributes["id2"])
// 事件 (事件名称前加on) //* click 点击 //* change 单选,多选状态改变 下拉框选项改变 文本框的值改变 //* mouseover //* mouseout // keydown //* keypress // keyup // var btn=document.querySelector("button") // btn.onclick=function(){ //console.log(this.value) // 交互控件的值 // } // var li=document.querySelector("li1") // li.onclick=function(){ //console.log(this.innerText);//获取内容 //console.log(this.innerHTML);//获取标签内所有内容 //console.log(this.outerText);//含有本身 // } var select=document.querySelector("select"); // select.onclick=function(){ // console.log(this.value); // } select.onchange=function(){ console.log(this.value); }