JQuery中的DOM操做

DOM是一种与浏览器、平台、语言无关的接口，使用该接口能够轻松地访问页面中全部的标准组件。DOM解决了JavaScript和JScript之间的冲突，为此，能够轻松获取和操做网页中的数据、脚本和表现层对象。

 

DOM操做分为：DOM Core、HTML-DOM和CSS-DOM

（1）DOM Core

不专属于JavaScript，任何一种支持DOM的程序设计语言均可以使用它。它的用途并不是仅限于处理网页，也能够用来处理任何一种使用标记语言编写出来的文档，例如XML。

document.getElementsByTagName("form"); //使用DOM Core来获取表单对象的方法

element.getAttribute("src");//使用DOM  Core来获取某元素的src属性的方法

（2）HTML-DOM

在使用JavaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性。HTML-DOM的出现设置比DOM Core还要早，它提供了一些更明显的记号来描述各类HTML元素的属性。

document.forms  //HTML-DOM提供了一个forms对象

element.src //HTML-DOM来获取某元素的src属性的方法

获取某些对象、属性既能够用DOM core实现，也能够用HTML-DOM来使用。可是HTML-DOM只能用来处理Web文档。

（3）CSS-DOM

是针对css的操做。在JavaScript中，CSS-DOM技术的主要做用是获取和设置style对象的各类属性。经过改变style对象的各类属性，能够使网页呈现出各类不一样的效果。

element.style.color="red" //设置某元素style对象字体颜色

 

JQuery做为JavaScript库，继承并发扬了JavaScript对DOM对象的操做的特性，使开发人员能方便地操做DOM对象。

（1）查找节点

var $li=$("ul li:eq(1)");//获取<ul>里第2个<li>节点

var li_txt=$li.text();//获取这个节点里面的内容

var li_title=$li.attr("title");//获取这个节点属性title

（2）建立节点

var $li_1=$("<li title='香蕉'>香蕉</li>"); //建立第1个<li>元素

$("ul").append($li_1); //添加到<ul>节点中，使之能在网页中显示

（3）插入节点

append()  

向每一个匹配的元素内部追加内容。$("p").append("<b>你好</b>");

appendTo()

将全部匹配的元素追加到指定的元素中，$(A).appendTo(B)，将A追加到B中。

prepend()

向每一个匹配的元素内部前置内容。

prependTo()

将全部匹配的元素前置到指定的元素中。$(A).prependTo(B)，将A前置到B中

after()

在每一个匹配的元素以后插入内容

insertAfter()

将全部匹配的元素插入到指定元素的后面。$(A).insertAfter(B)，将A插入到B后面

before()

在每一个匹配的元素以前插入内容

insertBefore()

将全部的元素插入到指定的元素的前面。$(A).insertBefore(B)，将A插入到B前面

（4）删除节点

 

（5）复制节点

（6）替换节点

（7）包裹节点

（8）属性操做

（9）样式操做

（10）设置和获取HTML、文本和值

（11）遍历节点

（12）CSS-DOM操做