由于项目是从基于谷歌浏览器改版成基于IE浏览器，所以项目中基本上是以jQuery来控制DOM，其中遇到了使用数组的push和jQuery的html方法来动态生成页面（主要是一个个运单），页面中引用了swiper，再通过循环生成后台数据所反的相对应个数的slider，但是发现在页面载入后，组件并没有生效，后来终于通过一系列搜索找到了解决的方法，也是痴呆了TAT。
<section>标签中就是装的动态生成的内容。
这里是生成所有订单的方法，其中涉及到swiper的push方法在相关注释处。
接下来初始化swiper，然后在请求后台数据成功后的回调函数调用fullOrder方法
结果发现swiper根本没有被调用到，默默的mark一下，在多的情况下判断swiper是否成功初始化看左右按钮的颜色是否一深一浅就知道了。
正确初始化swiper的方法应该是在fullOrder方法之后或者是在fullOrder里的elementhtml()之后。由于swiper是需要 先初始化再执行 ，但这里是先生成swiper， 所以需要在生成swiper之后再初始化 。
只有这样在页面加载完后swiper才会被调用成功哒。
iframe是HTML文档的一种容器，它允许一个文档嵌入另一个文档，但是这两个文档的DOM树是完全分开的。因此，在iframe里的元素在DOM里是找不到的。
iframe里的元素和外部文档的元素是完全分开的，iframe里的元素只能在iframe里使用，而不能在外部文档访问。因此，在iframe里的元素在DOM里是找不到的。
iframe里的元素也不能通过JavaScript来访问外部文档的DOM，也不能被外部文档的JavaScript访问。因此，在iframe里的元素在DOM里是找不到的。
总之，iframe里的元素是完全隔离的，它们只能在iframe里使用，因此在DOM里是找不到的。
var Csld = getByClass(IDprd_con, 'slider');
if(Csldlength){//如果是多个，循环处理
for(var i=0;i<Csldlength;i++){
var obj = documentCsld[i];
//处理每个obj
}
}else{//如果是单个，直接处理
var obj = documentCsld;
//处理单个obj
}
其实你可以用jquery ,里面可以直接按照css *** 作对象。
<video ref="videoEle" class="video_channel" width="100%" height="auto" :poster="list[0]img"> <source :src="list[0]video"> </video>
<script>
// ref就是获取Dom, 只是把这个元素获取以后帮到$refs对象里了
Vue$refs['video']play();
</script>
vue生命周期的栗子
注意触发vue的created事件以后,this便指向vue实例,这点很重要
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue生命周期</title>
<script src="/js/vuejs"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div class="test" style="border: 1px black dashed;padding: 8px;">
{{a}}
</div>
<div class="test2" style="border: 1px red solid;margin-top: 10px;padding: 8px;">
我是内容二
</div>
<script type="text/javascript">
var myVue = new Vue({
el: "test",
data: {
a: "我是内容,在控制台输入myVuea=123456,可以改变我的值"
},
created: function () {
//在实例创建之后同步调用。此时实例已经结束解析选项，这意味着已建立：数据绑定，计算属性，方法，watcher/事件回调。
//但是还没有开始 DOM 编译，$el 还不存在,但是实例存在,即thisa存在,可打印出来 。
consolelog("建立");
},
beforeCompile: function () {
consolelog("未开始编译");
},
compiled: function () {
//在编译结束后调用。此时所有的指令已生效，因而数据的变化将触发 DOM 更新。但是不担保 $el 已插入文档。
consolelog("编译完成");
},
ready: function () {
//在编译结束和 $el 第一次插入文档之后调用，如在第一次 attached 钩子之后调用。注意必须是由 Vue 插入（如 vm$appendTo() 等方法或指令更新）才触发 ready 钩子。
consolelog("一切准备好了");
},
attached :function () { //myVue$appendTo("test2")暂时触发不了,不知道怎么解决
//在 vm$el 插入 DOM 时调用。必须是由指令或实例方法（如 $appendTo()）插入，直接 *** 作 vm$el 不会 触发这个钩子。
consolelog("插入DOM成功");
},
detached :function () { //触发事件 myVue$destroy(true),其中参数true控制是否删除DOM节点或者myVue$remove()
//在 vm$el 从 DOM 中删除时调用。必须是由指令或实例方法删除，直接 *** 作 vm$el 不会 触发这个钩子。
consolelog("删除DOM成功");
},
beforeDestroy: function () { //触发方式,在console里面打myVue$destroy();
//在开始销毁实例时调用。此时实例仍然有功能。
consolelog("销毁前");
},
destroyed: function () { //触发方式,在console里面打myVue$destroy();其中myVue$destroy(true)是删除DOM节点,会触发detached函数,但是实例仍然存在
//在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑，注意是解绑不是销毁,所有的子实例也已经被销毁。
consolelog("已销毁");
}
});
</script>
</body>
</html>
在javascript中可以通过dom元素的tagName进行判断
1、利用documentgetElementById()获取到dom元素
2、获取dom元素的属性tagName
3、如果tagName是INPUT，可以再利用元素的type属性判断具体是哪一种INPUT
示例：
<input id="name" type="text" value="123"/>
方法：
function test(){var text = documentgetElementById('name');
var textTagName = texttagName;//获取标签类型
if(textTagName == 'INPUT'){//如果是INPUT,判断是何种INPUT,checkbox、text等
textTagName = textTagName + "," + texttype;
}
alert(textTagName);
}
试试这个，不知道是不是你要的效果
<BODY>
<INPUT TYPE="button" VALUE="显示此节点树路径" ONCLICK="getDomPath(this)">
</BODY>
<SCRIPT LANGUAGE="JavaScript">
function getDomPath(obj)
{
var param = "#document"
var path = "";
var temp = objparentNode;
while(true)
{
path = tempnodeName + " >>> " + path;
if(tempnodeName == param)
{
break;
}
temp = tempparentNode;
}
path = path + objnodeName;
alert(path);
}
</SCRIPT>
以上就是关于JS通过push方法动态添加swiper组件的slider全部的内容，包括:JS通过push方法动态添加swiper组件的slider、iframe里的元素在dom里找不到、自定义的getByClass 怎么进行 dom *** 作等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）