1、選擇符API

• querySelector()接收一個(gè)CSS選擇符，返回與該模式匹配的第一個(gè)元素，如果沒有找到匹配元素，則返回null

<div class="myDiv">1</div>
<div class="myDiv">2</div>
<div class="myDiv">3</div>

var myDiv = document.querySelector(".myDiv");     //通過Document調(diào)用該方法，在文檔元素范圍內(nèi)查找
console.log(myDiv.innerHTML);            //1

<ul id="myList">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
</ul>

var ul = document.getElementById("myList");
var li = ul.querySelector(".item");       //通過Element類型調(diào)用只在其后代元素范圍內(nèi)查找
console.log(li.innerHTML);                //1

• querySelectorAll()接收的參數(shù)與querySelector()一樣，只是返回的是所有匹配元素，返回一個(gè)NodeList實(shí)例

<div class="myDiv">1</div>
<div class="myDiv">2</div>
<div class="myDiv">3</div>

var myDiv = document.querySelectorAll(".myDiv");
console.log(myDiv.length);                 //3
console.log(myDiv[2].innerHTML);           //3

<ul id="myList">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
</ul>

var ul = document.getElementById("myList");
var li = ul.querySelectorAll(".item");
console.log(li.length);                    //3
console.log(li[1].innerHTML);              //2

2、通過類名獲取getElementsByClassName()

<ul id="myList">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
</ul>

var lis = document.getElementsByClassName('item');       //接收一個(gè)參數(shù)，表示類名的字符串
console.log(lis.length);        //3

3、插入標(biāo)記innerHTML屬性

讀模式下，innerHTML屬性返回與調(diào)用元素子節(jié)點(diǎn)對(duì)應(yīng)的HTML標(biāo)記；寫模式下，innerHTML屬性根據(jù)指定值創(chuàng)建新的DOM樹，然后用這個(gè)DOM樹完全替換調(diào)用元素原先的所有子節(jié)點(diǎn)

<ul id="myList">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
</ul>

var myList = document.getElementById('myList');
var myListInnerHTML = myList.innerHTML;
console.log(myListInnerHTML);               
//返回字符串
//<li class="item">1</li>
//<li class="item">2</li>
//<li class="item">3</li>

var myList = document.getElementById('myList');
myList.innerHTML = '<li class="item">3</li>'; 
console.log(myList.innerHTML);                //<li class="item">3</li>，寫模式下，重新設(shè)置
myList.innerHTML = "hello world";   
console.log(myList.innerHTML);              //hello world，如果設(shè)置的是純文本，那結(jié)果就是設(shè)置純文本

4、children屬性

由于IE9之前的版本和其他瀏覽器處理文本節(jié)點(diǎn)中的空白符有差異，因此出現(xiàn)了children屬性

<ul id="myList">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
</ul>

var myList = document.getElementById('myList');
console.log(myList.children);                //返回3個(gè)li元素節(jié)點(diǎn)
console.log(myList.childNodes);          //返回除li元素節(jié)點(diǎn)外還有文本節(jié)點(diǎn)

5、插入文本

通過innerText屬性可以直接操作元素中包含的文本內(nèi)容，包括子文檔樹文本；通過該屬性讀取值時(shí)，會(huì)將子文檔樹中的文本拼接起來；寫入值時(shí)，結(jié)果會(huì)刪除所有子節(jié)點(diǎn)，插入包含相應(yīng)文本值的文本節(jié)點(diǎn)

<ul id="myList">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
</ul>

var myList = document.getElementById('myList');
console.log(myList.innerText);
//返回
//1
//2
//3

var myList = document.getElementById('myList');
myList.innerText = "hello";
console.log(myList.innerText);           //hello；設(shè)置該屬性前會(huì)移除所有先前的子節(jié)點(diǎn)

6、樣式

在HTML中定義樣式的方式有3種：通過<link>元素包含外部樣式表文件、使用<style>元素定義嵌入樣式、用style特性定義針對(duì)特定元素的樣式；任何支持style特性的HTML元素在JS中都有一個(gè)對(duì)應(yīng)的style屬性，但僅包含通過style特性指定的所有樣式信息，不包含外部樣式表和嵌入樣式表的樣式

<div id="myBox"></div>

var myBox = document.getElementById('myBox');
myBox.style.width = '100px';
myBox.style.height = '100px';
//標(biāo)準(zhǔn)模式要求所有度量值都必須指定單位，混雜模式下可直接寫成'100'，瀏覽器會(huì)假設(shè)為'100px'，但這種寫法標(biāo)準(zhǔn)模式會(huì)因沒有度量單位而直接忽略
myBox.style.backgroundColor = 'red';         
//CSS屬性中類似background-color這種帶短橫線寫法的屬性，需將其轉(zhuǎn)換為駝峰大小寫形式

7、元素大小

元素的可見大小由高度、寬度決定，包括所有內(nèi)邊距、滾動(dòng)條和邊框，不包括外邊距

• 偏移量（只讀屬性）：offsetHeight、offsetWidth指的是元素分別在垂直和水平方向上占用空間大?。纯梢姶笮。?，以像素計(jì)；offsetTop、offsetLeft表示元素邊框至包含元素內(nèi)邊框之間的像素距離

<div id="myBox"></div>

var myBox = document.getElementById('myBox');
myBox.style.width = '100px';
myBox.style.height = '100px';
myBox.style.backgroundColor = 'red';
console.log(myBox.offsetHeight);                       //100
console.log(myBox.offsetLeft);                         //8

• 客戶區(qū)大?。ㄖ蛔x屬性）：指元素內(nèi)容及其內(nèi)邊距所占據(jù)的空間大小，相關(guān)屬性是clientWidth、clientHeight，滾動(dòng)條占用空間不計(jì)算在內(nèi)

//瀏覽器視口大小
document.body.clientWidth
document.body.clientHeight

• 滾動(dòng)大小
  滾動(dòng)大小指的是包含滾動(dòng)內(nèi)容的元素的大?。?code>scrollHeight、scrollWidth指的是在沒有滾動(dòng)條的情況下，元素內(nèi)容的總高度，主要用于確定元素的實(shí)際大??；scrollLeft、scrollTop指被隱藏在內(nèi)容區(qū)域左側(cè)和上方的像素?cái)?shù)，通過設(shè)置這2個(gè)屬性可以改變?cè)氐臐L動(dòng)位置

//元素尚未被滾動(dòng)的情況下
element.scrollLeft == 0;
element.scrollTop == 0;
//如果元素垂直滾動(dòng)了，element.scrollTop會(huì)大于0，并且表示元素上方不可見內(nèi)容的像素高度，element.scrollLeft同理