`
schy_hqh
  • 浏览: 555869 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

DOM实例

 
阅读更多

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
	<script type="text/javascript">
		function myFunction() {
			//getElementById:只返回一个对象
			var myNode = document.getElementById("myId");
			alert(myNode.value);//123

			//getElementsByName:返回一个数组
			var nodes = document.getElementsByName("myName");
			alert(nodes.length);//1
			//获取数组中的第1个对象(INPUT节点)
			var node = nodes[0];
			alert(node.nodeType+","+node.nodeName+","+node.nodeValue);//1,INPUT,null
			alert(node.type+","+node.name+","+node.value);//text,myName,123

			//getElementsByTagName:返回一个数组
			//对于没有id属性和name属性的标签，通过这种方式来获取
			var aNodes = document.getElementsByTagName("a");
			alert(aNodes.length);
			for(var i=0;i<aNodes.length;i++) {
				var aNode = aNodes[i];
				aNode.target = "_blank";//批量设置属性
				alert(aNode.innerHTML+":"+aNode.href);
			}

			//所有容器型标签，如DIV，都具有getElementsByTagName()
			//因为，这类型的标签中，肯定有其它标签存在，而这些标签不一定有id属性和name属性，所以只有getElementsByTagName()
			var divNode = document.getElementById("myLinks");
			var links = divNode.getElementsByTagName("a");
			for(var i=0;i<links.length;i++) {
				alert(links[i].innerHTML+"-"+links[i].href);
			}
		}
	</script>
 </HEAD>

 <BODY>
	<div>
		<input type="text" name="myName" id="myId" value="123"/>
	</div>
	<div id="myLinks">
		<a href="http://www.sina.com.cn">sina</a>
		<a href="http://www.baidu.com.cn">baidu</a>
	</div>
	<input type="button" value="just click!" onclick="myFunction()"/>
 </BODY>
</HTML>

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
	<!--
		通过节点之间的层次关系获取节点对象
		关系：
			1.父节点  parentNode  1个节点对象
			2.儿子节点  childNodes  1个节点数组 (尽量少用，不同浏览器的解析结果不同)  
			3.兄弟节点(尽量少用，不同浏览器的解析结果不同)  
				上一个兄弟  prevoiousSibling  1个节点对象
				下一个兄弟  nextSibling 1个节点对象
	-->
	<script type="text/javascript">
		function sop(val) {
			document.getElementById("result").innerHTML += val;
		}

		function myFun() {
			var table = document.getElementById("myTable");
			//获取父节点
			var parentNode = table.parentNode;
			sop(parentNode.nodeName);//DIV

			//获取子节点
			//firstChild = childNodes[0]
			//lastChild = childNodes[childNodes.length-1]
			var cNodes = table.childNodes;
			sop(cNodes[0].nodeName);//IE:TBODY  FIREFOX:#text

			//获取兄弟节点
			var preSib = table.previousSibling;
			sop(preSib.nodeName);//IE:#text FIREFOX:#text

			var nextSib = table.nextSibling;
			sop(nextSib.nodeName);//IE:DL FIREFOX:#text
		}

	</script>
 </HEAD>
	
 <BODY>
	<button onclick="myFun()">点我</button>
	<div>
		<a href="javascript:void(0);">xxx</a>
		<table id="myTable">
			<tr>
				<td>aaa</td>
				<td>AAA</td>
			</tr>
			<tr>
				<td>bbb</td>
				<td>BBB</td>
			</tr>
			<tr>
				<td>ccc</td>
				<td>CCC</td>
			</tr>
		</table>
		<dl>
			<dt>yyy<dt>
			<dd>111</dd>
			<dd>222</dd>
		<dl>
	</div>
	<div id="result"></div>
 </BODY>
</HTML>

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
	<style type="text/css">
		div {
			border: #00ccff solid 1px;
			width: 200px;
			height: 30px;
			padding: 10px;
			margin: 10px;
		}
	</style>
	
	<script type="text/javascript">
		//创建并添加内容
		function createNode() {
			var oDivNode = document.getElementById("div_1");
			
			//1.创建文本节点对象
			var oTextNode = document.createTextNode("AAAAAAAAAA");
			//添加到目标节点对象中
			oDivNode.appendChild(oTextNode);
			
			//2.创建标签节点
			var oButtonNode = document.createElement("input");
			oButtonNode.type = "button";
			oButtonNode.value = "按我！";
			//添加到目标节点对象中
			oDivNode.appendChild(oButtonNode);

			//3.实用方法,不会追加，每次都重新设置
			var oDivNode2 = document.getElementById("div_2");
			oDivNode2.innerHTML = "<input type='text' name='xxx' value='BBBBBBBBBB'/>";
		}
		
		//删除已有节点
		function delNode() {
			var oDivNode = document.getElementById("div_3");
			oDivNode.parentNode.removeChild(oDivNode);
		}
		
		//替换/修改节点
		function updateNode() {
			var oDivNode1 = document.getElementById("div_1");
			var oDivNode4 = document.getElementById("div_4");
			//object.replaceChild(oNewNode, oChildNode)
			//先找到父节点，再使用父节点的replaceChild方法进行替换
			//param1:新节点；param2:被替换的节点
			oDivNode1.parentNode.replaceChild(oDivNode1,oDivNode4);
		}
		
		//复制节点
		function copyNode() {
			var oDivNode1 = document.getElementById("div_1");
			var oDivNode4 = document.getElementById("div_4");
			//复制节点
			//false Cloned objects do not include childNodes. 
			//true: Cloned objects include childNodes.
			var cloneDivNode1 = oDivNode1.cloneNode(true); 
			oDivNode1.parentNode.replaceChild(cloneDivNode1,oDivNode4);
		}
	</script>

 </HEAD>

 <BODY>
	<input type="button" onclick="createNode()" value="新建节点"/>
	<input type="button" onclick="delNode()" value="删除节点"/>
	<input type="button" onclick="updateNode()" value="修改节点"/>
	<input type="button" onclick="copyNode()" value="克隆节点"/>
	
	<hr/>
	
	<div id="div_1">

	</div>
	<div id="div_2">
		
	</div>
	<div id="div_3">
		CCCCCCCCCC
	</div>
	<div id="div_4">
		DDDDDDDDDD
	</div>
 </BODY>
</HTML>

 

分享到：
| DOM基础
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Dom实例的运用

    DOM实例的运用是Web开发中的关键技能，尤其是在处理复杂的数据交互和动态页面更新时。在这个主题中，我们将深入探讨DOM的基本概念、XML与DOM的关系、SAX解析器的理解，以及如何在实际项目中应用DOM实例。 首先，DOM...

    实现多种文件格式的Lucene全文搜索功能的dom实例

    本项目“实现多种文件格式的Lucene全文搜索功能的DOM实例”专注于利用Lucene来处理不同类型的文件，并且实现了搜索结果中关键词的高亮显示，类似于百度等搜索引擎的效果。 首先，我们需要理解Lucene的基本概念。...

    HTML DOM基础教程（网页形式）

    DOM 实例 DOM 实例 DOM 对象 DOM Window DOM Navigator DOM Screen DOM History DOM Location DOM Document DOM Anchor DOM Area DOM Base DOM Body DOM Button DOM Event DOM Form DOM Frame DOM ...

    DOM JDOM dom4j 实例源码

    1. **DOM实例**： - 加载XML文档：使用`DocumentBuilderFactory`创建`DocumentBuilder`，再通过`parse()`方法解析XML文件。 - 访问节点：`getElementsByTagName()`、`getElementById()`等方法用于获取特定类型的...

    25 完成工作单元创建 DOM 元素实例与收集副作用慕课专栏1

    在首次渲染时，React会为这些节点创建对应的DOM实例，并将它们存储在Fiber节点的`stateNode`属性上。而在后续的更新渲染中，React不会重复创建DOM，而是直接更新现有DOM元素的属性，以反映组件状态的变化。这通常...

    XML_DOM 教程 XML_DOM 教程

    **XML DOM实例** 在学习XML DOM时，实践是至关重要的。通过编辑器编写XML代码，并实时查看结果，可以加深对DOM的理解。W3School提供了这样的实例，让你可以尝试编辑源代码并立即看到效果。 **XML DOM节点** 在DOM...

    html dom 底层 javascript

    #### DOM 实例 最后，DOMExamples部分提供了实际的应用案例，演示了如何使用DOM API完成特定的任务，如创建动画、响应用户输入、处理表单数据等。 总之，HTML DOM底层JavaScript的深入理解，不仅需要掌握DOM的基本...

    dom-living-examples:一些原生JS操作DOM实例

    `dom-living-examples`是一个专注于展示如何使用原生JavaScript操作DOM的实例集合。在这个压缩包中，我们很可能会找到一系列的代码示例，涵盖了DOM的各种操作，例如元素的选择、添加、删除、属性修改等。 首先，让...

    XML的DOM编程 实例

    在“XML的DOM编程实例”中，我们主要探讨如何利用DOM解析XML文件，并进行读取、修改、创建和删除XML元素。这个实例包含了一个带有图形用户界面（GUI）的应用程序，使用户能够直观地与XML数据交互。下面将详细解释...

    前端开源库-jsdom-papandreou

    例如，通过 `jsdom.env()` 方法可以创建一个 JSDOM 实例，并解析 HTML 文档。 2. **DOM 操作**：与浏览器中的 DOM API 类似，JSDOM 支持各种元素的增删改查操作。例如，可以通过 `document.createElement()`, `...

    Python-基于Mozilladomjs的服务器端DOM实现

    2. 创建一个新的DOM实例并加载HTML字符串： ```python html = '&lt;html&gt;&lt;body&gt;&lt;h1&gt;Hello, World!&lt;/h1&gt;&lt;/body&gt;&lt;/html&gt;' dom = Domino(html) ``` 3. 查找元素： ```python header = dom.querySelector('h1') ``` 4. ...

    W3school_20100923.chm

    WMLScript XML DOM 实例 服务器脚本 DHTML 实例 SQL AJAX 实例 ASP VBScript 实例 ADO ASP 实例 PHP ADO 实例 .NET(dotnet) SVG 实例 .NET Microsoft WAP 实例 .NET ASP 测验/考试 .NET ...

    w3schoolWeb全套参考手册

    XML DOM 实例 WAP 实例 JavaScript 实例 JavaScript 对象实例 DHTML 实例 VBScript 实例 ASP 实例 ADO 实例 SVG 实例 测验/考试 HTML 测验 XHTML 测验 CSS 测验 XML 测验 JavaScript 测验 SQL 测验 ...

    XMLDOM对象方法手册

    这将创建一个空的XMLDOM实例，可以用于加载XML文档。 2. **加载XML文档** 使用`load()`方法加载XML文件： ```javascript xmlDoc.load("path_to_your_xml_file.xml"); ``` 或者使用`async`属性设置为`false`并...

    .net平台DOM解析实例

    本实例将深入探讨.NET中的DOM解析机制，以及如何结合.NET控件和枚举类型进行实际应用。 首先，DOM解析的基本原理是将整个XML文档加载到内存中，形成一棵由节点组成的树形结构，这棵树被称为DOM树。每个XML元素、...

    w3school最新版11.12.6.chm

    XML DOM 实例 DHTML 实例 AJAX 实例 VBScript 实例 ASP 实例 ADO 实例 SVG 实例 WAP 实例 测验/考试 HTML 测验 XHTML 测验 CSS 测验 XML 测验 JavaScript 测验 SQL 测验 ASP 测验 PHP 测验 代码验证...

    DOM解析xml文件实例讲解

    本篇文章将深入探讨DOM解析XML文件在Android中的应用实例。 首先，DOM解析的基本思想是将整个XML文件加载到内存中，形成一个树形结构，即DOM树。这样做的优点是解析后的数据可以方便地进行任意位置的查找和修改，但...

    javascript DOM的详解及实例代码

    本文将详细探讨DOM的核心概念、操作方法以及节点类型，并通过实例代码帮助理解如何在实际开发中使用DOM。 首先，DOM定义了一个节点层次，其中包括多种类型的节点。按照W3C DOM规范，节点类型包括元素节点、文本节点...

    html—dom教程

    - **实例演示**：通过具体的代码示例展示如何利用DOM API修改HTML文档，例如改变页面元素的颜色、位置或者内容等。 #### 六、HTML DOM 参考手册 - **对象列表**：列举了DOM提供的各种对象，包括： - **DOMWindow...

Magicbox
Global site tag (gtag.js) - Google Analytics