Day10 DOM

自定義屬性及getAttribute方法

  • getAttribute() 獲取特定元素節(jié)點屬性的值,某些低版本瀏覽器不支持.
for(var i=0;i<aLi.length;i++){
                aLi[i].index=i;//js代碼添加自定義的屬性(自定義索引)  在ie8下面能夠看到這個屬性。chrome可以使用但是看不到
            }
  • setAttribute() 設(shè)置特定元素節(jié)點屬性的值绅喉,某些低版本瀏覽器不支持
  • removeAttribute() 移除特定元素節(jié)點屬性劝枣,某些低版本瀏覽器不支持

outerHTML/innerHTML/innerText

  • innerHTML(可讀可寫):獲取和設(shè)置元素節(jié)點里的內(nèi)容誉裆,從對象的起始位置到終止位置的全部內(nèi)容,不包括自身Html 標(biāo)簽勘天。
  • outerHTML:除了包含innerHTML的全部內(nèi)容外, 還包含對象標(biāo)簽本身饰及。
  • innerText:獲取某個網(wǎng)頁元素的文本內(nèi)容(忽略標(biāo)簽龙助,不常用)

DOM元素類型(元素和文本)

  • 節(jié)點可以分為元素節(jié)點砰奕、屬性節(jié)點和文本節(jié)點...,而這些節(jié)點又有三個非常有用的屬性 提鸟,分別為:nodeName(節(jié)點的名稱)军援、nodeType(節(jié)點類型) 和 nodeValue(文本)
  • nodeType:元素(1) 屬性(2) 文本(3)
//children:子元素,獲取元素對象的子元素称勋。類數(shù)組(下標(biāo)和length)
oUl.children.length)//[object HTMLCollection] 4
oUl.children[0];//獲取ul里面第一個元素胸哥。

獲取元素內(nèi)容用innerHTML,表單使用value

childNodes/過濾空白節(jié)點

  • childNodes 獲取當(dāng)前元素節(jié)點的所有子節(jié)點,這里面包含空白節(jié)點赡鲜,在IE9之前烘嘱,IE瀏覽器會自動忽略空白節(jié)點(兼容問題).

高級選取firstChild/lastChild/parentNode/previousSibling/nextSibling

  • firstChild/firstElementChild 獲取當(dāng)前元素節(jié)點的第一個子節(jié)點
    firstChild包含空白節(jié)點
  • lastChild 獲取當(dāng)前元素節(jié)點的最后一個子節(jié)點
  • ownerDocument 獲取該節(jié)點的文檔根節(jié)點(document)
  • document.documentElement 獲取的html標(biāo)簽元素
  • parentNode 獲取當(dāng)前節(jié)點的父節(jié)點
  • previousSibling 獲取當(dāng)前節(jié)點的前一個兄弟節(jié)點
  • nextSibling 獲取當(dāng)前節(jié)點的后一個兄弟節(jié)點

獲取非行內(nèi)樣式

  • offsetWidth昆禽、offsetHeight、offsetLeft蝇庭、offsetTop醉鳖、offsetParent(定位父級)沒有單位
    盒子的偏移值,如果存在定位父級哮内,以父級為基準(zhǔn)盗棵,沒有定位父級以body元素為基準(zhǔn)
    注意,只能獲取北发,不能賦值
    oUl.style.width只能獲取行內(nèi)元素css
    求元素的絕對位置
function getpostion(obj) {
    //存儲最終的值
    var _left = 0;
    var _top = 0;
    while (obj) { //檢測定位父級是否存在
        _left += obj.offsetLeft;
        _top += obj.offsetTop;
        obj = obj.offsetParent; //獲取當(dāng)前元素的定位父級
    }
    return { //結(jié)果返回一個對象纹因,兩個值
        left: _left,
        top: _top
    }
}
  • 獲取選擇器里面的css相關(guān)屬性的值。
    • 標(biāo)準(zhǔn)瀏覽器:getComputedStyle()
    • IE8及其以下瀏覽器:currentStyle()
      兼容操作
function getstyle(obj,attr){
                if(obj.currentStyle){
                    return obj.currentStyle[attr];
                }else{
                    return getComputedStyle(obj)[attr];
                }
            }

文檔碎片(createDocumentFragment)

文檔碎片在理論上可以提高DOM操作的執(zhí)行效率琳拨,將要追加的dom操作先放置在文檔碎片中瞭恰,最后在追加給對應(yīng)的元素。

應(yīng)用

  1. 進(jìn)度條


    進(jìn)度條
  2. 簡易年歷

  3. 自動登錄勾選提示


    勾選提示

綜合應(yīng)用

1.點擊按鈕換圖片
2.tab切換案例
3.?dāng)U展案例: QQ延遲提示框狱庇,兩個盒子兄弟關(guān)系惊畏,中間有空隙。
4.?dāng)U展案例: 密碼強(qiáng)度
5.?dāng)U展案例: 求一個盒子的絕對位置密任。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末颜启,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子浪讳,更是在濱河造成了極大的恐慌缰盏,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,039評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件淹遵,死亡現(xiàn)場離奇詭異口猜,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)透揣,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評論 3 395
  • 文/潘曉璐 我一進(jìn)店門暮的,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人淌实,你說我怎么就攤上這事冻辩。” “怎么了拆祈?”我有些...
    開封第一講書人閱讀 165,417評論 0 356
  • 文/不壞的土叔 我叫張陵恨闪,是天一觀的道長。 經(jīng)常有香客問我放坏,道長咙咽,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,868評論 1 295
  • 正文 為了忘掉前任淤年,我火速辦了婚禮钧敞,結(jié)果婚禮上蜡豹,老公的妹妹穿的比我還像新娘。我一直安慰自己溉苛,他們只是感情好镜廉,可當(dāng)我...
    茶點故事閱讀 67,892評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著愚战,像睡著了一般娇唯。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上寂玲,一...
    開封第一講書人閱讀 51,692評論 1 305
  • 那天塔插,我揣著相機(jī)與錄音,去河邊找鬼拓哟。 笑死想许,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的断序。 我是一名探鬼主播流纹,決...
    沈念sama閱讀 40,416評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼逢倍!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起景图,我...
    開封第一講書人閱讀 39,326評論 0 276
  • 序言:老撾萬榮一對情侶失蹤较雕,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后挚币,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體亮蒋,經(jīng)...
    沈念sama閱讀 45,782評論 1 316
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,957評論 3 337
  • 正文 我和宋清朗相戀三年妆毕,在試婚紗的時候發(fā)現(xiàn)自己被綠了慎玖。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,102評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡笛粘,死狀恐怖趁怔,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情薪前,我是刑警寧澤润努,帶...
    沈念sama閱讀 35,790評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站示括,受9級特大地震影響铺浇,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜垛膝,卻給世界環(huán)境...
    茶點故事閱讀 41,442評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧贺待,春花似錦佛玄、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至桶雀,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間唬复,已是汗流浹背矗积。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留敞咧,地道東北人棘捣。 一個月前我還...
    沈念sama閱讀 48,332評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像休建,于是被迫代替她去往敵國和親乍恐。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,044評論 2 355

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

  • 函數(shù)封裝呜投,就一句話:相同的,重復(fù)存璃,封起來仑荐;不同的,要改的纵东,傳進(jìn)去 DOM(文檔對象模型) 我們的JS分為三個部分組...
    AnnQi閱讀 203評論 0 0
  • 一粘招、基本概念 1.1、DOM DOM是JS操作網(wǎng)頁的接口偎球,全稱為“文檔對象模型”(Document Object ...
    周花花啊閱讀 3,176評論 0 6
  • 節(jié)點 節(jié)點類型 每個節(jié)點都有一個 nodeType 屬性洒扎,用于表示節(jié)點類型。nodeType 屬性返回節(jié)點的類型衰絮。...
    練曉習(xí)閱讀 448評論 0 4
  • 今天繼續(xù)了UG畫圖逊笆,幾個透鏡和初步的鏡筒。還需努力練習(xí)岂傲,不盡如人意难裆。
    王集是個好小伙閱讀 86評論 0 0
  • 前幾天和一個已婚多年的朋友聊天,已近七年之癢的他,言語中無不充滿了絕望乃戈。 曾經(jīng)的相擁而眠變成了現(xiàn)在背對背的不理不睬...
    土子閱讀 831評論 0 0