> 一、DOM操作的分类> > **1.DOM Core**> DOM Core并不专属于javascript,任何支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以
> 一、DOM操作的分类> > **1.DOM Core**> DOM Core并不专属于javascript,任何支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出的文档，例如XML。> **2.HTML-DOM**> 用javascript编写脚本时有许多专属于HTML-DOM的属性。使用HTML-DOM来获取表单对象的方法。document.forms//HTML-DOM提供了一个forms对象. 使用HTML-DOM获取元素src属性的方法，element.src;> **3.CSS-DOM**> CSS-DOM是针对CSS的操作。在javascript中，CSS-DOM技术的主要作用是获取和设置style的各种属性。例如：element.style.color="red";> ### 二、jquery中的DOM操作> > **1.**利用jquery找到属性节点后，可以使用attr（）方法来获取它的各种属性。//attribute的缩写// attr()的参数可以是一个，也可以是两个。参数是一个则是要查询的属性名字；> **2.创建节点**> a.创建元素节点> $(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DO没对象包装成一个jquery对象后返回。> var $li_1=$("<li></li>");后使用jquery中的append方法。$("ul").append($li_1);链式写法：$("ul").append($li_1).append($li_2);> 创建单个元素要注意闭合标签并使用标准XHTML格式。可以用$("<p/>")> b.创建文本节点> 在创建元素节点的时候写出文本就创建除了文本节点 var $li_1=$("<li>梨子</li>");> c.创建属性节点> 与文本节点类似，在创建元素节点时一起创建 $li_1=$("<li title='梨子'>梨子</li>");> **3.插入节点**> prepend():向每个匹配的元素内部前置内容；prependTo()> after():在每个匹配的元素之后插入内容；insertAfter();> before():在每个匹配的元素之前插入内容；insertBefore()> **4.删除节点** 三种删除节点的方法 remove(),detach(),empty()> remove()从DOM中删除所有匹配的元素，其后代节点也会被相应删除，返回值是一个已被删除的节点的引用，因此以后还可以使用该元素。可以通过传递参数来选择性地删除元素$("ul li").remove("li[title!=菠萝]");<li>元素中title不等于“菠萝”的<li>元素删除> detach()去掉所有匹配的元素，但不会把匹配的元素从jquery对象中删除，与remove()不同在于所有绑定的事件，附加的数据都会保留下来，若用detach删除元素在重新追加元素后之前绑定的事件还在。> empty()严格讲来不是删除节点而是清空节点，清空元素的所有后代节点。注意是清空元素里的内容> ** 5.复制节点**> clone()例：$("ul li").click(function(){$(this).clone().appendTo("ul");})单击触发事件复制节点<li>.若需要复制的新元素也有复制功能，在clone()方法中传递参数true，含义是复制元素的同时复制元素中绑定的事件。> **6.替换节点**> replaceWith()和replaceAll().替换制定的HTML或者DOM元素。> $("p").replaceWith("<strong>你最不喜欢的水果是？</strong>");repalceAll与之相反，由A替换B。替换之前已绑定事件会和被替换的元素一起消失。> ** 7.包裹节点**> 如果需要将某个节点用其他标记包裹起来，jquery提供了相应方法，即wrap()，不会破坏语义。> $("strong").wrap("<b></b>");将每个匹配元素单独包裹。> wrapAll()将所有匹配的元素用一个元素来包裹。并且如果被包裹元素中间有其他元素，其他元素会被放在被包裹元素之后。> wrapInner()该方法将每个匹配的元素子内容（包括文本节点）用其他结构化的标记包裹起来。> $("strong")，wrapInner("<b></b>");效果为<strong title="选择你喜欢的水果."><b>你最喜欢的水果是？</b></strong>> ** 8.属性操作**> a.attr()来获取和设置元素属性removeAttr()来删除元素属性。> 与DOM对象操作类似。注意一次性为一个元素设置多个属性。> $("p").attr({"title"："your title","name":"test"});> b.removeAttr()来删除属性$("p").removeAttr("title");> ** 9.样式操作**> 1.追加样式> addClass(),注意：如果一个元素添加了多个class值，那么相当于合并了他们的样式；如果不同的class设定了同一样式属性，则后者覆盖前者。addClass("classname值")> 2.移除样式> removeClass(); $("p").removeClass("high");与addClass()相反移除classname，可以删除多个classname $("p").removeClass("high another");用空格隔开；> removeClass()特性：不带参数时，删除所有的class值> 3.切换样式> toggleClass() 注意了解toggle()方法> $("p").toggleClass("another");//重复切换类名，类名存在则删除，类名不存在则添加它> hasClass()可以用来判断元素中是否含有某个class，如果有返回true，否则返回false> 例如$("p").hasClass("another");此方法是为增强代码可读性产生，在jquery内部实际调用了is()方法来完成此功能。该方法等价于$("p").is("another");> **10.设置、获取HTML,文本和值**> a.html()方法，类似javascript中的innerHTML属性，用来读取设置某元素中的HTML内容。此方法可以用于XHTML文档，不可用于XML文档。<p title="选择"><strong>水果</strong></p> html()方法获得<strong>水果</strong>> b.text()方法，此方法类似javascript中的inerText属性（此属性不能再Firefox浏览器中运行），读取或设置某个元素中的文本内容，对HTML，XML文档都有效> c.val()方法，此方法类似javascript中的value属性，用来设置和获取元素的值。见书page82.（defaultValue属性用来获取或设置文本框的初始值）> 另外一个功能可以使select(下拉列表框)、checkbox(多选框)、radio(单选框)相应的选项被选中，表单操作中经常使用。> 下拉框$("#single").val("选择二号")，下拉列表$("multiple").val(["选择二号","选择三号"])，单选框$(":radio").val(["radio2"])> 复选框$("checkbox").val(["check2","check3"])> ** 11.遍历节点**> children()方法用于取得匹配元素的子元素集合。> next()该方法用于取得匹配元素后面紧邻的同辈元素。> prev()该方法用于取得匹配元素前面紧邻的同辈元素。> siblings()用于取得匹配元素前后所有的同辈元素。> closest()该方法用于取得最近的匹配元素。首先查找当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上找到匹配选择器的元素。没找到返回空的jquery对象。> parent(),parents(),closet()> parent()从指定类型直接父节点开始查找，返回一个元素节点。> parents('ul')找到第一个父节点（这里匹配ul）时并没有停止查找而是继续查找，最后返回多个父节点。> closet()与parents()类似，不同在于它返回匹配的第一个元素节点。> 其他遍历节点方法find(),filter(),nextAll(),prevAll()等。> **12.CSS-DOM操作**> CSS-DOM就是读取和设置style对象的各种属性。> 在jquery中利用css()方法获取元素的样式属性。代码：$("p").css("color");//获取<p>元素的样式颜色> 也可用css()设置某个元素单个样式或多个样式，代码：> $("p").css({"fontSize":"30px","backgroundColor":"#123456"});> 注意：值是数字会自动转化为像素值；如果font-size,background-color不带引号需使用驼峰命名法> $("p").css("opacity":"0.5");//透明度设置> $("p").css("height");另外一种获得元素高度的方法height(),获得匹配元素当前计算的高度值(px),$("p").height();> height();也可以设置元素高度，传递是数字默认单位px，用其他单位则必须传递一个字符串。> $("p").heigth(100); $("P").height("10em");> 区别： css()获得的高度值与样式设置有关，可能会得到"auto"，也可能是"10px"之类字符串，而height()方法获取高度是元素在页面中的实际高度，与样式设置无关，并且不带单位。> 对应的还有width()方法用于获取匹配元素宽度值(px)；> > > ### CSS-DOM中元素定位经常使用方法> > 1.offset()> 获取元素在当前视窗的相对偏移，其中返回对象包含两个属性，top和left，且只对可见元素有效，例如用它获取<p>元素的偏移量。> var offset=$("p").offset();> var left=offset.left;获取左偏移> var top=offset.top;获取上偏移> 2.position()> 3.scrollTop(),scrollLeft()