觉得不错的 可以点赞,收藏一下谢谢
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(“只能被解析成字符串”)