牛客練習2018.10.18
阿新 • • 發佈:2018-11-08
dom 的操作,常用的有哪些,如何建立、新增、移除、移動、複製、查詢節點?
建立:
createDocumentFragment() //建立一個DOM片段
createElement() //建立一個具體的元素
createTextNode() //建立一個文字節點
新增:
appendChild()
移出:
removeChild()
替換:
replaceChild()
插入:
insertBefore()
複製:
cloneNode(true)
查詢:
getElementsByTagName() //通過標籤名稱
getElementsByClassName() //通過標籤名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id,唯一性
原生js: 建立 var h1 = document.createElement("<h1></h1>") 新增 document.appendchild(h1)(頭部新增) document.insertBefore(h1) 移除 document.removechild(h1)(刪除子元素) h1.remove()(刪除自身) 複製 var h = h1.cloneNode() 查詢 childNodes元素節點和文字節點 children元素節點(相容性問題) firstChild獲取第一個節點(文字節點也算)firstElementChild獲取第一個節點(文字節點不算) lastChild獲取最後一個節點(文字節點也算)lastElementChild獲取最後一個節點(文字節點不算) previousSibling獲取上一個節點(文字節點也算)previousElementChild獲取上一個節點(文字節點不算) nextSibling獲取下一個節點(文字節點也算)nextElementSibling獲取下一個節點(文字節點不算) jQuery: 建立 var li = $("<li></li>") 新增 內部新增 append()插入尾 appendTo()插入到尾 prepend()插入頭 prependTo()插入到頭 外部新增 after() insertAfter() before() insertBefore() 移除 remove() html() empty() 複製 clone() 查詢 find()查詢子級 children()查詢子級們 siblings()查詢同級 contents()查詢文字節點 prev()查詢上一級節點 prevAll()查詢上一級節點們 next()查詢下一級節點 nextAll()查詢下一級節點們 $('.xxx') 類選擇器查詢 $('#xxx')id選擇器查詢 $('.xxx xxx')後代選擇器查詢 $('.xxx~xxx')層級選擇器查詢1 $('.xxx+xxx')層級選擇器查詢2 偽類查詢 $('xxx'):first 查詢第一個節點 $('xxx'):last 查詢最後一個節點 $('xxx'):eq(‘下標’)查詢指定節點 $('xxx'):not('.xxx')查詢不含有同級節點 $('xxx'):has('.xxx')查詢含有該節點的元素 $('xxx'):gt('下標')查詢大於指定下標節點 $('xxx'):lt(‘下標’)查詢小於指定下標節點 $('xxx'):odd查詢奇數倍節點 $('xxx'):even 查詢偶數倍節點 jq方法查詢 $('xxx').first() 查詢第一個節點 $('xxx').last() 查詢第一個節點