一、DOM 作用： DOM （Document Object Model） 1、document文档 HTML XML 语言（标记语言） 树形结构的语言 2、Object对象 如果用js操作HTML文档，就需要先将HTML文档中的结构转成js对象 a.操作属性 b.操作内容 innerText 内部的文本，里面放置什么东西都当做一个文本 innerHTML 如果有HTML标签，会当成HTML标签。取读都是一样 有个问题就是在修改innerText之后，组件内的HTML标记就会失效。 value 读取表单内容，表单中全部使用这个读取 c.操作样式 一：单个操作 //注意，如果原来样式中有-，需要去掉，然后将后面的单词首字母大写 obj.style.backgroundColor="red"; 二：批量操作 //直接设置style对象，注意style的格式 obj.style="height:500px;color:red;"; //指定obj的className属性，给它类选择器名 //使用className设置属性 obj.className="test"; //可以指定多个类 //obj.className="test demo";//或者 obj.className+=" demo";//注意空格 //删除样式 obj.className=""; 以上三种操作的前提是有对象 转成对象的两种形式： 1、标记名（多个—）、id（唯一）、name（多个） document中的三个方法： var objs=document.getElementsByTagName("div"); objs=document.getElementById("one"); objs=document.getElementsByName("two"); 2、通过数组 document.title= document.body=[object HTMLBodyElement] window.frames=[object] document.all=[object HTMLAllCollection]//所有标记 document.embeds=[object HTMLCollection]所有动画 document.scripts=[object HTMLCollection]所有脚本 document.applets=[object HTMLCollection] document.forms=[object HTMLCollection] 所有表单 document.images=[object HTMLCollection] 所有图像 document.anchors=[object HTMLCollection] 所有锚点 document.styleSheets=[object StyleSheetList] 所有样式 document.links=[object HTMLCollection] 所有链接 二、DOM window.document document是一个整个文档。而不仅仅是只的body内容
DOM D--document O--Object M--Model 一、将文档想成一个倒树，每一个部分（元素、内容、属性、注释）都是一节点 二、只要知道一个节点，按关系找到其他节点 父节点 parentNode 子节点（第一个，最后一个） childNodes | firstChild | lastChild 同胞节点（上一个，下一个） nextSibling | previousSibling 三、找到节点： 每个节点都拥有着包含着关于节点某些信息的属性，这些属性是： 节点类型nodeType、 节点名nodtName、 节点值nodeValue nodeName属性含有节点的名称 元素节点的nodeName是标签名称 属性节点的nodeName是属性名称 文本节点的nodeName是#text 文档节点的nodeName是#document 注意：nodeName所包含的XML的元素的标签名称永远是大写的 对于文本节点，nodeValue属性包含文本 对于属性节点，nodeVlue属性包含属性值 nodeValue对于文档节点和元素节点是不可用的 nodeType属性可返回节点的类型。 最重要的节点类型是： 元素类型 节点类型 元素 1 属性 2 文本 3 注释 8 文档 9 文档流的概念： 每一次页面执行完毕就形成了一个文档流并且关闭。 直接以输出的方式无法再原来的文档流中添加东西只能是新建其他文档流 可以在一个文档流中 1、创建节点 document.createElement document.createTextNode document.setAttr 直接创建元素节点：文本节点使用innerText或者innerHTML放进去，属性节点使用元素的属性名.属性值给进去 2、添加到文档流中 nodeName.appendChild(node);追加子节点 nodeName.insertBefore(srcNode,targetNode); 将scr插入到target之前 3、删除节点 nodeName.remove();
<html> <head> </head> <body> <div> </div> <div id="one"> </div> <div name="two"> </div> <a id="alink" href="http://www.baidu.com" target="_blank" title="this is test"><s>test</s></a> <input name="user" type="text" value="数据"/> <textarea>fjhgkjgj</textarea> </body> </html> <script> //var objs=document.getElementById("alink"); //objs是一个对象，具有对象的属性 //操作属性 /* objs.title="我读取你了"; objs.href="www.gz123.com"; objs.hello="hello nice to meet you!"; alert(objs.hello); */ //操作内容，对于有开始和结束标记的，两个操作内容方式 //objs.innerText="brother"; //objs.innerText="brother" //alert(objs.innerText);//读取的对象的innerText只会读取文本格式的值 //objs.innerHTML="<b>test</b>"; //alert(objs.innerHTML);//里面的HTML标签也出来了 var obj=document.getElementsByTagName("textarea")[0]; alert(obj.value); var obj=document.getElementsByName("user")[0]; obj.value="郭大侠"; </script>
<html> <head> <style type="text/css"> #alink{ display:block; width:300px; } .test{ width:500px; height:300px; border:5px solid blue; } .demo{ font-size:4cm; color:red; background:yellow; } </style> </head> <body onload="show()"> <div> </div> <div id="one"> </div> <div name="two"> </div> <a id="alink" href="http://www.baidu.com" target="_blank" title="this is test"><b>test</b></a> </body> </html> <script> var obj=document.getElementById("alink"); //对象的style属性也可以看成是一个对象 //注意，如果原来样式中有-，需要去掉，然后将后面的单词首字母大写 /*obj.style.backgroundColor="red"; obj.style.fontSize="2cm"; obj.style="height:500px;color:red;"; alert(obj.style.width); */ //直接弹出width属性,发现怎么也弹不出来。当然如果使用内样式设置，通过对象名.style.属性名可以获取得到。 //这时候我们需要这样获取，就是： //alert(obj.offsetWidth); //获取对象自身的一些属性就这样玩。 //alert(obj.offsetHeight); //alert(obj.style.color);//注意：有些属性又需要这样做，所以可以先测试下不出效果再改变 //使用className设置属性 obj.className="test"; //可以指定多个类 //obj.className="test demo";//或者 obj.className+=" demo";//注意空格 //删除样式 obj.className=""; //遍历对象属性 var o=""; for( o in obj){ document.write(o+":"+obj[o]+"<br/>"); } </script>
<html> <head> </head> <body> <label for="checkall"><input type="checkbox" id="checkall" value="all" onchange="limitAllAndNone(this)" />全选</label> <label for="checknull"><input type="checkbox" id="checknull" value="none" onchange="limitAllAndNone(this)" />全不选</label> <br/> <input type="checkbox" name="checkbox_1" value="ss"/> 游戏 <input type="checkbox" name="checkbox_1"/> 小说 <input type="checkbox" name="checkbox_1"/> 电影 <input type="checkbox" name="checkbox_1"/> 音乐 </body> </html> <script> /*要求： 实现全选，全部选功能 */ function limitAllAndNone(box){//实现全选与全不选不兼容 var checkAll=document.getElementById("checkall"); var checkNone=document.getElementById("checknull"); var checkbox=document.getElementsByName("checkbox_1"); if(box==checkAll){ if(box.checked==true){ checkNone.checked=false; /* var o=""; for(o in checkbox){ alert(o["checked"]); o["checked"]=true; alert(1); } */ for(var i=0;i<checkbox.length;i++){ checkbox[i].checked=true; } } }else if(box==checkNone){ if(box.checked==true){ checkAll.checked=false; /* var o=""; for(o in checkbox){ o.checked=false; } */ for(var i=0;i<checkbox.length;i++){ checkbox[i].checked=false; } } } } </script> <html> <head> </head> <body> <script> document.write("<ul>"); for(var i=0;i<20;i++){ document.write("<li>"); document.write("<input type='checkbox' name='ids[]' value='"+i+"' >aaaaaa"); document.write("</li>"); } </script> <a href="javascript:sall()">全选</a><br/> <a href="javascript:fall()">反选</a><br/> <a href="javascript:nall()">全不选</a> <script> var cnames=document.getElementsByName("ids[]"); function sall(){ for(var i=0;i<cnames.length;i++){ cnames[i].checked=true; } } function fall(){ for(var i=0;i<cnames.length;i++){ cnames[i].checked=(cnames[i].checked==true)?false:true; } } function nall(){ for(var i=0;i<cnames.length;i++){ cnames[i].checked=false; } } </script> </body> </html>
<html> <head> <style type="text/css"> #card{ width:300px; height:200px; } #tit{ width:100% height:25px; line-height:25px; } #tit h3{ margin:0px; padding:0px; width:80px; background:#ccc; float:left; text-align:center; border:2px solid white; font-size:12px; color:white; } #content{ clear:both; width:100%; height:175px; background:#888; } #content div{ display:none; } #content .one{ display:block; } #tit .titin{ border:2px solid #888; background:#888; } </style> </head> <body> <div id="card"> <div id="tit"> <h3 onmouseover="show(0)" class="titin">第一项</h3> <h3 onmouseover="show(1)" >第二项</h3> <h3 onmouseover="show(2)" >第三项</h3> </div> <div id="content"> <div class="one"> <ul> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa</li> <li>aaa</li> </ul> </div> <div> <ul> <li>bbb</li> <li>bbb</li> <li>bbb</li> <li>bbb</li> <li>bbb</li> <li>bbb</li> </ul> </div> <div> <ul> <li>ccc</li> <li>ccc</li> <li>ccc</li> <li>ccc</li> <li>ccc</li> <li>ccc</li> </ul> </div> </div> </div> <script> //一般制作显示卡用ajax var h3os=document.getElementsByTagName("h3"); var cdivs=document.getElementById("content").getElementsByTagName("div"); function show(num){ for(var i=0;i<h3os.length;i++){ if(i==num){ h3os[num].className="titin"; cdivs[num].className="one"; }else{ h3os[i].className=""; cdivs[i].className=""; } } } </script> </body> </html>
<html> <head> </head> <body> <form name="firm1"> <input type="text" name="username" value="zhangsan"><br/> </form> <form name="firm2"> <input type="text" name="username" value="lisi"><br/> </form> <form name="firm3"> <input type="text" name="username" value="wangwu"><br/> </form> <script> /* var pro=""; for(pro in document){ document.write("document."+pro+"="+document[pro]+"<br/>"); } */ //alert(document.scripts.length); //alert(document.forms.length); alert(document.forms[1].username.value); alert(document.forms["firm2"].username.value); alert(document.forms.firm2.username.value); //item(i)获取对象数组的某个控件item ("itemname")获取对象数组的指定控件 alert(document.forms.item(1).username.value); alert(document.forms.item("firm2").username.value);//火符可能出现一直是第一个控件的问题，兼容性导致 alert(document.firm2.username.value); alert(document[firm2].username.value); </script> </body> </html>
<html> <head> </head> <body> <div> <u>dddd</u> <b>bbbb</b> <p id="pp"><a>aaaaaaaaaaaa</a><span>wwww</span></p> <h2></h2> <i>ddl</i> </div> </body> <script> var pobj=document.getElementById("pp"); //alert(pobj.nodeType); //alert(pobj.nodeName); //alert(pobj.parentNode.nodeType); //alert(pobj.parentNode.nodeName); //alert(pobj.childNodes.length);//注意，空格算一个子节点 //alert(pobj.childNodes[0].nodeName); //alert(pobj.lastChild.nodeName); //alert(pobj.firstChild.nodeName); //alert(pobj.nextSibling.nodeName); //alert(pobj.previousSibling.nodeName); //alert(pobj.previousSibling.previousSibling.childNodes[0].nodeValue); </script> </html>
<html> <head> </head> <body> aaaaaaaaaaaaaaaaa<br/> aaaaaaaaaaaaaaaaa<br/> aaaaaaaaaaaaaaaaa<br/> aaaaaaaaaaaaaaaaa<br/> aaaaaaaaaaaaaaaaa<br/> <div id="one" style="400px; height:200px;background:yellow;"> <b> ghjfghkjghl; </b><br/> <p id="two"> dddd </p><s>gutgjutg</s> </div> <script> //html执行到结尾会默认关闭文档流 function test1(){ document.write("##############<br/>"); document.write("##############<br/>"); document.close();//文档流关闭方法也会关闭文档流 document.write("@@@@@@@@@@@@@@<br/>"); document.write("##############<br/>");document.write("@@@@@@@@@@@@@@<br/>"); } var one=document.getElementById("one"); var pobj=document.getElementById("two"); //alert(1); function test(){ var tu=document.createElement("img"); tu.src="pengiue.jpg"; tu.alt="this is demo" var aobj=document.createElement("a"); aobj.href="http://www.baidu.com"; aobj.target="_blank"; aobj.title="这是一个test测试"; //aobj.innerText="brophp"; //document.body.appendChild(aobj); aobj.appendChild(tu); //one.appendChild(aobj); //alert(1); //one.insertBefore(aobj,pobj);//在之前插入 insertAfter(one,pobj,aobj); } function insertAfter(pobj,obj,newobj){//在它之后插入 if(obj.nextSibling.nodeType==1){//1表示的是元素 pobj.insertBefore(newobj,obj.nextSibling); }else{ pobj.appendChild(newobj); } } function del(){ var one=document.getElementById("one"); one.removeChild(one.lastChild); } </script> bbbbbbbbbbbbbbbbb<br/> bbbbbbbbbbbbbbbbb<br/> bbbbbbbbbbbbbbbbb<br/> bbbbbbbbbbbbbbbbb<br/> bbbbbbbbbbbbbbbbb<br/> <a href="javascript:test()">add</a> <a href="javascript:del()">del</a> </body> </html>