DOM動態(tài)解析的關鍵

加入一個元素中追加了2個文本節(jié)點 可以通過normalize()方法合并二個文本節(jié)點
splitText()可以分割子節(jié)點 一個文本節(jié)點分割成2 個 傳入分割下標根據(jù)字符來算


nodeList 其近親 NamedNodeMap HTMLCollection 都是整體上解析DOM的關鍵所在

這三個集合都是動態(tài)的 當文檔發(fā)生變化實時更新的 所以他們的信息都是最新的


HTMLCollection 是一個接口,表示 HTML 元素的集合,它提供了可以遍歷列表的方法和屬性

3者區(qū)別

var divs = document.getElementsByTagName("div");
alert(divs instanceof HTMLCollection); //true (chrome中返回false序六,divs是NodeList對象)

var div = document.getElementById("div1")

var children = div.childNodes; //獲取div元素子節(jié)點集合
alert(children instanceof NodeList); //true

var attrs = div.attributes; //獲取div元素的特性
1 alert(children instanceof NamedNodeMap); //true

以上代碼中挪凑,chrome下的document.getElementsByTagName("div")將返回NodeList對象批销。

這三個對象都是“類數(shù)組”戈次,可以獲取他們的length耸彪,也可以通過 attrs[0] 獲取數(shù)據(jù),有點類似與函數(shù)里面的arguments栈雳。

NamedNodeMap和Attr
div.attrbutes將返回一個NamedNodeMap對象护奈,即NamedNodeMap存儲是的div的“特性Attribute”集合。而集合中的每一個元素哥纫,都是Attr類型的對象霉旗。Attr對象有三個屬性,name蛀骇、value和specified厌秒。

但是在日常應用中,一般會應用getAttribute()松靡、setAttribute()和romoveAttribute()來操作特性简僧,不需要直接訪問特性對象

為什么說他們是動態(tài)的來看看這個

       var divs = document.getElementsByTagName("div"),
            i,
            div;
        for (i = 0; i < divs.length; i++) {
            div = document.createElement("div");
            document.body.appendChild(div);
        }

總結一下就是說前面2個是獲取的元素存在NodeList 或者HTMLCollection中 而最后一個是屬性集合

擴展選擇器

selectors API Level 1 原聲的API 可以提高性能的選擇器
querySelector()單個元素第一個
querySelectorAll() 回去所有返回NodeLIst
selectors API Level 2
matchesSelector()判斷是否匹配 支持不好 需要加前綴msmatchesSelector()
mozmatchesSelector()
webkitmatchesSelector()

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市雕欺,隨后出現(xiàn)的幾起案子岛马,更是在濱河造成了極大的恐慌,老刑警劉巖屠列,帶你破解...
    沈念sama閱讀 212,222評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件啦逆,死亡現(xiàn)場離奇詭異,居然都是意外死亡笛洛,警方通過查閱死者的電腦和手機夏志,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,455評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來苛让,“玉大人沟蔑,你說我怎么就攤上這事∮埽” “怎么了瘦材?”我有些...
    開封第一講書人閱讀 157,720評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長仿畸。 經(jīng)常有香客問我食棕,道長,這世上最難降的妖魔是什么错沽? 我笑而不...
    開封第一講書人閱讀 56,568評論 1 284
  • 正文 為了忘掉前任簿晓,我火速辦了婚禮,結果婚禮上千埃,老公的妹妹穿的比我還像新娘憔儿。我一直安慰自己,他們只是感情好放可,可當我...
    茶點故事閱讀 65,696評論 6 386
  • 文/花漫 我一把揭開白布谒臼。 她就那樣靜靜地躺著唱逢,像睡著了一般。 火紅的嫁衣襯著肌膚如雪屋休。 梳的紋絲不亂的頭發(fā)上坞古,一...
    開封第一講書人閱讀 49,879評論 1 290
  • 那天,我揣著相機與錄音劫樟,去河邊找鬼痪枫。 笑死,一個胖子當著我的面吹牛叠艳,可吹牛的內容都是我干的奶陈。 我是一名探鬼主播,決...
    沈念sama閱讀 39,028評論 3 409
  • 文/蒼蘭香墨 我猛地睜開眼附较,長吁一口氣:“原來是場噩夢啊……” “哼吃粒!你這毒婦竟也來了?” 一聲冷哼從身側響起拒课,我...
    開封第一講書人閱讀 37,773評論 0 268
  • 序言:老撾萬榮一對情侶失蹤徐勃,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后早像,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體僻肖,經(jīng)...
    沈念sama閱讀 44,220評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,550評論 2 327
  • 正文 我和宋清朗相戀三年卢鹦,在試婚紗的時候發(fā)現(xiàn)自己被綠了臀脏。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,697評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡冀自,死狀恐怖揉稚,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情熬粗,我是刑警寧澤搀玖,帶...
    沈念sama閱讀 34,360評論 4 332
  • 正文 年R本政府宣布,位于F島的核電站荐糜,受9級特大地震影響巷怜,放射性物質發(fā)生泄漏葛超。R本人自食惡果不足惜暴氏,卻給世界環(huán)境...
    茶點故事閱讀 40,002評論 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望绣张。 院中可真熱鬧答渔,春花似錦、人聲如沸侥涵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,782評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至务豺,卻和暖如春磨总,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背笼沥。 一陣腳步聲響...
    開封第一講書人閱讀 32,010評論 1 266
  • 我被黑心中介騙來泰國打工蚪燕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人奔浅。 一個月前我還...
    沈念sama閱讀 46,433評論 2 360
  • 正文 我出身青樓馆纳,卻偏偏與公主長得像,于是被迫代替她去往敵國和親汹桦。 傳聞我的和親對象是個殘疾皇子鲁驶,可洞房花燭夜當晚...
    茶點故事閱讀 43,587評論 2 350

推薦閱讀更多精彩內容

  • 除了document對象,在DOM中最常用的就是Element對象了舞骆,Element對象表示HTML元素钥弯。 Ele...
    Alkaidx閱讀 868評論 0 0
  • 轉載請聲明出處 博客原文 隨手翻閱以前的學習筆記,順便整理一下放在這里督禽,方便自己復習寿羞,也希望你有也有幫助吧 第一課...
    程序員poetry閱讀 12,645評論 13 94
  • 本章內容 理解包含不同層次節(jié)點的 DOM 使用不同的節(jié)點類型 克服瀏覽器兼容性問題及各種陷阱 DOM 是針對 HT...
    悶油瓶小張閱讀 629評論 0 1
  • 問題 1.dom對象的innerText和innerHTML有什么區(qū)別绪穆? innerText: 當使用innerT...
    饑人谷_任磊閱讀 622評論 0 1
  • 前天去朋友家吃飯,進門溫暖虱岂,四周沙發(fā)簡單溫馨玖院,中間的一個燒煤爐子吸引了我所有的注意。爐子里火苗正旺第岖,爐蓋已經(jīng)泛紅难菌,...
    Mikey米客閱讀 677評論 0 1