1. 程式人生 > >牛客練習2018.10.18

牛客練習2018.10.18

 

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() 查詢第一個節點