<!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. 【BZOJ3620】似乎在梦中见过的样子 KMP

    [BZOJ3620]似乎在梦中见过的样子 Description “Madoka,不要相信 QB!”伴随着 Homura 的失望地喊叫,Madoka 与 QB 签订了契约. 这是 Modoka 的一个 ...

  2. 创建String字符串的方式与区别

    Java中创建一个字符串的方式有很多种,常见如: String s = new String("riqi"); String s = "riqi"; 但两者有什 ...

  3. camke GUI工具 选择 vs2017 时，如何指定工具集 v140 而不是默认的 v141？

    在参数位置加入 v140 即可,不需要加 -T

  4. Web 框架本质解析

    一  Web框架本质 1. 自己开发Web框架 - socket - http协议 - HTML知识 - 数据库(pymysql,SQLAlchemy) HTTP: 无状态.短连接 TCP: 不断开 ...

  5. android自定义控件（二）Canvas

    一.重要方法 1.translate 2.scale 3.rotate 二.注意 1.明确顺序 canvas.rotate(45); canvas.drawRect(new Rect(50, 50, ...

  6. windows下redis的安装和启动

    Rides: //cmd管理员进入 // 运行 : redis-cli.exe //报错  :Redis (error) NOAUTH Authentication required.解决方法 // ...

  7. 标准c时间与日期函数

    标准c时间与日期函数 asctime 语法:     #include <time.h>   char *asctime( const struct tm *ptr ); 功能: 函数将p ...

  8. JS编写类似弹出窗口样式显示层

    JSp中增加div <!-- 提交变更申请 --> <div id="changeWindow" class="easyui-window" ...

  9. LeetCode：为运算表达式设置优先级【241】

    LeetCode:为运算表达式设置优先级[241] 题目描述 给定一个含有数字和运算符的字符串,为表达式添加括号,改变其运算优先级以求出不同的结果.你需要给出所有可能的组合的结果.有效的运算符号包含  ...

  10. docker-compose no such image

    是由于docker-compose旧缓存的问题,执行docker-compose down即可,再重新up