DOM编程

缺乏、安全感 2022-04-24 02:14 135阅读 0赞

### 简介 ###

DOM：基于文档对象模型编程，解析HTML页面时，js引擎将HTML页面中每一个标签都封装成一对象，通过操作这些对象在页面中显示效果  
整个文档：document  
一个标签对象代表一个节点：Node — 属性：nodeName(节点名称)  
它是以一个树状结构进行存储：

HTML

HEAD

BODY

MATA

TITLE

FORM

INPUT

学习DOM编程的作用：

*  通过文档对象的一些属性或者一些方法获取标签对象
 *  通过标签对象更改他的属性来显示一些效果

### 通过document的集合属性获取标签对象 ###

all：返回当前页面中的所有标签对象集合  
forms:获取当前页面中的所有form标签对象的集合  
images:获取页面中所有ing标签对象的集合  
links：获取当前页面中所有的a标签的集合

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>通过document的集合属性获取标签对象</title>
    	</head>
    	<body>
    <form>
    	<a href="#">超链接</a><img src = "" />
    	<img src = "" />
    </form>
    <form>
    	<a href="#"></a><img src = ""/>
    </form>
    	</body>
    <script>
    	/*var nodeList = document.all;*/
    	//var nodeList = document.forms;
    	var nodeList = document.links;
    	alert(nodeList.length);
    	for(var i = 0;i<nodeList.length;i++){ 
    		document.write(nodeList[i].nodeName+" ");
    	}
    </script>
    </html>

### 通过查询节点关系获取标签对象 ###

节点关系：  
1.parentNode：父节点  
2.childNodes：当前的所有子节点  
3.firstChild：第一个子节点  
4.lastChild：最后一个子节点  
5.兄弟节点：sibling

*  nextSibling：下一个兄弟节点
 *  previousSibling：上一个兄弟节点

在节点关系：childNodes，firstChild，lastChild，有一个节点的类型：nodeType(查看节点类型)

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>对应</th> 
   <th>名称</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>空格换行</td> 
   <td>3</td> 
   <td>#text</td> 
  </tr> 
  <tr> 
   <td>标签对象</td> 
   <td>1</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>HTML注释</td> 
   <td>8</td> 
   <td>#comment</td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>通过查询节点关系来获取标签对象</title>
    	</head>
    	<body>
    <form><a href="#"></a><input type="text" /><input type="button" /></form>
    <form><a href="#"></a><img src="" /><input type="button" /></form>
    	</body>
    	<script>
    		//需求1：需要获取第一个a标签对象 
    		var aNode = document.links[0];
    		alert(aNode.nodeName);
    		//需求2：获取他的父节点标签
    		var parent = aNode.parentNode;
    		alert(parent.nodeName);
    		//需求3：获取当前第一个form标签对象的所有子节点对象
    		var childs = parent.childNodes;
    		alert(childs.length)
    		for(var i = 0;i<childs.length;i++){ 
    			if(childs[i].nodeType == 1){ 
    				document.write(childs[i].nodeName+",节点类型是："+childs[i].nodeType+"<br />");
    			}	
    		}
    		//需求4：通过parent获取第一个子节点对象
    		var node = parent.firstChild;
    		alert(node.nodeName);
    		//需求5：通过parent获取最后一个子节点对象
    		var last = parent.lastChild;
    		alert(last.nodeName);
    		//获取第二个a节点
    		var aNode = document.links[1];
    		alert(aNode.nodeName);
    		//获取aNode下一个兄弟节点
    		var next = aNode.nextSibling;
    		alert(next.nodeName);
    	</script>
    </html>

### 通过docuent方法获取标签对象 ###

*  getElementById(“id属性值”)；返回的是某个标签对象 / / id一定要唯一
 *  getElementsByName(“name属性值”)；返回的标签对象集合
 *  getElementsByTagName(“标签名称”)；/ / 通过标签名称获取标签对象

<html>
    	<head>
    		<meta charset="UTF-8">
    		<title>通过document方法获取标签对象</title>
    		<script>
    			function init(){ 
    				//1.
    				/*var username = document.getElementById("user_name").value; alert(username);*/
    				//2.
    				/*var username = document.getElementsByName("username")[0].value; alert(username);*/
    				//3.
    				var username = document.getElementsByTagName("input")[0].value;
    				alert(username);
    			}
    		</script>
    	</head>
    	<body onload="init()">
    用户名：<input type="text" name="username" id="user_name" onblur="init()"/>
    	</body>
    </html>

### 其他操作 ###

文档对象：document

*  和**添加**元素对象相关的方法：  
    document.creatElement(“标签元素名称”)；  
    举例：创建 document.creatElement(“input”);  
    setAttribute(“属性名称”，“属性值”)；  
    举例：元素对象.setAttribute(“type”,“button”);
 *  和**插入**相关的方法：  
    appendChild(指定元素对象)；在父节点中调用  
    insertBefore(新元素对象，指定元素对象)；在指定对象前插入这个新对象
 *  .和**删除**相关的方法  
    removeChild(子节点对象);

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>document操作标签对象的其他方法</title>
    		<script>
    			
    			function addbutton(){ 
    				//创建一个input标签对象
    				var input = document.createElement("input");
    				input.setAttribute("type","button");
    				input.setAttribute("value","新按钮");
    				var bodyNode = document.getElementsByTagName("body")[0];
    				bodyNode.appendChild(input);
    			}
    		</script>
    	</head>
    	<body>
    <input type="button" value="添加" onclick="addbutton()"/><input type="button" value="按钮" />
    	</body>
    </html>