0514JS操作document对象、事件、（this）

|js操作document对象
|-找到对象
|--document.getElementById("id名"); 通过id名找到唯一的对象

var duixiang = document.getElementById("first");
console.log(duixiang);

|--document.getElementsByClassName("class名")[0]; 通过class名找到同名对象的集合，再通过索引找到每一项

var duixiang = document.getElementsByClassName("second");
var duixiang = document.getElementsByClassName("second")[0];
console.log(duixiang);

|--document.getElementsByName("name名")[0]; 通过name名找到同名对象的集合，再通过索引找到每一项

var duixiang = document.getElementsByName("third");
var duixiang = document.getElementsByName("third")[0];
console.log(duixiang);

|--document.getElementsByTagName("标签名")[0]; 通过标签名找到所有相同标签的集合，再通过索引找到每一项

var duixiang = document.getElementsByTagName("div");
var duixiang = document.getElementsByTagName("div")[0];
console.log(duixiang);

|--document.querySelector("#id名"); 通过id选择器找到唯一的对象

var duixiang = document.querySelector("#first");
console.log(duixiang);

|--document.querySelector(".class名"); 通过class选择器找到class名同的对象的集合的第一项

var duixiang = document.querySelector(".second");
console.log(duixiang);

|--document.querySelectorAll".class名")[0]; 通过class选择器找到class名同的对象的集合，再通过索引找到每一项

var duixiang = document.querySelectorAll(".second")[0];
var duixiang = document.querySelectorAll(".second");
console.log(duixiang);

|-操作对象  通过.选择
|--操作内容
|----操作表单内容：value=""

var biaodan = document.getElementsByTagName("input")[0];
biaodan.value = "给value加属性值";

|----操作非表单内容：innerHTML=""、innerText=""

var biaodan = document.getElementsByTagName("input")[0];
biaodan.value = "给value加属性值";
var feibiaodan = document.getElementById("first");
feibiaodan.innerText = "innerText<br />不可以解析标签"

innerHTML可以解析标签

|--操作样式
|----改变标签的样式：style.样式名 =""

#first{
     200px;
    height: 200px;
    background-color: green;
    border-radius: 10px;
    color: blue;
    text-align: center;
    line-height: 200px;
}
var yangshi = document.querySelector("#first");
yangshi.style.width = "300px";
yangshi.style.height = "300px";
yangshi.style.backgroundColor = "yellow";
yangshi.style.marginLeft = "100px";