|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{
    width: 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";

|----改變標簽的名稱,標簽直接變為另一個名稱的樣式：className=""

.second{
    width: 200px;
    height: 200px;
    background-color: green;
    border-radius: 10px;
    color: blue;
    text-align: center;
    line-height: 200px;
    float: left;
}
.fourth{
    width: 300px;
    height: 300px;
    background-color: yellow;
    border-radius: 100px;
    color: blue;
    text-align: center;
    line-height: 200px;
    margin-top: 100px;
    float: left;
}
var yangshi = document.querySelector(".second");
yangshi.className = "fourth";

|--操作屬性
|----通過屬性名獲取屬性：getAttribute("屬性名");

<div class="second" name="third" ></div>
var huoqu = document.querySelector(".second");
console.log(huoqu.getAttribute("name"))

|----改變屬性名和屬性值：setAttribute("屬性名"，"屬性值");

<input type="checkbox" name="" id="" value="" />張店
<input type="checkbox" name="" id="" value="" />臨淄
<input type="checkbox" name="" id="" value="" />周村
<input type="checkbox" name="" id="" value="" />全選
var gaibian = document.getElementsByTagName("input")[1];
gaibian.setAttribute("checked","checked")

|----通過刪除屬性名來刪除標簽的屬性：removeAttribute("屬性名");

<div id="" style="" aa="" bb=""></div>
var shanchu = document.getElementsByTagName("div")[0];
shanchu.removeAttribute("aa");
console.log(shanchu);

|事件
|-常用事件
|--點擊事件:onclick
|--鼠標按下事件：onmousedown
|--鼠標彈起事件：onmouseup
|--內容改變事件：onchange
|--失去焦點事件：onblur
|--得到焦點事件：onfocus
|--鼠標移入事件：onmouseover
|--鼠標移出事件：onmouseout
|-給元素加事件的方法
|--在標簽元素內部添加事件
|----事件調用函數：<標簽名 事件名="函數名()"></標簽名>
|--通過循環給多個元素添加事件
|----獲取對象元素，通過時間給元素添加函數：對象值.事件名=匿名函數(one[i].onclick = function(){})

|this關鍵詞

|-先獲取對象attr，不可是集合

|-此時this.就是attr.

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