<!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. HDU4027(Can you answer these queries?)

    题目链接:传送门 题目大意:有一个长度为n的数组,有m次操作,每次操作输入 v x y,v==0时x~y区间内的数都开平方并且向下取整,v==1时求x~y区间内所有数的和. 题目思路:long lon ...

  2. django startapp报 maximum recursion depth exceeded

    报错截图如下: 解决办法:修改指定路径下的functools.py文件的def total_ordering(cls):方法: 原来的样子: convert = { '__lt__': [('__gt ...

  3. ThreadLocal (二)：什么时候使用 InheritableThreadLocal

    一.ThreadLocal 在父子线程传递的问题 public class InheritableThreadLocalDemo { // 全局变量 // static ThreadLocal< ...

  4. 《Python机器学习》笔记（五）

    通过降维压缩数据 在前面已经介绍了几种不同的特征选择技术对数据集进行降维的方法.另一种常用于降维的特征选择方法就是特征抽取.数据压缩也是机器学习领域中的一个重要内容.数据压缩技术可以帮助我们对数据及逆 ...

  5. uwsgi+nginx项目上线

    一.基础环境配置 1.Linux安装配置     1.设置IP地址 [root@localhost ~]# cat /etc/sysconfig/network-scripts/ifcfg-eth0 ...

  6. c#读取xml操作

    1/定义一个XmlDocument对象xDoc 2/通过XmlDocument来load需要读取的xml文件 3/通过XmlDocument的SelectSingleNode来找到节点,并把节点转换为 ...

  7. PHP实现生成唯一编号（36进制的不重复编号）

    当我们要将一个庞大的数据进行编号时,而编号有位数限制,比如5位的车牌号.10位的某证件号码.订单流水号.短网址等等,我们可以使用36进制计算出符合位数的不重复的编号. 我们将0-Z(012345678 ...

  8. 给二维码（图片）添加文字（水印），让生成的二维码中间带logo

    <?php //生成二维码 require_once IA_ROOT . '/framework/library/qrcode/phpqrcode.php'; QRcode::png($url, ...

  9. 【鸟哥的Linux私房菜】笔记3

    正确地开机 最好不要使用root账号登陆!GNOME图形界面 View items as a list X WindowShell 文本交互界面bash是Shell的名称,Linux的默认壳程序就是b ...

  10. 【Flask】Sqlalchemy group_by having

    ### group_by:根据某个字段进行分组.比如想要根据性别进行分组,来统计每个分组分别有多少人 ### having: having是对查找结果进一步过滤.比如只想要看未成年人的数量,那么可以首 ...