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

Posted 2020-10-04 自行脑补

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表示是否会复制元素上的事件处理函数，而原生的表示深克隆还是浅克隆