DOM（Document Object Model 文档对象模型）：一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组建

DOM操作的分类

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

-HTML DOM：使用JavaScript和DOM为HTML文档编写脚本时，有许多专属于HTML-DOM的属性

-CSS-DOM：针对于CSS操作，在JavaScript中，CSS-DOM主要用于获取和设置style对象的各种属性


参考http://shamrock.blog.51cto.com/2079212/1564560

http://shamrock.blog.51cto.com/2079212/1564688



查找节点

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>UntitledDocument</title><scripttype="text/javascript"src="js/jquery-1.7.2.js"></script><scripttype="text/javascript">//测试JQuery操作文本节点属性节点$(function(){//操作文本节点，通过JQuery对象的text()方法alert($("#bj").text());$("#bj").text("北京天安门");//操作属性节点通过JQuery对象的attr()方法alert($(":text[name='username']").attr("value"));$(":text[name='username']").attr("value","syd");});</script></head><body><p>你喜欢哪个城市？</p><ulid="city"><liid="bj"name="beijing">北京</li><liid="sh">上海</li><liid="sz">深圳</li><liid="sz2">深圳2</li></ul><p>你喜欢哪本书？</p><ulid="book"><liid="xyj"name="xyj">西游记</li><li>三国演义</li><li>水浒传</li><li>水浒传2</li></ul><br/>gender:<inputtype="radio"name="gender"value="male"/>Male<inputtype="radio"name="gender"value="female"/>Female<br/><inputtype="text"name="username"value="umgsai"/></body></html>


创建节点并且添加到指定的位置

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>UntitledDocument</title><scripttype="text/javascript"src="js/jquery-1.7.2.js"></script><scripttype="text/javascript">//测试JQuery创建节点并且插入节点到指定位置$(function(){//创建一个p节点,并添加到city下//$("<liid='atguigu'>尚硅谷</li>").appendTo("#city");//$("#city").append("<liid='atguigu'>【尚硅谷】</li>");//alert($("#atguigu").text());//接到第一个节点的前面$("<liid='atguigu'>尚硅谷1</li>").prependTo($("#city"));//$("#city").prepend("<liid='atguigu'>【尚硅谷】</li>");//插入到指定位置的后面//$("<liid='atguigu'>尚硅谷2</li>").insertAfter($("#bj"));$("#bj").after($("<liid='atguigu'>尚硅谷2</li>"));//插入到指定位置的前面//$("<liid='atguigu'>尚硅谷3</li>").insertBefore($("#bj"));$("#bj").before($("<liid='atguigu'>尚硅谷4</li>"));});</script></head><body><p>你喜欢哪个城市？</p><ulid="city"><liid="bj"name="beijing">北京</li><liid="sh">上海</li><liid="sz">深圳</li><liid="sz2">深圳2</li></ul><p>你喜欢哪本书？</p><ulid="book"><liid="xyj"name="xyj">西游记</li><li>三国演义</li><li>水浒传</li><li>水浒传2</li></ul><br/>gender:<inputtype="radio"name="gender"value="male"/>Male<inputtype="radio"name="gender"value="female"/>Female<br/><inputtype="text"name="username"value="umgsai"/></body></html>


克隆节点

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scripttype="text/javascript"src="js/jquery-1.7.2.js"></script><scripttype="text/javascript">//复制节点$(function(){$("li").click(function(){alert($(this).text());});//克隆节点，重新设置id属性。true表示克隆节点的同时克隆节点的事件$("#bj").attr("id","bj2").clone(true).insertAfter($("#xyj"));})</script></head><body><p>你喜欢哪个城市？</p><ulid="city"><liid="bj"name="beijing">北京</li><li>上海</li><li>武汉</li><li>深圳</li></ul><p>你喜欢哪本书？</p><ulid="book"><liid="xyj"name="xyj">西游记</li><li>三国演义</li><li>水浒传</li></ul><br/><formaction="#"name="myForm"><inputtype="radio"name="type"value="city"/>城市<inputtype="radio"name="type"value="book"/>BOOK<inputtype="text"name="myName"/><inputtype="submit"value="submit"id="submit"/></form></body></html>


克隆和替换

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scripttype="text/javascript"src="js/jquery-1.7.2.js"></script><scripttype="text/javascript">//替换节点$(function(){//创建一个<li></li>节点，替换#city最后的一个子节点$("<li>wuhan</li>").replaceAll($("#cityli:last"));//创建一个<li></li>节点，替换#city的第二个li子节点$("#cityli:eq(1)").replaceWith($("<li>yichang</li>"));//replaceAllreplaceWith替换的时候会移动节点//互换#xyj和#bj.需要先克隆节点。var$bj2=$("#bj").clone(true);var$xyj=$("#xyj").replaceWith($bj2);//返回被替换的节点。$("#bj").replaceWith($xyj);})</script></head><body><p>你喜欢哪个城市？</p><ulid="city"><liid="bj"name="beijing">北京</li><li>上海</li><li>武汉</li><li>深圳</li></ul><p>你喜欢哪本书？</p><ulid="book"><liid="xyj"name="xyj">西游记</li><li>三国演义</li><li>水浒传</li></ul><br/><formaction="#"name="myForm"><inputtype="radio"name="type"value="city"/>城市<inputtype="radio"name="type"value="book"/>BOOK<inputtype="text"name="myName"/><inputtype="submit"value="submit"id="submit"/></form></body></html>


包裹节点

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scripttype="text/javascript"src="js/jquery-1.7.2.js"></script><scripttype="text/javascript">//测试JQuery的wrapwrapAllwrapInner$(function(){//包装li本身//$("li").wrap("<fontcolor='red'></font>");//包装所有的li。将所有匹配元素进行单独包裹。$("#cityli").wrapAll("<fontcolor='red'></font>");//包装li里面的文字$("#languageli").wrapInner("<fontcolor='red'></font>");;})</script></head><body><p>你喜欢哪个城市？</p><ulid="city"><liid="bj"name="beijing">北京</li><li>上海</li><li>武汉</li><li>深圳</li></ul><p>你喜欢哪本书？</p><ulid="book"><liid="xyj"name="xyj">西游记</li><li>三国演义</li><li>水浒传</li></ul><p>你喜欢哪种语言？</p><ulid="language"><liid="c"name="c">c</li><li>Java</li><li>PHP</li></ul><br/><formaction="#"name="myForm"><inputtype="radio"name="type"value="city"/>城市<inputtype="radio"name="type"value="book"/>BOOK<inputtype="text"name="myName"/><inputtype="submit"value="submit"id="submit"/></form></body></html>