<!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. [转]Linux Socket编程 Socket抓取网页源码

    “一切皆Socket!” 话虽些许夸张,但是事实也是,现在的网络编程几乎都是用的socket. ——有感于实际编程和开源项目研究. 我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览 ...

  2. Sql注入基础_access注入

    1.access注入攻击片段-联合查询 2.access注入攻击片段-逐字猜解法 3.Access偏移注入(表名和列名猜解成功率不是百分百,猜解不到) access注入攻击片段-联合查询法 判断注入 ...

  3. Echarts-雷达图

    // 显示能力雷达图 $(".company .grade").hover(function () { $(".powerChart").show(); var ...

  4. HNOI2014

    本蒟蒻到现在才把$HNOI2014$的坑填完... $AFO$之后码力急速下降... 感觉都没有码力了... 附上题解: $DAY1$: $T1$: BZOJ3571: [Hnoi2014]画框 $T ...

  5. MySQL中的索引提示Index Hint

    MySQL数据库支持索引提示(INDEX HINT)显式的高速优化器使用了哪个索引.以下是可能需要用到INDEX HINT的情况 a)MySQL数据库的优化器错误的选择了某个索引,导致SQL运行很慢. ...

  6. issubclass/type/isinstance、函数和方法、反射、callable、特殊成员补充

    一.issubclass/type/isinstance(***) 1.issubclass(参数1, 参数2):检查第一个参数是否是第二个参数的 子子孙孙类,如下示例: class Base(obj ...

  7. PAT 1071. 小赌怡情(15) JAVA

    1071. 小赌怡情(15) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 常言道“小赌怡情”.这是一个很简单的 ...

  8. Android studio 相关下载

    Android studio  http://www.androiddevtools.cn/ Oracle的VirtulBox https://www.virtualbox.org/wiki/Down ...

  9. vloatile总结与synchronized对比

    原文地址:https://www.cnblogs.com/xiaoxian1369/p/5411877.html 1.要使volatile变量提供理想的线程安全,必须同时满足以下两个条件:1).对变量 ...

  10. CSRF（Cross Site Request Forgery, 跨站请求伪造）

    一.CSRF 背景与介绍 CSRF(Cross Site Request Forgery, 跨站域请求伪造)是一种网络的攻击方式,它在 2007 年曾被列为互联网 20 大安全隐患之一.其他安全隐患, ...