常见的dom操作----原生JavaScript与jQuery

时间:2022-07-07 14:38:18

1.创建元素 文本节点


 

JavaScript:

document.createElement(),只接收一个参数,创建后需要手动将其添加到文档树中,例如:

var newDiv = document.createElement("div");
if(document.body){   document.body.appendChild(newDiv);
}else{
  document.documentElement.appendChild(newDiv);
}

document.createTextNode(),只接收一个参数,即要插入节点的文本;

jquery:直接$("<div></div>),或者下面:

  • wrap()   // $A.wrap('B')即元素A层添加B类型的HTML结果
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$('.inner').wrap('<div class = "new"/>');

结果:
  <div class="container">
    <div class="new">
      <div class="inner">Hello</div>
    </div>
    <div class="new">
      <div class="inner">Goodbye</div>
    </div>
  </div>
  • wrapAll()  //所创建的new <div>包裹了所有匹配的元素:
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$('.inner').wrapAll('<div class="new" />');

 结果: 
  <div class="container">
   <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
   </div>
   </div>
  • wrappInner() // $A.wrapInner('B')即元素A层添加B类型的HTML结果
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
$('.inner').wrapInner('<div class="new" />');

 结果:
  <div class="container">
    <div class="inner">
      <div class="new">Hello</div>
    </div>
    <div class="inner">
      <div class="new">Goodbye</div>
    </div>
  </div>

 

2.节点关系及操作


 

JavaScript:

父节点:parentNode

子节点:childNodes

兄弟节点:nextSibling,previousSibling

相关操作:

  • appendChild()  向子节点列表的末尾添加新的子节点
  • insetBefore()    已有子节点之前插入一个新的子节点
  • replaceChild()  替换节点
  • removeChild()  删除节点
  • cloneNode(true/false)  复制节点

jquery:(比较多选择,详情看http://www.css88.com/jqapi-1.9/手册)

父元素:parent()  parents()

子元素:children()

兄弟节点:next()  nextAll()  prev()  prevAll()  siblings()......

相关操作:

  节点内部插入,插入的内容变子节点

  • append()  appendTo()  向子节点列表的末尾添加新的子节点,注意这两个内容和目标的位置不同,刚好相反
  • prepend() prependTo() 已有子节点之前插入一个新的子节点,注意这两个内容和目标的位置不同,刚好相反

  节点外部插入,插入的内容变兄弟节点

  • after()  before() 
  • insertAfter() insertBefore()
  • replaceAll() replaceWith()  功能类似,但是目标和源相反
  • remove() detach() 这两个相似,都是移除元素,后者不会移除绑定的事件及与该元素相关的jQuery数据
  • empty()  不接受任何参数。不仅移除子元素(和其他后代元素),同样移除元素里的文本
  • clone(flase/true) 深度复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点。和原生JavaScript不同,这里的false/true表示是否会复制元素上的事件处理函数,而原生的表示深克隆还是浅克隆