牛客练习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() 查找第一个节点

猜你喜欢