DOM----获取文档中的元素

最新推荐文章于 2023-01-15 20:54:37 发布

112358lo

最新推荐文章于 2023-01-15 20:54:37 发布

阅读量488

点赞数

分类专栏：练习 DOM javascript

本文链接：https://blog.csdn.net/e286878553/article/details/80884551

版权

练习同时被 3 个专栏收录

53 篇文章 0 订阅

订阅专栏

javascript

6 篇文章 0 订阅

订阅专栏

DOM

2 篇文章 0 订阅

订阅专栏

知识点：

两个名词：1）、元素（Element）：指的是页面中的标签对象----容器。

2）、节点（Node）：指的是页面中的标签、文本、属性----表示dom树上所有的节点。

◇◇◇◇获取文档中的元素Ⅰ◇◇◇

注：直接通过document获取的三种方式，只能获取元素

方式一：document.getElementById();

方式二：document.getElementsByName();//该方式获取的是一个元素集，所以要指明下标

方法三：document.getElementByTagName();//该方式获取的也是一个标签元素集，也需要指明下标

节点的三个属性：

	标签	属性	文本内容
节点名称（nodeName）	标签名	属性名	#text
节点类型（nodeType）	1	2	3
节点值（nodeValue）	null	属性值	文本内容

注：第一步：获得一个元素对象。

第二步：在通过元素对象调用getAttributeNode(“属性名称”)获得属性对象。或者是用元素对象调用ChildNodes()（得到的是一个数组）获得文本内容对象。

第三步：再通过元素对象/属性对象/文本内容对象调用nodeName、nodeType、nodeValue属性。

主要代码：

 <body>
    <div id="div1" name="d1">这是div1中的文本</div>
    <input type="button" value="获取文档中的元素1" οnclick="demo1();"/></br>
    	<script type="text/javascript">
		function demo1(){
			var objDiv=document.getElementById("div1");
			objDiv.innerText="湖南城市学院";
			objDiv.style.backgroundColor="#0000ff";
			objDiv.style.width="500px";
			objDiv.style.height="80px";
		}
	
	</script>
    
    
    <div id="div2" name="d2">这是div2中的文本</div>
    <script type="text/javascript">
    	function demo2(){
    		var objDiv=document.getElementsByName("d2")[0];
    		objDiv.innerText="中国益阳";
			objDiv.style.backgroundColor="#ff0000";
			objDiv.style.width="300px";
			objDiv.style.height="80px";
    	}
    
    </script>
    <input type="button" value="获取文档中的元素2" οnclick="demo2();"/></br>
    <div id="div3" name="d3">这是di3中的文本</div>
    <script type="text/javascript">
    function demo3(){
    	    var objDiv=document.getElementsByTagName("div")[2];
    	    objDiv.innerText="中国湖南"
            objDiv.style.backgroundColor="#00ff00";
			objDiv.style.width="350px";
			objDiv.style.height="80px";
			}
    </script>
    <input type="button" value="获取文档中的元素3" οnclick="demo3();"/></br>
    <div id="div4" value="abc" name="d4">这是div4中的文本</div>
    
    <input type="button"  value="获取文档中的元素获得节点中的三个通用属性" οnclick="demo4();"/></br>
  		
  		<script type="text/javascript">
  		//元素
  		function demo4(){
  		var objDiv=document.getElementById("div4");
  		alert(objDiv.nodeName+","+objDiv.nodeType+","+objDiv.nodeValue);
  		
  		//属性(通过元素对象获取属性对象)
  		var att=objDiv.getAttributeNode("value");//读的 <div id="div4" value="abc" name="d4">中的value，value是属性
  		alert(att);//它是一个数组。
  		alert(att.nodeName+","+att.nodeType+","+att.nodeValue);
  		
  		//文本内容(通过元素对象获取文本内容对象)
  		var text=objDiv.childNodes[0];
  		alert(text.nodeName+","+text.nodeType+","+text.nodeValue);
  		}
  		
  		</script>
  </body>

◇◇◇◇获取文档中的元素Ⅱ◇◇◇

注：可以通过dom树中的层次结构获取其它元素和节点。

层次关系有：

父亲：parentElment，parentNode

兄弟：nextSibling，previousSibling

儿子：fristChild、childNodes集合

<body>
   <!-- ◇◇◇◇获取文档中的元素Ⅱ◇◇◇ -->
    <<div id="div1" >这是div2中的文本</div>
		<table id="tab1">
		    <tr>
				<td>单元格一</td>
				<td>单元格二</td>
			</tr>
			<tr>
				<td>单元格2一</td>
				<td>单元格2二</td>
			</tr>
		</table>
		<dl>
			<dt>上层项目</dt>
			<dd>下层项目1</dd>
			<dd>下层项目2</dd>
			<dd>下层项目3</dd>
		</dl>
    	
    <input type="button" value="获取文档中节点" οnclick="demo1();"/></br>
    	<script type="text/javascript">
			
			function demo1(){
			alert("abc");
				var objT=document.getElementById("tab1");//获得元素对象
				
				//父节点
				var node=objT.parentNode;
				alert(node.nodeName);//BODY
				
				//第一个孩子
				var node2 = objT.firstChild;
				alert(node2.nodeName);//#text ---文本内容，本例是空白符
				
				//用循环法去找第一个孩子
				var i=0;
				var node22 = objT.childNodes[i];
				while(node22.nodeName!="TBODY"){
					i++;
					node22 = objT.childNodes[i];
				}  
				alert(node22.nodeName);
				//找兄弟
				var objTr=node22.childNodes[0];
				if(objTr=="#Text"){
					objTr=objTr.nextSibling;
				} 
				  alert(objTr.nodeName);
			}
		</script>
    
   
  </body>