ref ：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。
Vue特点: 数据驱动界面更新, 无需 *** 作DOM来更新界面
也就是说Vue不推荐我们直接 *** 作DOM, 但是在开发中有时候我们确实需要拿到DOM *** 作DOM
那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM
在Vue中如果想要拿到DOM元素我们可以通过ref来获取
例如: <p ref="myP">我是段落</p>
例如 this$refmyP
refs : 一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例
注意： refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这只意味着一个直接的子组件封装的“逃生舱”——你应该避免在模板或计算属性中访问 $refs 结语
在讲ref特点之前我们先来回顾， 原生语法获取元素的特点
例如： 通过原生的语法 documentquerySelector 获取到的都是被渲染之后DOM元素， 也就是原生的元素
在Vue中如果想获取原生的元素或者获取自定义的组件, 可以通过ref来获取
拿到了组件后, 还可以访问组件中的数据
当HTML渲染时，DOM元素可能无法获取，这是因为DOM元素可能还没有被创建或者渲染完成。为了解决这个问题，您可以使用JavaScript的windowonload或者jQuery的$(document)ready()函数，这两个函数可以确保DOM元素已经被完全渲染，从而可以获取到DOM元素。此外，您还可以使用JavaScript的setTimeout()函数，让它在DOM元素被渲染完成之后再执行，从而保证DOM元素可以被正确获取。
1、如图位置是一个html中的可编辑内容的div标签，在里边输入文字，会有一个光标。
2、通过getSelection可以获得一个Selection对象，如图。因为是一个光标，anchor和focus（选择的起点和终点）一样，偏移也一样。
3、如图，则进行文字选择，而且是跨行选择，以第一行为起点，第二行为终点，选择文字。
4、再次getSelection，可以看到anchorNode是起始节点，anchorOffset是起始偏移，focus是结束的。
5、如果从第二行倒着选到第一行，使用getSelection获取选择区域，可以看到anchorNode和focusNode和刚才相比，互换了。
6、使用一个node的textContent属性可以获得文字。结合focusOffset和anchorOffset，实际上可以获取光标/选中区域前后的文字。
7、将起始和结束位置设置为相同，而且都在结束节点的末尾。即变成闪烁光标。
一,获取html元素
1getElementByID(id)
通过对元素的ID访问,这是DOM一个基础的访问页面元素的方法
example:
<div id="divid">测试</div>
<script language="javascript">
var div=documentgetElementByID("divid");
alert (divnodeName); //显示元素名
</script>
如果id在元素中不是唯一的,那么获得的将是第一个ID
2getElementsByName(name)
仅用于input radio checkbox等元素,返回名字为name的元素数组
example:
<div name="george"></div>
<input name="george"></div>
<script language=javascript>
var ge=documentgetElementsByName("george");
alert (georgeslength); //获取georges个数,对div唔效果
</script>
3getElementsByTagName(tagname)
返回具有tagname的元素列表数组处理大的DOM结构会用到它
二,DOM Element常用方法
1appendChild(node) //增加内容
向当前对象追加节点,example:
<div id="test">123</div>
<script type="text/javascript">
var newdiv=documentcreateElement("div");
var newtext=documentcreateTextNode("A new div");
newdivappendChild(newtext) ;
documentgetElementById("test")appendChild(newdiv) ;
</script>
当然,上面的功能用documentgetElementById("test")innerHTML="测试一下"就可实现,遗憾的是,innerHTML不属于DOM
2,removeChild(childreference)
移除当前节点的子节点,并返回节点
<div id="father"><div id="child">A child</div></div>
<script type="text/javascript">
var childnode=documentgetElementById("child");
var removednode=documentgetElementById("father")removeChild(childnode)
</script>
3cloneNode(deepBoolean)
复制并返回当前的复制节点,由于复制了原节点的id属性,所以在document树中要改ID属性,以确保ID唯一性
4,insertBefore(newElment,targetElement) 插入新的节点
在当前节点插入一个新节点,如果targetElement为null,那新节点为最后节点
example:
<body>
<span id="lovespan">熊掌我所欲也!</span>
</body>
<script type="text/javascript">
var lovespan=documentgetElementById("lovespan"); //获取id
var newspan=documentcreateElement("span");
var newspanref=documentbodyinsertBefore(newspan, lovespan);
newspanrefinnerHTML="鱼与";
</script>
三,DOM Element常用属性
1、childeNodes 返回所有子节点对象,
例如
<ul id="mylist">
<li>美国</li>
<li>意大利</li>
<li>加拿大</li>
</ul>
<script>
var msg="" ;
var mylist=documentgetElementById("mylist")
for (i=0; i<mylistchildNodeslength; i++){
var li=mylistchildNodes[i];
msg+=liinnerText;
}
alert (msg);
</script>
2,innerHTML
这是一个标准,但它并不书DOM
例如:
<div id="bbb"><span id="aaa">我拉</span></div>
<input type=button value="点击看看">
<script language="javascript">
function change()
{
documentgetElementById("aaa")innerHTML= "修改修改";
}
</script>
3,style
这是一个极其重要的属性,可以获取并修改每个单独的样式
例如:documentgetElementByTagName("body")[0]stylebackgroundColor="#cccccc"
4、firstChild 返回第一个子节点
lastChild 返回最后一个子节点
parentNode 返回父节点的对象。
nextSibling 返回下一个兄弟节点的对象
previousSibling 返回前一个兄弟节点的对象
nodeName 返回节点的HTML标记名称，使用英文的大写字母，如P, FONT
5,click()
执行元素的一次点击，可以用于通过脚本来触发onClick函数
根本不是epageY、epageX的问题
你没有给div11 加position:absolute; 肯定显示在页面最下面了
$("#11")css({
"top": epageY,"left": epageX
,"backgroundColor":"yellow"})show("fast");
改成
$("#11")css({
position:"absolute","top": epageY,"left": epageX
,"backgroundColor":"yellow"})show("fast");
就行了
以上就是关于13-Vue特殊属性-ref全部的内容，包括:13-Vue特殊属性-ref、html渲染时,dom元素获取不到、JS移动端获取触控位置等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）