this.$el.parentNode 属性

2024-09-02

Vue 组件中移动 this.$el 的注意事项

比如, mounted () { document.body.appendChild(this.$el); // insertAdjacentElement // insertBefore}, 这几行代码会导致 dom 元素位置与 VNode 期望的位置不一致比如: --------------------------------------- 父组件: div(id='p') h1 第1个 button(@click="add") 新增 p(v-for="(item,

vue 指令中el 的 parentNode 为空的问题

在项目中,突然发现在用vue指令的时候,发现元素el的父元素parentNode变成了null. 代码: if (el.parentNode && !Vue.prototype.$_has(binding.value)) { el.parentNode.removeChild(el); } 我这边用的是bind的钩子函数. vue指令钩子函数一个指令定义对象可以提供如下几个钩子函数 (均为可选): bind:只调用一次,指令第一次绑定到元素时调用.在这里可以进行一次性的初始化设置. i

CSS属性小结之--半透明处理

项目中经常有遇到需求半透明的情况,如图片.文字.容器.背景等等,每次都要去翻以前的项目,不甚其烦.现在一次性做个小结,方便自己查阅,也同时分享给大家: 一. 元素容器透明 .div{ opacity: 0.5; /* Firefox.Chorme.Opera等主流浏览器识别 */ filter:alpha(opacity=50); /* IE6及以上IE浏览器识别 */ } 说明: 1. opacity:* 取值0-1之间,由全透明向不透明递增,超过1之后默认不透明: 2. filter:alp

使用innerHTML生成的script节点不会发出请求与执行text属性

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box"></div> <script> var boxEl = document.querySelector('#box') boxEl.innerH

jquery属性的相关js实现方法

有些公司手机网站开发不用第三方的jquery或者zeptio,直接用原生的javascript.原生javascript功能是蛮强大的,只不过部分属性不支持IE8以下浏览器.下面对jquery相关方法,如何用js来实现,做一些简单总结. 元素操作 Add Class //JQUERY $(el).addClass(className);//js//谷歌浏览器,火狐浏览器,IE8+if(el.classList) el.classList.add(className);else el.classN

javascrip中parentNode和offsetParent之间的区别

首先是 parentNode 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A. 要明白 offsetParent 属性,要先明白“已定位元素” 这个名字,所谓“已定位元素”就是指给元素设置了 position 属性的样式,并且 position 样式属性的值等于 absolute.relative.fixed 之一的元素. 在使用 offsetParent 属性获取父级对象时有以下两种情况:

DOM – (w3school)1.DOM 方法 + 2.DOM属性 + 3.DOM 元素

1.DOM 方法一些 DOM 对象方法这里提供一些您将在本教程中学到的常用方法: 方法描述 getElementById() 返回带有指定 ID 的元素. getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组). getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表. appendChild() 把新的子节点添加到指定节点. removeChild() 删除子节点. replaceChild

js之parentElement属性

<html> <head> </head> <body> <form name="a "> <table name="b "> <tr name="c "> <td name="d "><select name="e " onchange="xx(this.parentElement.parent

Struts2中EL表达式取值

http://blog.csdn.net/cuihaiyang/article/details/41950141 (写的不错,可以知道为什么struts2可以用El取属性值的问题.正常el从request,session等中取值) http://blog.163.com/shexinyang@126/blog/static/13673931220138124240950/

Vue基础进阶之常用的实例属性

Vue实例属性: vue实例直接调用的属性: 常用的实例属性: vm.$data:获取属性: vm.$el:获取实例挂载的元素: vm.$options:获取自定义选项/属性: vm.$refs:获取通过ref属性注册的DOM对象: vm.$data:获取属性 vue代码: <script> let vm= new Vue({ el:'div', data:{ msg:'欢迎来到perfect*博客园!!!' } }); /* $data*/ console.log(vm.$data.msg)

javaScript DOM编程经常使用的方法与属性

DOM是Document Object Model文档对象模型的缩写.依据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你能够訪问页面其它的标准组件. Node接口的特性和方法特性/方法类型/放回类型说明 nodeName String 节点的名字:依据节点的类型而定义 nodeValue String 节点的值.依据节点的类型而定义 nodeType Number 节点的类型常量值之中的一个 ownerDocument Document 指向这个节点所属的文档 fi

JSTL和EL简介

EL Expression Language,表达式语言,通过操作存在于PageContext等的数据,实现JSP的编写更加简单,单纯使用EL不用引入jar包,只要容器支持即可. EL的隐含对象 EL基本使用 ${ld}相当于依次从pageScope-requestScope-sessionScope-applicationScope,查找ld的变量,如果有则返回其值,没有则返回null,当然如果确定变量位置,可以直接获取,例如${requestScope.ld}.除了上述隐含对象,EL把其它内

spring 使用Spring表达式（Spring EL）

Spring还提供了更灵活的注入方式,那就是Spring表达式,实际上Spring EL远比以上注入方式强大,我们需要学习它.Spring EL拥有很多功能. 使用Bean的id来引用Bean. •调用指定对象的方法和访问对象的属性. •进行运算. •提供正则表达式进行匹配. •集合配置. 这些都是Spring表达式的内容,使用Spring表达式可以获得比使用Properties文件更为强大的装配功能,只是有时候为了方便测试可以使用Spring EL定义的解析类进行测试,为此我们先来认识它们.

查询父节点parentNode

示例 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <!DOCTYPE html> <html> <head> <title>访问元素</title> <meta charset="UTF-8"> <meta name="view

怎样查看或修改元素节点的id属性

使用 el.id; el表示获取到的元素节点, 如下所示: // HTML 代码 // <div id="app" class="c1">hello</div> document.querySelector(".c1").id; // "app" 注意: 1. el.id 属性可读可写; 2. 对id的修改会实时反映到DOM树中; 3. id值对大小写敏感, app 和 APP 是两个不同的id, 建议

DOM节点的属性和方法

DOM DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model).它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(比如增删内容).它只是一个接口规范,可以用各种语言实现.所以严格地说,DOM 不是 JavaScript 语法的一部分,但是 DOM 操作是 JavaScript 最常见的任务,离开了 DOM,JavaScript 就无法控制网页.另一方面,JavaScript 也是最常用于 DOM 操作

基于vue2.0原理-自己实现MVVM框架之computed计算属性

基于上一篇data的双向绑定,这一篇来聊聊computed的实现原理及自己实现计算属性. 一.先聊下Computed的用法写一个最简单的小demo,展示用户的名字和年龄,代码如下: <body> <div id="app"> <input type="text" v-model="name"><br/> <input type="text" v-model="a

jQuery? 回归JavaScript原生API

如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且有时候只不过小写一个Demo,或者产品中只有少量的前端效果或DOM操作,就去花时间&空间引入jQuery,或者React?不免有取宰牛之刀以杀鸡之嫌. 原文首链:http://www.jeffjade.com/2015/11/25/2015-11-31-jQuery-vs-javaScript/ 在

jQuery-template.js学习

花了点时间,看了下jQuery-template.js,不多废话,先上结构 jQuery.each({..},function(){}) jQuery.fn.extend({..}) jQuery.extend({...}) jQuery.extend(jQuery.tmpl,{..}) function xx(){}//自定义方法结构上非常简单,但template插件却提供了不错的模版功能,我们根据API来慢慢看这个框架. 网络资源http://www.cnblogs.com/Foundat

mui项目中如何使用原生JavaScript代替jquery来操作dom 转自【B5教程网】:http://www.bcty365.com/content-146-3661-1.html

最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.原生JS挺简单,为何需要jq?jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器性能好,跨平台兼容也不影响性能.但jq根本就不是为手机设计的.手机上只有webkit浏览器(忽略wp,反正mui不支持wp),根本就不需要jq这种封装框架来操作dom.选择元素//jq$('.el');//js document.querySelector("di

JAVASCRIPT常用API总结

目录元素查找 class操作节点操作属性操作内容操作 css操作位置大小事件 DOM加载完毕绑定上下文去除空格 Ajax JSON处理节点遍历元素查找 // Node document.getElementById(id) // document.getElementById('test') document.querySelector(selectors) // document.querySelector('#test div') document.doctype doc

this.$el.parentNode 属性

热门专题