Document 对象
常用的四种方法
document.getElementById(); 返回对拥有指定 id 的第一个对象的引用。
document.getElementsByClassName(); 返回文档中所有指定类名的元素集合。
document.getElementsByName; 返回带有指定名称的对象集合。
document.getElementsByTagName; 返回带有指定标签名的对象集合。
document.querySelector(); 返回文档中匹配指定 CSS 选择器的一个元素
document.querySelectorAll(); 方法返回文档中匹配指定 CSS 选择器的所有元素数组
var li=document.querySelector("#li1");
li.parentElement.style.color="red";
console.log(li.parentElement); 返回父元素
console.log(li.parentNode); 返回某节点的父节点
这两者之间唯一区别是
parentElement最外层返回的是null
parentNode最外层返回的是#document
样式
var li=document.querySelector("#li1");
console.log(li.nextElementSibling); 只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）
console.log(li.previousElementSibling); 只返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点）
console.log(li.nextSibling); 返回元素节点之后的兄弟节点（包括文本节点、注释节点）
console.log(li.previousSibling); 返回元素节点之前的兄弟节点（包括文本节点、注释节点）
var li=document.querySelector("#li1");
li.style.color="red";
如果这样使用 li.style.background-color="blue"; 会报错
li.style.backgroundColor="blue"; //驼峰命名法 第二个单词首字母大写
li.style["background-color"]="green"; //使用数组
<ul>
<li id="li1" data-id="0" class="li">列表1<span>999</span></li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
属性 attributes
console.log(li.id);
console.log(li.className);
console.log(li.attributes["data-id"]); name value
获取非原始属性的值 li.attributes["data-id"].values
事件/方法
click 单击
change 单选、多选状态改变 下拉框选项改变 文本框的值改变
mouseover 鼠标移入
mouseout 鼠标移出
keypress 键盘按下松开
keydown 键盘按下
keyup 键盘松开
var btn=document.querySelector("button");
btn.onclick=function(){
console.log(this.value); 交互控件的值
}
var select=document.querySelector("select");
select.onclick=function(){
console.log(this.value); 单选框当前的值
}
单选框使用最多是onchange事件 值改变才会改变
select.onchange=function(){
console.log(this.value);
}
<button value="0">单机</button>
<select name="" id="">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>