原生JS，JQuery，Vue，React中的Dom操作

觉得不错的 可以点赞，收藏一下谢谢

1 . 获取Dom元素

<div id ="A' style=""></div>
div  --->dom元素
id style 这些是  属性

原生的就就不写了

1.1JQ中

$('div')//dom
$('#a')//id
$('.a')//class
$('div')eq(1) //而且eq（1）数组中第2个元素

1.2Vue中

1.在指定元素上，添加ref=“名称A”，在获取的地方加入 this.$refs.名称A

<div ref='A'></div>
<button @click = "one">按钮</button>

methods:{
one(){
console.log(this.$refs.A)
}

2.还有一种费劲的方法 用于传值

1.3 React中

1.ref
在指定元素上，添加ref=“名称A”，
在获取的地方加入 this.refs.名称A

<div ref='A'></div>
获取时
this.refs.A

2.target
获取执行事件的dom节点 target （不常用）

<div onclick="this.A"></div>
A(event){
event.target //这个就是div的dom元素了
}

2 元素节点操作

注：原生js：能够在所用框架中调用，
Vue 跟 React 都是虚拟dom ，所以不怎么用元素节点操作或者属性节点，但是都能够调用原始JS ,也能够调用JQ

2.1 原JS 元素节点

** 1） appendChild**

尾添加

1.创建 span标签
var node = document.createElement("span");
2.添加
获取的dom.appendChild(node); 
//前两部已经实现  下面试插入文本
1.创建文本
var otext = document.createTextNode("文本内容");
2.插入
node.appendChild(otext);

2） insertAfter

在一个元素之前插入

把DomA插入到DomB的前面
  父dom.insertAfter(DomA,DomB);
  

3） replaceChild

替换

DomA替换掉DomB
父dom.replaceChild(DomA,DomB)

4） cloneNode

克隆

DomA被克隆的元素
	DomA.cloneNode();         只是复制了  还要在插入一下才能显示
	参数  ture  false  
	ture  会复制 ， innerHTML(文本内容)		
	
	获取的dom.appendChild(DomA.cloneNode()); 		

5） removeChild

删除

父Dom.removeChild(DomA);

2.2JQuery 元素节点

1）append

尾部添加

$("div").append("< b>追加文本</b>"); 
	可添加标签或者不添加标签
	注： 在react 与vue 中不能添加标签

2）prepend

头部插入

$("p").prepend("<b>在开头追加文本</b>。 ");

3）before

在被选中的元素之前插入

 $("img").before("<b>之前</b>");

4）after

在被选中的元素之后插入

 $("img").after("<i>之后</i>");

5） remove

删除
第一种：没用参数的

$("#div1").remove();

第二种：用参数的

$("p").remove(".class"); 可以删除 被选中的class

6）empty

删除div1 里边的子元素

 $("#div1").empty();

3.属性节点操作

3.1原JS 属性节点

1.getAttribute()
获取元素的指定属性值。

DomA.getAttribute("id")
DomA.getAttribute("class")
DomA.getAttribute("title")

2.setAttribute()
设置属性值

如果元素中存在指定的属性，它的值将被刷新，
如果不存在，则为元素创建该属性并赋值。
DomA.setAttribute(name, value)
例子：
red.setAttribute("id", "这是红盒子") 

3.removeAttribute
删除节点属性

DomA.removeAttribute("id");

3.2JQuery 属性节点

1.addClass()
添加

 $("div").addClass("名字A");
 或者多个Dom元素
  $("h1,h2,p").addClass("名字B");
  或者 多个class
   $("div").addClass("名字A 名字B");

2.removeClass
删除

  $("h1,h2,p").removeClass("blue");

3.toggleClass
切换 ：
在div中 ，有这个class就删除， 没有就添加（反着来）

 $("h1,h2,p").toggleClass("blue");

尝试一下

4. 总结：

所有原生JS 与JQ 的所有方法 都能够在 Vue跟React中调用，
但是在方法里边的参数（“只能被解析成字符串”）

例如：
在Vue 跟 React中调用
append（“只能被解析成字符串”）