JS操作DOM

最新推荐文章于 2025-04-03 21:47:02 发布

原创最新推荐文章于 2025-04-03 21:47:02 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#DOM #js

Web Desgin 专栏收录该内容

6 篇文章

订阅专栏

一、结构

Window

|--history：历史对象

|--document：文档对象

|--location：地址栏

二、节点获取

1、获取节点方法

getElementById	根据id属性获取节点
getElementsByName	根据标签name属性获取节点，返回一节点数组
getElementsByTagName	获取标签名获取节点，返回一节点数组

2、每个节点都有特定属性

（1）nodeName 节点名称

（2）nodeValue 节点值

（3）nodeType 节点类型

3、常见节点类型：

节点获取实例：

Body代码：

<body>
<div id="text">html文本</div>
<input type="button" onclick="showValue()"/>
<input type="text" name="t" value="显示"/>
<input type="radio" name="sex" value="male" />男 <input type="radio" name="sex" value="female" />女
<table>
	<tr>
  	<td>1</td>
    <td>2</td>
  </tr>
  <tr>
  	<td>3</td>
    <td>4</td>
  </tr>
</table>

Js代码：

<script type="text/javascript">

function showValue() {
	//通过id获取
	var idNode = document.getElementById("text");
	alert(idNode.nodeName + "..." + idNode.nodeType + "..." + idNode.nodeValue);
	
	//通过name获
	var nameNodes = document.getElementsByName("sex");
	for(var i=0;i<nameNodes.length;i++) {
		alert(nameNodes[0].nodeName + "..." + nameNodes[0].nodeType + "..." + nameNodes[0].nodeValue + "..." + idNode.innerHTML);
	}
	
	//通过标签名
	var tagNodes = document.getElementsByTagName("td");
	for(var i=0;i<nameNodes.length;i++) {
		alert(tagNodes[i].nodeName + "..." + tagNodes[i].nodeType + "..." + tagNodes[i].nodeValue);
	}
}
</script>

三、通过等级获取节点

1、节点之间的关系：

（1）父节点唯一，parentNode

（2）子节点多个，childNodes

（3）兄弟节点：

上一个：唯一 previousSibling

下一个：唯一 nextSibling

实例：

Bod代码和上例一样

Js代码：

<script type="text/javascript">

function showValue() {
	//通过id获取
	var idNode = document.getElementById("tab");
	
	/*//父节点
	var parentNode = idNode.parentNode;
	
	//下一个节点
	var nextNode = idNode.nextSibling;
	//子节点
	var childNode = nextNode.childNodes();
	alert(childNode.length);
		
	//上一个节点
	var preNode = idNode.previousSibling;*/
	
	/*特殊情况
		如果节点间有空格，或换行，ie解析成空格，firefox是什么就解析成什么
	*/
	//获取tab的下一个节点
	idNode = idNode.nextSibling;
	var reg = /\bCha/;
	//alert(idNode.nodeValue.match(reg);
	while(idNode.nodeType == 3 && idNode.nodeValue == " ") {
			idNode = idNode.nextSibling;
			alert("f");
	}
	alert(idNode.nodeName);
	
	
}
</script>

完整实例：遍历文档的所有标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
</style>
<script type="text/javascript">

function showNodes() {
	var dialog = open("","_blank");
	getNode(document,0);
	
	dialog.document.write(info);
}

//遍历标签
var info = "";
function getNode(node,level) {
		info+=getLevel(level) + node.nodeName + "<br/>";
		
		level++;
		var arr = node.childNodes;
		for(var i=0;i<arr.length;i++) {
			if(arr[i].hasChildNodes()) {
				getNode(arr[i],level);
			} else {
				info+=getLevel(level) + arr[i].nodeName + "<br/>";	
			}
		}
}

//缩进
function getLevel(level) {
		var sb = "";
		for(var i=0;i<level;i++) {
				sb+="   ";
		}
		sb+="|--"
		return sb;
}
</script>
</head>
<body>
<div id="text">html文本</div> 
<input type="button" onclick="showNodes()" value="显示"/>
<input type="text" name="t"/>
<input type="radio" name="sex" value="male" />男 <input type="radio" name="sex" value="female" />女
<table id="tab">
	<tr>
  	<td>1</td>
    <td>2</td>
  </tr>
  <tr>
  	<td>3</td>
    <td>4</td>
  </tr>
</table>
<div>又是一块区域</div>
</body>
</html>