<!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=gb2312" />

<title>无标题文档</title>

<script type="text/javascript">

function demo()

{

	var divObj = document.getElementById("divid1");  //根据ID获取

	divObj.style.backgroundColor = "red";

	var parentNode = divObj.parentNode;  //父节点

	//getNodeInfo(parentNode);

	var childNodes = divObj.childNodes;  //子节点

	//getNodeInfo(childNodes[0]);

	var preNode = divObj.previousSibling.previousSibling; //前一个节点

	//getNodeInfo(preNode);

	var nextNode = divObj.nextSibling;  //下一个节点

	//getNodeInfo(nextNode);

	//获取节点的方法：

	//1、getElementById(HTML标签中定义的id值)

	//2、getElementsByName(HTML标签中定义的name值)

	//3、getElementsByTagName(HTML标签名)

	var tabNode = document.getElementById("table1");

	var tdNodes = tabNode.getElementsByTagName("td");

	getNodeInfo(tdNodes[0].childNodes[0]);

}

function getNodeInfo(node)

{

	alert("name:"+node.nodeName+"...type:"+node.nodeType+"...value:"+node.nodeValue+"---");

}

//--------------------------打印层级节点

var str = "";

function listNode(node, level)

{

	printInfo(node, level);

	level++;

	var nodes = node.childNodes;

	alert(nodes);

	for(var x=0; x<nodes.length; x++)

	{

		if(nodes[x].hasChildNodes())

			listNode(nodes[x], level);

		else

			printInfo(node, level);

	}

}

function printInfo(node, level)

{

	str += getSpace(level) + "name:"+node.nodeName+"...type:"+node.nodeType+"...value:"+node.nodeValue+"<br/>";

}

function getSpace(level)

{

	var s = "";

	for(var x=0; x<level; x++)

	{

		s += "|----";

	}

	return s;

}

function showNode()

{

	listNode(document, 0);

	document.write(str);

}

</script>

</head>

<body>

<input type="button" value="点击" onclick="showNode()" />

<div id="divid1">

	ssssssssss

</div>

<table id="table1" border="1px">

	<tr>

		<td>单元格一</td>

		<td>单元格二</td>

	</tr>

	<tr>

		<td>单元格三</td>

		<td>单元格四</td>

	</tr>

</table>

</body>

</html>

JavaScript -- 练习，Dom 获取节点的更多相关文章

  1. JavaScript之DOM创建节点

    上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...

  2. JavaScript HTML DOM 元素(节点)

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...

  3. JavaScript的DOM操作(节点操作)

    创建节点createElement()var node = document.createElement(“div”);没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(docum ...

  4. HTML中javascript使用dom获取dom节点范例

    <!-- HTML结构 --> <div id="test-div"> <div class="c-red"> <p ...

  5. JavaScript HTML DOM元素节点常用操作接口

    在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...

  6. javascript中DOM获取和设置元素的内容、样式及效果

    getElementById() 根据id获取dom元素 没有找到则返会Null <!DOCTYPE html> <html lang="en"> < ...

  7. javaScript操作DOM对象（看三遍，敲三遍，写三遍！ 不会你找我）！！

    DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE        2.HTM ...

  8. dom操作节点之常用方法

    DOM:获取节点:{1. document.getElementById (元素id):通过元素id找到节点2. document.getElementsByClassName (元素类名classN ...

  9. javascript HTML DOM 简单介绍

    JavaScript HTML DOM通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素.HTML DOM (文档对象模型)当网页被加载时,浏览器会创建页面的文档对象模型( ...

随机推荐

  1. HTML学习笔记——语法+骨架

    一.什么是HTML HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语言是一种标记语言,不需要编译,直接由浏览器执行 ...

  2. poj 3590(dp 置换)

    题目的意思是对于序列1,2,...,n.要你给出一种字典序最小的置换使得经过X次后变成最初状态,且要求最小的X最大. 通过理解置换的性质,问题可以等价于求x1,x2,..,xn 使得x1+x2+... ...

  3. [Spring MVC]学习笔记－－@RequestMapping

    @RequestMapping是用来将请求的url,映射到整个类,或者里面的方法. @Controller @RequestMapping("/test") public clas ...

  4. POJ2417 Discrete Logging【BSGS】

    Discrete Logging Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 5577   Accepted: 2494 ...

  5. vs报错找不到错在哪里！Validation failed for one or more entities

    今天在处理Entity Framework修改数据库时,报错: Validation failed for one or more entities. See 'EntityValidationErr ...

  6. K-th Number(主席树)

    K-th Number Time Limit: 20000MS   Memory Limit: 65536K Total Submissions: 59327   Accepted: 20660 Ca ...

  7. 【jenkins】jenkins实时显示python脚本输出

    jenkins在构建shell脚本时可以实时输出结果,但是在构建python脚本时,是等到python执行完成以后,才显示结果,这个对于我们判断脚本执行状态非常不利 这里介绍一种方法,能够实时显示py ...

  8. Java CLASSPATH

    @1:CLASSPATH用途: #1:给import指路 -- import后面的包名(转换为相应的路径后)与CLASSPATH中的各项相连接. 然后解释器从这些路径(前面连接之后的结果)中查找程序中 ...

  9. 构建Ruby开发环境（Windows+Eclipse+Aptana Plugin）

    1.安装Ruby ①.从http://rubyinstaller.org/downloads/下载安装包:rubyinstaller-2.2.5-x64.exe,直接安装.(so easy) 2.安装 ...

  10. DP专题(不定期更新)

    1.UVa 11584 Partitioning by Palindromes(字符串区间dp) 题意:给出一个字符串,划分为若干字串,保证每个字串都是回文串,同时划分数目最小. 思路:dp[i]表示 ...