DOM-----document对象

来源：互联网发布：mac air怎么安装双系统编辑：程序博客网时间：2024/06/06 03:15

Dom模型演示1---window对象中的document对象

※※获取元素的3种方式：（绝对获取）
1、getElementById(): 通过标签中的id属性值获来取该标签对象
2、getElementsByName(): 通过标签中的name属性值来获取该标签对象集合
3、getElementsByTagName(): 通过标签名来获取该标签对象集合

※※所有节点(标签、属性、文本)都有3个属性：nodeName、nodeType、nodeValue

1、nodeName：节点的名称
2、nodeType："标签"为1， "属性"为2，"文本"为3
3、nodeValue："标签"节点是没有值的即null，属性和文本节点是有值的

注意： nodeValue不能获得标签的value值节点中的属性"value"的值应该用.valuequ去获取

getElementById(): 通过标签中的id属性值获来取该标签对象

 var divNode =document.getElementById("idDiv");            alert(divNode.nodeName+","+divNode.nodeType+","+divNode.nodeValue);            alert(divNode.innerText);

getElementsByName(): 通过标签中的name属性值来获取该标签对象集合

var divNode =document.getElementsByName("inputName");//Object，其实是一个数组※※※※alert(divNode[0].nodeName+","+divNode[0].nodeType+","+divNode[0].nodeValue);

getElementsByTagName(): 通过标签名来获取该标签对象集合

<span style="color:#333333;">var divNode =document.getElementsByTagName("input");//Object，其实是一个数组※※※※alert(divNode[0].nodeName+","+divNode[0].nodeType+","+divNode[0].nodeValue);alert(divNode[2].value);;//divNode[2]节点中的属性"value"的值</span>

※※二、相对获取(利用节点之间的层次关系)，获取节点：---Node
           1、父节点：parentNode--属性
           2、子节点：childNodes--集合
           3、上一个兄弟节点：previousSibling--属性
           4、下一个兄弟节点：nextSibling--属性
           5、使用以上属性时，要小心空白符节点(#Text)的存在。对于表格，还要注意<tr>有一个隐含的父节点<tbody>。

<span style="font-size:12px;"><!DOCTYPE html><html>  <head>    <title>domDemo.html</title><script type="text/javascript">function getNodeByLevel(){var tabNode=document.getElementById("table1");//获取父节点parentNodevar node=tabNode.parentNode;//alert(node.nodeName);//alert(tabNode.parentNode.parentNode.nodeName);//获取子节点/*   使用childNodes时，需注意几点：   1，<table>标签下还隐藏一个<tbody>标签，<tbody>下面才是<tr>   2,空白符(空格或换行符)是被看成是一个文本节点的。例如，如果<table>和<tr>之间有换行或空格，则<table>的第一个孩子节点nodeName是：#text   3, 上面的<tbody>和#text节点是兄弟关系*///需求：显示出表格中的所有姓名var chidren=tabNode.childNodes;//alert(chidren[0].nodeName);//TBODY//alert(chidren.length);//1var strNodes;for(var i=0;i<chidren.length;i++){var node=chidren[i];if(node.nodeName=="TBODY"){strNodes=node.childNodes;}}var str="";for (var i = 0; i < strNodes.length; i++) {//用卫条件把<tr>与<td>之间的空白符过滤掉if(strNodes[i].nodeType!=1){continue;}//注意，trNodes[x].childNodes[0]是空白符即#text节点，trNodes[x].childNodes[1]才是<td>节点var trChildNodes=strNodes[i].childNodes;for (var j = 0; j < trChildNodes.length; j++) {if(trChildNodes[j].nodeName=="TD"){if(isNaN(trChildNodes[j].innerText)){str=str+trChildNodes[j].innerText+"  ";}}}//上面是偷懒写法，如果想写得兼容性好些，应该还用for循环遍历strNodes[x]的所有孩子节点且过滤掉#text节点，获取第一个非空白子节点的innerTex}alert(str);//获取兄弟节点//上一个var node = tabNode.previousSibling.previousSibling;alert(node.nodeName);//<BR>节点alert(node.nodeName);//下一个var node=tabNode.nextSibling;alert(node.nodeName);}</script>  </head>    <body>    <table id="table1">      <tr> <td>张三</td><td>23</td></tr>    <tr> <td>Jack</td><td>20</td></tr>    <tr> <td>Rose</td><td>50</td></tr>    <tr> <td>李四</td><td>33</td></tr>    </table><hr/><input type="button" value="获得元素" onclick="getNodeByLevel()">  </body></html></span>

Dom模型演示4---节点的增、删、改操作--查有6种，在前面已经讲过

<!DOCTYPE html><html>  <head>    <title>domDemo2.html</title>    <style type="text/css">        div{            border:#0000ff solid 2px;            width:100px;            padding:10px;            margin:10px;        }        #div1{            background-color:#ff0000;        }        #div2{            background-color:#8080ff;;        }        #div3{            background-color:#ffff80;        }        #div4{            background-color:#00ff00;        }    </style>    <script type="text/javascript">        //添加一个文本节点        function createAndAdd1(){            var oTextLoad=document.createTextNode("新添加的文本内容");            var oDiv1Node=document.getElementById("div1");            //让div1节点把oTextNode节点添加为孩子            oDiv1Node.appendChild(oTextLoad);        }        //添加一个按钮节点---基于对象,dom        function createAndAdd2(){            var oTextLoad=document.createElement("input");            oTextLoad.type="button";            oTextLoad.value="添加的按钮";            var oDiv1Node=document.getElementById("div1");            //让div1节点把oTextNode节点添加为孩子            oDiv1Node.appendChild(oTextLoad);        }        //第3种添加节点的方式---html的方式        function createAndAdd3(){            var oDiv1Node=document.getElementById("div1");        //oDiv1Node.innerHTML="湖南城市学院";//只赋值一次        //oDiv1Node.innerHTML+="湖南城市学院";//赋值多次        oDiv1Node.innerHTML+="<a href='http://www.baidu.com'>百度</a>";        }        //删除节点        function deleteNode(){            //获取div2节点(站在外面删除)            var oDiv2Node=document.getElementById("div2");            //oDiv2Node.removeNode();            //oDiv2Node.removeNode(true);//删当前节点及子节点--子树            //※removeNode()方法不建议使用，因为这种删除不彻底!---建议使用父节点来删除            oDiv2Node.parentNode.removeChild(oDiv2Node);        }        //修改节点---移动替换        function updateNode1(){            var oDiv1Node=document.getElementById("div1");            var oDiv3Node=document.getElementById("div3");//            oDiv1Node.replaceNode(oDiv3Node);//自己替换，不建议            oDiv1Node.parentNode.replaceChild(oDiv3Node,oDiv1Node);        }        //修改节点2---克隆替换        function updateNode2(){            var oDiv1Node=document.getElementById("div1");            var oDiv3Node=document.getElementById("div3");            var oDiv3NodeClone=oDiv3Node.cloneNode(true);//包含子节点的克隆            //var oDiv3NodeClone=oDiv3Node.cloneNode();//不包含子节点的克隆            oDiv1Node.parentNode.replaceChild(oDiv3NodeClone,oDiv1Node);        }    </script>  </head>   <body>        <div id="div1"> </div>       <div id="div2"> div区域2中的文字 </div>       <div id="div3"> div区域3中的文字 </div>       <div id="div4"> div区域4中的文字 </div>     <hr/>     <input type="button" value="添加一个文本节点" onclick="createAndAdd1()">     <input type="button" value="添加一个按钮" onclick="createAndAdd2()">     <input type="button" value="HTML添加" onclick="createAndAdd3()">         <input type="button" value="删除节点" onclick="deleteNode()">         <input type="button" value="修改节点1" onclick="updateNode1()">     <input type="button" value="修改节点2" onclick="updateNode2()">  </body></html>

0 0