<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>DOM对象</title> </head> <body> <ul id="Ul"> <li name="text" title="第1条">1</li> <li >2</li> <li name="text" title="第3条">3</li> <li >4</li> <li name="text" title="第5条">5</li> <li name="text" title="第6条">6</li> </ul> <br /> <input type="button" onclick="getnum()" value="getElementById" /> <input type="button" onclick="getnum1()" value="getElementsByName" /> <input type="button" onclick="getnum2()" value="getElementsByTagName" /> <input type="button" onclick="getnum3()" value="getAttribute" /> <input type="button" onclick="getnum4()" value="setAttribute" /> <script type="text/javascript"> // getElementById() 通过指定ID获取元素 唯一 function getnum(){ var mynode = document.getElementById('Ul'); mynode.style.backgroundColor="#ccc"; } // getElementsByName() 通过元素名称name属性获得元素 集合 function getnum1() { var mynode = document.getElementsByName('text'); alert(mynode.length); for(var i=0; i<=mynode.length; i++){ mynode[i].style.color="blue"; } } // getElementsByTagName() 通过标签名称获得元素 集合 function getnum2(){ var mynode = document.getElementsByTagName('li'); alert(mynode.length); for(var i=0; i<mynode.length; i++){ mynode[i].style.backgroundColor="#f00"; } } // getAttribute() 通过元素节点的属性名称获取属性的值 function getnum3(){ var mynode = document.getElementsByTagName('li'); for(var i=0; i<mynode.length; i++){ var text = mynode[i].getAttribute('title'); if(text != null){ alert(text); } } } // setAttribute() 增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值 function getnum4(){ var mynode = document.getElementsByTagName('li'); mynode[1].setAttribute('title','第2条') } </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>节点</title> </head> <body> <ul id="text"><li>第一条数据</li><li>第二条数据</li><li id="s">第三条数据</li><li>第四条数据</li></ul> <input type="button" onclick="txt()" value="childNodes"> <input type="button" onclick="txt2()" value="firstChild"> <input type="button" onclick="txt3()" value="lastChild"> <input type="button" onclick="txt4()" value="firstChild"> <input type="button" onclick="txt5()" value="nextSibling"> <input type="button" onclick="txt6()" value="previousSibling"> <input type="button" onclick="txt7()" value="appendChild"> <input type="button" onclick="txt8()" value="insertBefore"> <input type="button" onclick="txt9()" value="removeChild"> <input type="button" onclick="txt10()" value="replaceChild"> <input type="button" onclick="txt11()" value="createElement"> <input type="button" onclick="txt12()" value="createTextNode"> <script> var Ul = document.getElementById('text'); var Li = document.createElement('li'); var S = document.getElementById('s'); // childNodes 访问选定元素节点下的所有子节点的列表 数组 var child = Ul.childNodes; function txt(){ alert(len.length); } // firstChild 属性返回‘childNodes’数组的第一个子节点 function txt2(){ Ul.firstChild.style.color="red"; } // lastChild 属性返回‘childNodes’数组的最后一个子节点 function txt3(){ Ul.lastChild.style.color="blue"; } // parentNode 获取指定节点的父节点 function txt4(){ var Li = document.getElementsByTagName('li'); alert(Li[0].parentNode.nodeName); } // nextSibling 属性可返回某个节点之后紧跟的节点 function txt5(){ S.nextSibling.style.borderBottom = '1px solid #000'; } // previousSibling 属性可返回某个节点之前紧跟的节点 function txt6(){ S.previousSibling.style.borderBottom = '1px solid #f00'; } // appendChild() 在指定节点的最后一个子节点列表之后添加一个新的子节点 function txt7(){ Li.innerHTML = "插入第五条数据"; Ul.appendChild(Li); } // insertBefore() 在指定的已有子节点之前插入新的子节点。 function txt8(){ Li.innerHTML = "指定节点插入"; Ul.insertBefore(Li,child[1]); } // removeChild() 从子节点列表中删除某个节点。如删除成功,此方法可返回被删除的节点,如失败,则返回 NULL。 function txt9(){ Ul.removeChild(child[0]) } // replaceChild() 用新节点替换某个子节点 function txt10(){ var textnode=document.createTextNode('新内容'); child[0].replaceChild(textnode,child[0].childNodes[0]); } // createElement 创建元素节点 function txt11(){ var li=document.createElement('li'); li.innerHTML = "创建元素"; Ul.appendChild(li); } // createTextNode 创建新的文本节点 function txt12(){ var textnode=document.createTextNode('新内容'); child[0].replaceChild(textnode,child[0].childNodes[0]); } </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .on{ color:#f00;} #txt > div{ display: none;} #txt .show{ display:block;} </style> </head> <body> <ul id="tab"> <li class="on">选项一</li> <li>选项二</li> <li>选项三</li> </ul> <div id="txt"> <div class="show">选项一内容</div> <div>选项二内容</div> <div>选项三内容</div> </div> <script> var Txt=document.getElementById('txt'); var Li=document.getElementsByTagName('li'); var oDiv=Txt.getElementsByTagName('div'); for(var i=0; i<Li.length; i++){ Li[i].index=i; Li[i].onclick=function(){ for(var j=0; j<Li.length; j++){ Li[j].className=""; oDiv[j].className=''; } this.className="on"; oDiv[this.index].className="show"; } } </script> </body> </html>
评论 (0 )
最新评论
暂无评论
赶紧努力消灭 0 回复