DOM-----document对象

最新推荐文章于 2021-07-26 15:39:01 发布

wangjian_an

最新推荐文章于 2021-07-26 15:39:01 发布

阅读量364

点赞数

本文链接：https://blog.csdn.net/wangjian_an/article/details/51598837

版权

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");
			//获取父节点parentNode
			var 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);//1
			var 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="获得元素" οnclick="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="添加一个文本节点" οnclick="createAndAdd1()">
     <input type="button" value="添加一个按钮" οnclick="createAndAdd2()">
     <input type="button" value="HTML添加" οnclick="createAndAdd3()">
    
     <input type="button" value="删除节点" οnclick="deleteNode()">
    
     <input type="button" value="修改节点1" οnclick="updateNode1()">
     <input type="button" value="修改节点2" οnclick="updateNode2()">
  </body>
</html>