javascript DOM对象第18节

<html>
<head>
	<title>DOM对象</title>
	</head><body><div >DOM对象</div>
		1.DOM节点</br>
			<script type="text/javascript">
				var root = document.documentElement;
				// var oHead = root.firstChild;
				//var oHead = root.childNodes[0];
				var oHead = root.childNodes.item(0);

				//var oBody = root.lastChild;
				var oBody = root.childNodes[1];
				document.write("根节点 : ", root.nodeName ,"</br>");
				document.write("头节点 : ", oHead.nodeName ,"</br>");
				document.write("文档节点 : ", oBody.nodeName ,"</br>");
				document.write("子节点数量 : ", root.childNodes.length ,"</br>");
				/*
				var arr = root.childNodes;
				for(var i = 0; i < arr.length; i++) {
				  document.write("文档节点 : ", arr[i].nodeName ,"</br>");
				}
				*/

				document.write("body子节点数量 : ", oBody.childNodes.length ,"</br>");
				document.write("标题 : ", oBody.childNodes[0].firstChild.nodeValue ,"</br>");
			</script>
		2.DOM节点关系</br>
			<script type="text/javascript">

				document.write("父节点 : ", root  == oHead.parentNode ,"</br>");
				document.write("父节点 : ", oBody  == oHead.parentNode ,"</br>");
				document.write("前节点 : ", oHead == oBody.previousSibling ,"</br>");
				document.write("前节点 : ", oBody == oHead.previousSibling ,"</br>");
				document.write("后节点 : ", oBody == oHead.nextSibling ,"</br>");				  

			</script>
		</body>
</html>

rs:

时间： 2024-08-29 22:53:27

javascript DOM对象第18节的相关文章

javascript DOM对象第19节

<html> <head> <title>DOM对象</title> <script type="text/javascript"> function $(id) { return document.getElementById(id); } function insertText() { var val = window.prompt("请输入",""); //alert(val);

JavaScript DOM对象和JQuery对象相互转换

1.分析源码 <!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="C

Javascript DOM对象控制HTML

首先需要了解什么是 JavaScript DOM对象以下是一些常用的方法: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <p name="pName">one</p> &

<html> <head> <title>DOM对象</title> <style type="text/css"> table { border:1px solid green; border-collapse:collapse; width:300px; } td { padding:5px; border:1px solid green; font-size:16px; text-align:center; } tabl

浏览器环境下的javascript DOM对象继承模型

这张图是我直接在现代浏览器中通过prototype原型溯源绘制的一张浏览器宿主环境下的javascript DOM对象模型,对于有效学习和使用javascript DOM编程起到高屋建瓴的指导作用, 希望能够对各位同学有用.

javascript DOM对象（2）

访问兄弟节点 1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中). 语法: nodeObject.nextSibling 说明:如果无此节点,则该属性返回 null. 2. previousSibling 属性可返回某个节点之前紧跟的节点(处于同一树层级中). 语法: nodeObject.previousSibling 说明:如果无此节点,则该属性返回 null. 注意: 两个属性获取的是节点.Internet Explorer 会忽略节点间生成的空白文本节点(

JavaScript DOM对象

DOM简介 HTML DOM:当网页被加载时,浏览器会创建页面的文档对象模型 JavaScript能够改变页面中的所有HTML元素 JavaScript能够改变页面中的所有HTML属性 JavaScript能够改变页面中的所有CSS样式 JavaScript能够改变页面中的所有事件作出反应 DOM操作HTML 改变HTML输出流注意:绝对不要在文档加载完成之后使用document.write().这会覆盖该文档寻找元素通过id找到HTML元素通过标签名找到HTML元素改变HTML内容

javascript DOM对象控制HTML元素详解

方法 getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素属性 setAttribute() 设置元素属性 childNodes() 访问子节点 par

JavaScript进阶学习——DOM对象

DOM对象 1认识DOM 2getElementByName方法 3getElementByTagName方法 4区别getElementByIdgetElementByNamegetElementByTagName 5getAttribute方法 6setAttrubute方法 7节点属性 8访问子节点childNodes 9访问子节点的第一个最后项 10访问父节点parentNode 11访问兄弟节点 12插入节点appendChild 13插入节点insertBefore 14删除节点re

javascript DOM对象 第18节

javascript DOM对象 第18节的相关文章

javascript DOM对象第18节

javascript DOM对象第18节的相关文章