1慎璧、選擇符API
-
querySelector()
接收一個CSS選擇符胸私,返回與該模式匹配的第一個元素鳖谈,如果沒有找到匹配元素,則返回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()
一樣龄恋,只是返回的是所有匹配元素郭毕,返回一個NodeList
實例
<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'); //接收一個參數(shù)扳肛,表示類名的字符串
console.log(lis.length); //3
3乘碑、插入標記innerHTML
屬性
讀模式下,innerHTML
屬性返回與調(diào)用元素子節(jié)點對應的HTML
標記套腹;寫模式下资铡,innerHTML
屬性根據(jù)指定值創(chuàng)建新的DOM
樹笤休,然后用這個DOM
樹完全替換調(diào)用元素原先的所有子節(jié)點
<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é)點中的空白符有差異,因此出現(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個li元素節(jié)點
console.log(myList.childNodes); //返回除li元素節(jié)點外還有文本節(jié)點
5圣贸、插入文本
通過innerText
屬性可以直接操作元素中包含的文本內(nèi)容扛稽,包括子文檔樹文本;通過該屬性讀取值時用含,會將子文檔樹中的文本拼接起來帮匾;寫入值時瘟斜,結(jié)果會刪除所有子節(jié)點,插入包含相應文本值的文本節(jié)點
<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è)置該屬性前會移除所有先前的子節(jié)點
6蛇尚、樣式
在HTML
中定義樣式的方式有3種:通過<link>
元素包含外部樣式表文件、使用<style>
元素定義嵌入樣式匆笤、用style
特性定義針對特定元素的樣式勇凭;任何支持style
特性的HTML
元素在JS中都有一個對應的style
屬性义辕,但僅包含通過style
特性指定的所有樣式信息,不包含外部樣式表和嵌入樣式表的樣式
<div id="myBox"></div>
var myBox = document.getElementById('myBox');
myBox.style.width = '100px';
myBox.style.height = '100px';
//標準模式要求所有度量值都必須指定單位璧函,混雜模式下可直接寫成'100',瀏覽器會假設(shè)為'100px'善炫,但這種寫法標準模式會因沒有度量單位而直接忽略
myBox.style.backgroundColor = 'red';
//CSS屬性中類似background-color這種帶短橫線寫法的屬性库继,需將其轉(zhuǎn)換為駝峰大小寫形式
7、元素大小
元素的可見大小由高度艺谆、寬度決定拜英,包括所有內(nèi)邊距居凶、滾動條和邊框,不包括外邊距
- 偏移量(只讀屬性):
offsetHeight
侠碧、offsetWidth
指的是元素分別在垂直和水平方向上占用空間大信怠(即可見大小)挨队,以像素計盛垦;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ū)大屑瞻!(只讀屬性):指元素內(nèi)容及其內(nèi)邊距所占據(jù)的空間大小蝶俱,相關(guān)屬性是
clientWidth
、clientHeight
榨呆,滾動條占用空間不計算在內(nèi)
//瀏覽器視口大小
document.body.clientWidth
document.body.clientHeight
- 滾動大小
滾動大小指的是包含滾動內(nèi)容的元素的大小闯割;scrollHeight
、scrollWidth
指的是在沒有滾動條的情況下宙拉,元素內(nèi)容的總高度谢澈,主要用于確定元素的實際大小锥忿;scrollLeft
缎谷、scrollTop
指被隱藏在內(nèi)容區(qū)域左側(cè)和上方的像素數(shù),通過設(shè)置這2個屬性可以改變元素的滾動位置
//元素尚未被滾動的情況下
element.scrollLeft == 0;
element.scrollTop == 0;
//如果元素垂直滾動了瑞你,element.scrollTop會大于0,并且表示元素上方不可見內(nèi)容的像素高度希痴,element.scrollLeft同理