vue动态添加domv-for

答

v-for是vue.js中的指令，用于遍历数组或对象中的数据，动态添加dom。使用v-for指令时，需要提供一个数组或对象，它会根据提供的数据来渲染相应的dom结构。v-for指令的语法是：v-for="(item,index) in items"，其中items是要遍历的数组或对象，item是当前遍历到的元素，index是当前遍历到的元素的索引。使用v-for指令可以快速的渲染出dom结构，而不用写大量的dom结构代码。

1.document.getElementById("id名")

通过id属性的值查找，返回满足条件的第一个元素

2.document.getElementsByTagName("标签名")

通过标签名来获取页面中的元素。返回的是多个标签。

并不是真正的数组，但是我们可以想 *** 作数组一样 *** 作他（类数组）

3.document.getElementsByClassName("class名")

通过类名来获取页面中的元素。返回的也是多个标签

4.document.getElementsByName("表单元素name")

通过表单的name属性的值来获取元素

5.document.querySelector("div p a")

匹配指定 CSS 选择器的 第一个元素 。 如果没有找到，返回 null。

6.document.querySelectorAll("div")

获取所有满足条件的元素

7.三个特殊节点

8.childNodes 所有节点。包括各种节点

9.fristChild 获取一个元素的第一个子节点

10.lastChild 获取一个元素的最后一个子节点

11.parentNode 获取一个元素的父节点

12.previousSibling 获取一个元素的上一个兄弟节点

13.nextSibling 获取一个元素的下一个节点

14.children 只获取子元素

15.firstElementChild 获取第一个元素子节点

16.lastElementChild 获取最后一个元素子节点

17.nextElementsibling 获取下一个元素兄弟节点

18.previousElementsibling 获取上一个元素兄弟节点

19.parentElement 获取父元素节点

20.childElementCount 获取子元素的个数

1.document.createElement(元素名) 创建一个元素节点

2.document.createTextNode("这是新创建的一段文本") 创建一个文本节点

3.appendChild() 添加元素到容器中

4.insertBefore() 在一个节点前插入新节点

5.removeChild() 删除子节点

6.replaceChild() 替换子节点

7.cloneNode() 克隆节点 传入true则复制所有节点

8.setAttribute() 给元素设置属性

参数1：属性的名

参数2：属性的值

如果属性不存在，则添加；存在，则修改

9.romveAttribute() 删除属性

参数：要删除的属性名

10.getAttribute() 获取属性的值

参数：属性名

11.访问 元素 id 名

box.id

12.访问 元素 class 名

box.className

box.classList 类数组

13.获取标签名

box.tagName

box.nodeName

14.innerHTML属性

innerHTML 属性设置或返回标签的开始和结束标签之间的 HTML。

值为为文本

15.innerText属性

16.outerHTML

跟innerHTML相比多包括了一个它自身

1.访问行内（内联）样式表

2.内部样式表和外部样式表的获取

getComputedStyle()

参数1：表示样式表所属的元素

参数2：如果获取的是伪元素的样式，传入伪元素，正常元素传入null 或不传

兼容性问题

3.获取元素实际的宽高

offsetWidth 宽

offsetHeight 高

4.获取元素参考父容器的left 和 top

offsetLeft 距离左部

offsetTop 距离上部

offsetParent 查找这个元素的参照父容器

本文实例分析了jQuery添加删除DOM元素的方法。分享给大家供大家参考，具体如下： 介绍 DOM是Document Object Modeule的缩写，一般来说，DOM *** 作分成3个方面。 1、DOM Core DOM Core并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它，用途也远不止仅限于网页，也可以用来处理任何一种使用标记语言编写出来的文档，如XML。 例如：document,getElementsByTagName("form")//使用DOM Core来获取表单对象的方法。 2、HTML-DOM 在使用Javascript和DOM为HTML文件编写脚本时，有许多属于HTML-DOM的属性，HTML-DOM的出现甚至比DOM Core还要早，他提供了一些更简明的记号来描述各种HTML元素的属性。 例如：复制代码 代码如下:document.forms //HTML-DOM提供了一个forms对象。 PS:可以看出，获取对象、属性即可以用DOM Core来实现民，也可以用HTML-DOM实现。 3、CSS-DOM CSS-DOM是针对CSS的 *** 作,在javascript中，CSS-DOM主要的作用是获取和设置style对象的各种属性，由此达到网页呈现出各种不同的效果. 例如：复制代码 代码如下:element.style.color="red"//设置某元素的字体颜色的方法。 常用方法 1.查找元素节点 复制代码 代码如下:var $li = $("ul li:eq(0)")//获取ul标记下的第一个li,也可以写成 $("#ulID li:eq(0)") 2.查找元素属性 利用jquery的attr()方法来获取元素的各种属性的值，attr()方法的参数可以是一个，也可以是两个。 当参数是一个时，则是要查询的属性名称。 当参数是两个时，则可以设置属性的值。 alert($("#id").attr("title"))//输出元素的title属性.一个参数 $("#id").attr("title","改变title值")//改变元素的title属性值.二个参数3.添加元素节点 $(html) 简单说明一下$(html)方法会根据传入的html标记字符串创建一个dom对象，并将这个dom对象包装成一个jquery对象返回，总之就是把标记所有html代码都放到$()工厂里面就行了！ 例： var $htmlLi = $(" <li title='香蕉'>香蕉</li>")//创建DOM对象 var $ul = $("ul") //获取UL对象 $ul.append($htmlLi)//将$htmlLi追加到$ul元素的li列表下面列出部分插入节点的方法 方法描述示例Append()向每个匹配的元素内追加内容HTML代码<ul></ul>JQuery代码$(“ul”).append(“<li>AA</li>”)结果<ul><li>AA</li></ul> appendTo()该方法和Append()相反，a.Append(b)是将b追加到a中，而appendTo()是将b追求到a中HTML代码<ul></ul>JQuery代码$ (“<li>AA</li>”).appendTo (“ul”).结果<ul><li>AA</li></ul> Prepend()向每个匹配的元素内部前置内容HTML代码<p>哈哈</p>JQuery代码$(“p”).prepend(“<b>ABC</b>”)结果<p><b>ABC</b>哈哈</p>prependTo()该方法和Prepend()相反，a. Prepend (b)是将b前置到a中，而prependTo ()是将b前置到a中HTML代码<p>哈哈</p>JQuery代码$(“<b>ABC</b>”).prependTo.(“p”)结果<p><b>ABC</b>哈哈</p>After()在每个匹配的元素之后插入内容，是之后HTML代码<p>AAA</p>JQuery代码$(“p”).After(“<b>cc</b>”)结果<p>AAA</p><b>cc</b>insertAfter()和After()相反HTML代码<p>AAA</p>JQuery代码$ (“<b>cc</b>”).After(“p”)结果<p>AAA</p><b>cc</b>Before()在每个匹配的元素之前插入内容HTML代码<p>AAA</p>JQuery代码$(“p”). Before (“<b>cc</b>”)结果<b>cc</b><p>AAA</p>insertBefore()和Before()相反HTML代码<p>AAA</p>JQuery代码$ (“<b>cc</b>”). insertBefore (“p”)结果<b>cc</b><p>AAA</p> 好了，不要斋看，自己动手试试吧:) 4.删除元素节点 由于我们需要经常动态去改变DOM元素，因此Jquery提供了两种删除节点的方法，即remove()和empty() 4.1 remove()方法 $("p").remove()// 我们可以获取到要删除的元素，然后调用remove()方法 $("ul li:eq(0)").remove().appendTo("ul")// 删除ul下面的第一个li标记，然后再把删除的li标记重新加到ul里面，remove()方法返回删除元素的引用，这时你可以继续使用 $("ul li").remove("li[title!=ABC]")//remove可以接受通过参数来选择性的删除符合条件的元素 4.2 empty()方法 严格来讲，empty()方法并不是删除元素，而是清空 例： HTML代码： <ul> <li title="AAA">AAA</li> </ul> JQuery代码： 复制代码 代码如下:$("ul li:eq(0)").empty() 结果 <ul> <li title="AAA"></li> </ul> 记住，只会清空内容，不会请空属性 更多关于jQuery *** 作DOM元素相关内容感兴趣的读者可查看本站专题：《jQuery *** 作DOM节点方法总结》 希望本文所述对大家jQuery程序设计有所帮助。

---