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
查找节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="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> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="sh">上海</li> <li id="sz">深圳</li> <li id="sz2">深圳2</li> </ul> <p>你喜欢哪本书？</p> <ul id="book"> <li id="xyj" name="xyj">西游记</li> <li>三国演义</li> <li>水浒传</li> <li>水浒传2</li> </ul> <br/> gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female <br/> <input type="text" name="username" value="umgsai"/> </body> </html>创建节点并且添加到指定的位置
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript"> //测试JQuery创建节点并且插入节点到指定位置 $(function() { //创建一个p节点,并添加到city下 //$("<li id='atguigu'>尚硅谷</li>").appendTo("#city"); //$("#city").append("<li id='atguigu'>【尚硅谷】</li>"); //alert($("#atguigu").text()); //接到第一个节点的 前面 $("<li id='atguigu'>尚硅谷1</li>").prependTo($("#city")); //$("#city").prepend("<li id='atguigu'>【尚硅谷】</li>"); //插入到指定位置的后面 //$("<li id='atguigu'>尚硅谷2</li>").insertAfter($("#bj")); $("#bj").after($("<li id='atguigu'>尚硅谷2</li>")); //插入到指定位置的前面 //$("<li id='atguigu'>尚硅谷3</li>").insertBefore($("#bj")); $("#bj").before($("<li id='atguigu'>尚硅谷4</li>")); }); </script> </head> <body> <p>你喜欢哪个城市？</p> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="sh">上海</li> <li id="sz">深圳</li> <li id="sz2">深圳2</li> </ul> <p>你喜欢哪本书？</p> <ul id="book"> <li id="xyj" name="xyj">西游记</li> <li>三国演义</li> <li>水浒传</li> <li>水浒传2</li> </ul> <br/> gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female <br/> <input type="text" name="username" value="umgsai"/> </body> </html>克隆节点
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript"> //复制节点 $(function() { $("li").click(function(){ alert($(this).text()); }); //克隆节点，重新设置id属性。true表示克隆节点的同时克隆节点的事件 $("#bj").attr("id", "bj2").clone(true).insertAfter($("#xyj")); }) </script> </head> <body> <p>你喜欢哪个城市？</p> <ul id="city"> <li id="bj" name="beijing">北京</li> <li>上海</li> <li>武汉</li> <li>深圳</li> </ul> <p>你喜欢哪本书？</p> <ul id="book"> <li id="xyj" name="xyj">西游记</li> <li>三国演义</li> <li>水浒传</li> </ul> <br /> <form action="#" name="myForm"> <input type="radio" name="type" value="city" />城市 <input type="radio" name="type" value="book" />BOOK <input type="text" name="myName" /> <input type="submit" value="submit" id="submit" /> </form> </body> </html>克隆和替换
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript"> //替换节点 $(function() { //创建一个<li></li>节点，替换#city最后的一个子节点 $("<li>wuhan</li>").replaceAll($("#city li:last")); //创建一个<li></li>节点，替换#city的第二个li子节点 $("#city li:eq(1)").replaceWith($("<li>yichang</li>")); //replaceAll replaceWith 替换的时候会移动节点 //互换#xyj和#bj.需要先克隆节点。 var $bj2 = $("#bj").clone(true); var $xyj = $("#xyj").replaceWith($bj2);//返回被替换的节点。 $("#bj").replaceWith($xyj); }) </script> </head> <body> <p>你喜欢哪个城市？</p> <ul id="city"> <li id="bj" name="beijing">北京</li> <li>上海</li> <li>武汉</li> <li>深圳</li> </ul> <p>你喜欢哪本书？</p> <ul id="book"> <li id="xyj" name="xyj">西游记</li> <li>三国演义</li> <li>水浒传</li> </ul> <br /> <form action="#" name="myForm"> <input type="radio" name="type" value="city" />城市 <input type="radio" name="type" value="book" />BOOK <input type="text" name="myName" /> <input type="submit" value="submit" id="submit" /> </form> </body> </html>包裹节点
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-1.7.2.js"></script> <script type="text/javascript"> //测试JQuery的wrap wrapAll wrapInner $(function() { //包装li本身 //$("li").wrap("<font color='red'></font>"); //包装所有的li。将所有匹配元素进行单独包裹。 $("#city li").wrapAll("<font color='red'></font>"); //包装li里面的文字 $("#language li").wrapInner("<font color='red'></font>");; }) </script> </head> <body> <p>你喜欢哪个城市？</p> <ul id="city"> <li id="bj" name="beijing">北京</li> <li>上海</li> <li>武汉</li> <li>深圳</li> </ul> <p>你喜欢哪本书？</p> <ul id="book"> <li id="xyj" name="xyj">西游记</li> <li>三国演义</li> <li>水浒传</li> </ul> <p>你喜欢哪种语言？</p> <ul id="language"> <li id="c" name="c">c</li> <li>Java</li> <li>PHP</li> </ul> <br /> <form action="#" name="myForm"> <input type="radio" name="type" value="city" />城市 <input type="radio" name="type" value="book" />BOOK <input type="text" name="myName" /> <input type="submit" value="submit" id="submit" /> </form> </body> </html>免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
