DOM擴展

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指的是元素分別在垂直和水平方向上占用空間大信怠(即可見大小)挨队,以像素計盛垦;offsetTopoffsetLeft表示元素邊框至包含元素內(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)屬性是clientWidthclientHeight榨呆,滾動條占用空間不計算在內(nèi)
//瀏覽器視口大小
document.body.clientWidth
document.body.clientHeight
  • 滾動大小
    滾動大小指的是包含滾動內(nèi)容的元素的大小闯割;scrollHeightscrollWidth指的是在沒有滾動條的情況下宙拉,元素內(nèi)容的總高度谢澈,主要用于確定元素的實際大小锥忿;scrollLeft缎谷、scrollTop指被隱藏在內(nèi)容區(qū)域左側(cè)和上方的像素數(shù),通過設(shè)置這2個屬性可以改變元素的滾動位置
//元素尚未被滾動的情況下
element.scrollLeft == 0;
element.scrollTop == 0;
//如果元素垂直滾動了瑞你,element.scrollTop會大于0,并且表示元素上方不可見內(nèi)容的像素高度希痴,element.scrollLeft同理
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末者甲,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子砌创,更是在濱河造成了極大的恐慌虏缸,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,919評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件嫩实,死亡現(xiàn)場離奇詭異刽辙,居然都是意外死亡,警方通過查閱死者的電腦和手機甲献,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來晃洒,“玉大人慨灭,你說我怎么就攤上這事∏蚣埃” “怎么了氧骤?”我有些...
    開封第一講書人閱讀 163,316評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長吃引。 經(jīng)常有香客問我筹陵,道長刽锤,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,294評論 1 292
  • 正文 為了忘掉前任惶翻,我火速辦了婚禮姑蓝,結(jié)果婚禮上鹅心,老公的妹妹穿的比我還像新娘吕粗。我一直安慰自己,他們只是感情好旭愧,可當我...
    茶點故事閱讀 67,318評論 6 390
  • 文/花漫 我一把揭開白布颅筋。 她就那樣靜靜地躺著,像睡著了一般输枯。 火紅的嫁衣襯著肌膚如雪议泵。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,245評論 1 299
  • 那天桃熄,我揣著相機與錄音先口,去河邊找鬼。 笑死瞳收,一個胖子當著我的面吹牛碉京,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播螟深,決...
    沈念sama閱讀 40,120評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼谐宙,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了界弧?” 一聲冷哼從身側(cè)響起凡蜻,我...
    開封第一講書人閱讀 38,964評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎垢箕,沒想到半個月后划栓,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,376評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡条获,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,592評論 2 333
  • 正文 我和宋清朗相戀三年茅姜,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片月匣。...
    茶點故事閱讀 39,764評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡钻洒,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出锄开,到底是詐尸還是另有隱情素标,我是刑警寧澤,帶...
    沈念sama閱讀 35,460評論 5 344
  • 正文 年R本政府宣布萍悴,位于F島的核電站头遭,受9級特大地震影響寓免,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜计维,卻給世界環(huán)境...
    茶點故事閱讀 41,070評論 3 327
  • 文/蒙蒙 一袜香、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧鲫惶,春花似錦蜈首、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至赏淌,卻和暖如春踩寇,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背六水。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評論 1 269
  • 我被黑心中介騙來泰國打工俺孙, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人掷贾。 一個月前我還...
    沈念sama閱讀 47,819評論 2 370
  • 正文 我出身青樓睛榄,卻偏偏與公主長得像,于是被迫代替她去往敵國和親胯盯。 傳聞我的和親對象是個殘疾皇子懈费,可洞房花燭夜當晚...
    茶點故事閱讀 44,665評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 1. 選擇符API 根據(jù)CSS選擇符選擇與某個模式匹配的DOM元素。Selectors API的核心方法:quer...
    xiaoguo16閱讀 422評論 0 0
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品博脑,去做同樣的事情憎乙,實現(xiàn)同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,752評論 2 17
  • 本章內(nèi)容 理解 Selectors API 使用 HTML5 DOM 擴展 了解專有的 DOM 擴展 對 DOM ...
    悶油瓶小張閱讀 575評論 0 0
  • 只是象征性地作了個紀念 沒有美酒叉趣,沒有豐盈的體態(tài)泞边,沒有悄然滋生的誘惑 我乘時光之船 駛進暗夜的胡同 一首蓄謀已久的...
    嶺南讀夫閱讀 218評論 0 1
  • 我的心靈寄托,是父母的愛疗杉。 所以我不能接受阵谚,他們不愛我。 我努力地為媽媽排憂解難烟具,想用愛去...
    陳嘉媛閱讀 97評論 1 1