<!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. keras常用的网络层

    一.常用层 常用层对应于core模块,core内部定义了一系列常用的网络层,包括全连接.激活层等. 1.Dense层 Dense层:全连接层. keras.layers.core.Dense(outp ...

  2. 【BZOJ1812】[Ioi2005]riv 树形DP

    [BZOJ1812][Ioi2005]riv Description 几乎整个Byteland王国都被森林和河流所覆盖.小点的河汇聚到一起,形成了稍大点的河.就这样,所有的河水都汇聚并流进了一条大河, ...

  3. CSS 关于让页面的高度达到电脑屏幕的底部

    .sidebar:before {content: "";display: block;width: 190px;position: fixed;bottom: 0;top: 0; ...

  4. 打日志--以python为例

    日志报错要去修,要不然是隐患,总有一天会爆炸 增加日志是排错的好方法,不要不舍得加日志,比如怕代码变难看,怕日志输出太多. python logging exc_info sys.exc_info() ...

  5. Docker Metasploit Framework

    https://hub.docker.com/r/usertaken/metasploit-framework/ docker pull usertaken/metasploit-framework ...

  6. Wireshark网络分析工具（一）

    关于Wireshark,熟悉网络或网络性能方面的同学应该知道,使用Wireshark工具通过抓取数据包,对系统网络问题进行分析,该工具简单.易用.易学! 百度百科上面是这样描述的:Wireshark( ...

  7. python模块学习(一)

    模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才 ...

  8. javaSE27天复习总结

    JAVA学习总结    2 第一天    2 1:计算机概述(了解)    2 (1)计算机    2 (2)计算机硬件    2 (3)计算机软件    2 (4)软件开发(理解)    2 (5) ...

  9. 设计一个算法，採用BFS方式输出图G中从顶点u到v的最短路径（不带权的无向连通图G採用邻接表存储）

    思想:图G是不带权的无向连通图.一条边的长度计为1,因此,求带顶点u和顶点v的最短的路径即求顶点u和顶点v的边数最少的顶点序列.利用广度优先遍历算法,从u出发进行广度遍历,类似于从顶点u出发一层一层地 ...

  10. MD5，SHA256，时间戳获取

    import hashlib # MD5加密 def jiamimd5(src): m = hashlib.md5() m.update(src.encode('UTF-8')) return m.h ...