22-day

DOM

DOM節(jié)點 就是DOM中html的所有內(nèi)容

?? ?節(jié)點分類:

????? 1.文本節(jié)點?html中的文本內(nèi)容和空格換行?innerText

????? 2.元素節(jié)點? 標簽?getElement...

????? 3.屬性節(jié)點? 標簽中的屬性?getAttribute

獲取div元素的節(jié)點

1. 獲取元素的所有子節(jié)點,返回子節(jié)點的偽數(shù)組

?-語法: .childNodes


2. 獲取元素的所有子元素節(jié)點,返回子元素節(jié)點的偽數(shù)組

? -語法: ?.children


3. 獲取元素的子節(jié)點的第一個節(jié)點

?-語法:.firstChild


4. 獲取元素的最后一個子節(jié)點

? -語法:.lastChild


5. 獲取元素的第一個子元素節(jié)點

? -語法:.firstElementChild

6. 獲取元素的最后一個子元素節(jié)點

?-語法:.lastElementChild


7. 獲取元素的下一個兄弟節(jié)點

???? -語法: .nextSibling


8. 獲取元素的上一個兄弟節(jié)點

? -語法: .previousSibling


9. 獲取元素的下一個兄弟元素節(jié)點

? -語法:.nextElementSibling


10.獲取元素的上一個兄弟元素節(jié)點

? -語法:.previousElementSibling


11.獲取元素的父節(jié)點元素

? -語法:.parentNode


12.獲取元素的所有屬性節(jié)點 返回的是屬性節(jié)點偽數(shù)組

? -語法: .attributes()

節(jié)點屬性:

????? 1.節(jié)點類型? 通過節(jié)點.nodeType 獲取

???? 2.節(jié)點名稱? 通過節(jié)點.nodeName 獲取

???? 3.節(jié)點值??? 通過節(jié)點.nodeValue 獲取

- 節(jié)點類型:元素節(jié)點:1? 屬性節(jié)點:2? 文本節(jié)點:3 注釋節(jié)點:8

? -節(jié)點名稱:元素節(jié)點:標簽元素名稱大寫?? 屬性節(jié)點:屬性名? 文本節(jié)點:#text 注釋節(jié)點:#comment

? -節(jié)點值:元素節(jié)點:null 屬性節(jié)點:屬性值? 文本節(jié)點:文本內(nèi)容本身? 注釋節(jié)點:注釋內(nèi)容

操作DOM節(jié)點,無外乎就是增刪改查

? ????-?獲取頁面中的div元素


1. 創(chuàng)建元素節(jié)點

- 語法:document.createElement(標簽名)

? -返回值:可用的DOM元素節(jié)點


2. 創(chuàng)建文本節(jié)點

? -語法:document.createTextNode(內(nèi)容);

? -返回值:返回一個文本節(jié)點



3. 向元素中添加元素

? -語法:元素A.appendChild(節(jié)點B)

? -將節(jié)點B追加到元素A里面的后面


4. 向元素的前面添加一個元素

? -語法:元素A.insertBefore(節(jié)點B,元素C)

? -將節(jié)點B添加到元素A里面的元素C的前面


5. 移除頁面元素

? -語法:元素A.removeChild(元素B)

? -將元素A中的元素B移除


6. 修改元素邓尤,替換元素

? -語法:元素A.replaceChild(節(jié)點B(替),節(jié)點C(被替))

? -用節(jié)點B替換元素A中的節(jié)點C


7.克隆

? -語法: 元素A.cloneNode(參數(shù))

? -參數(shù)默認是布爾值false ,如果是true則克隆子元素

? -返回值:克隆復制的元素

? 獲取div元素

???? -var div = document.querySelector('div');

?-獲取元素的樣式 style 只能獲取行內(nèi)樣式


1. getComputedStyle() 全能的獲取樣式方法

? -不兼容低版本的IE瀏覽器 IE8以下

??-語法:window.getComputedStyle(元素,參數(shù)).樣式名

? -參數(shù)不寫默認 null, 獲取元素的樣式值


2.curentStyle()

? -可以兼容ie8以下的瀏覽器

? -語法:元素.currentStyle.樣式


獲取元素尺寸

- 內(nèi)容+padding+border

- offsetWidth 寬 offsetHeight 高

?獲取dv元素

? - var dv = document.querySelector('#dv');

? // console.log(dv.offsetWidth);? // 240

? // console.log(dv.offsetHeight); // 230


獲取元素的偏移量

???? ?- offsetLeft offsetTop

1.? 如果元素沒有定位觅赊。則獲取的是相對于頁面的左上角

? // var dv = document.querySelector('#dv');

? // console.log(dv.offsetLeft); // 90

? // console.log(dv.offsetTop); // 10

2. 如果元素有定位华坦,則獲取的是相對父元素左上角的定位

? // var dv = document.querySelector('#dv');

? // console.log(dv.offsetLeft); // 20

? // console.log(dv.offsetTop); // 30

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末贩汉,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子自晰,更是在濱河造成了極大的恐慌剑逃,老刑警劉巖浙宜,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異蛹磺,居然都是意外死亡粟瞬,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進店門萤捆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來裙品,“玉大人俗批,你說我怎么就攤上這事∈性酰” “怎么了岁忘?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長区匠。 經(jīng)常有香客問我干像,道長,這世上最難降的妖魔是什么驰弄? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任麻汰,我火速辦了婚禮,結(jié)果婚禮上揩懒,老公的妹妹穿的比我還像新娘什乙。我一直安慰自己挽封,他們只是感情好已球,可當我...
    茶點故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著辅愿,像睡著了一般智亮。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上点待,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天阔蛉,我揣著相機與錄音,去河邊找鬼癞埠。 笑死状原,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的苗踪。 我是一名探鬼主播颠区,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼通铲!你這毒婦竟也來了毕莱?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤颅夺,失蹤者是張志新(化名)和其女友劉穎朋截,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體吧黄,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡部服,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了拗慨。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片廓八。...
    茶點故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡厦酬,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出瘫想,到底是詐尸還是另有隱情仗阅,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布国夜,位于F島的核電站减噪,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏车吹。R本人自食惡果不足惜筹裕,卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望窄驹。 院中可真熱鬧朝卒,春花似錦、人聲如沸乐埠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽丈咐。三九已至瑞眼,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間棵逊,已是汗流浹背伤疙。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留辆影,地道東北人徒像。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像蛙讥,于是被迫代替她去往敵國和親锯蛀。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,543評論 2 349

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

  • <!DOCTYPE html> Leon 序號 姓名 年齡 性別 ...
    小胖子_d7d8閱讀 186評論 0 0
  • jQuery必會的東西............感覺最近這幾天都懵懵的 還是記錄一下 防止隨著年齡的增長記憶力退化...
    const_express閱讀 213評論 0 3
  • ## 框架和庫的區(qū)別?> 框架(framework):一套完整的軟件設(shè)計架構(gòu)和**解決方案**键菱。> > 庫(lib...
    Rui_bdad閱讀 2,895評論 1 4
  • Vue -漸進式JavaScript框架 介紹 vue 中文網(wǎng) vue github Vue.js 是一套構(gòu)建用戶...
    桂_3d6b閱讀 806評論 0 0
  • 節(jié)點:頁面中的所有內(nèi)容(標簽谬墙,屬性,文本(文字经备,換行拭抬,空格,回車))侵蒙,Node 節(jié)點的相關(guān)屬性:(可以使用標簽--...
    小可_34e0閱讀 109評論 0 0