WEB程序设计之DOM

于 2014-10-31 23:22:25 发布
阅读量782 收藏
点赞数
分类专栏： WEB程序设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/aidpcx/article/details/40663439
版权
本文详细介绍了DOM（文档对象模型），包括节点属性、层次关系及操作HTML元素的方法，如通过id、标签名和类名查找元素，改变元素内容、属性和样式，响应DOM事件，创建和删除元素。此外，还探讨了浏览器对象模型（Browser Object Model）中的window、screen、location、history和navigator对象的使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >



WEB程序设计之DOM




1、DOM（文档对象模型）：

允许程序和脚本动态地访问和更新文档的内容、结构和样式。

通过DOM，JavaScript 获得了足够的能力来创建动态的 HTML。


HTML 文档中的所有内容都是节点：

◆ 整个文档是一个文档节点

◆ 每个 HTML 元素是元素节点

◆ HTML 元素内的文本是文本节点

◆ 每个 HTML 属性是属性节点

◆注释是注释节点


节点属性（分各种类型解释）：

nodeName：节点名称（元素名字或#textNode）

nodeValue：节点值（文本节点情况下则为文本内容）

nodeType： 节点类型（1：元素，3=文本节点）

node.getAttribute('attribute')：获取指定属性的值

node.setAttribute('attribute','value')：设置指定属性的值


节点层次关系：

firstChild 属性：可返回文档的首个子节点。

lastChild 属性：可返回文档的最后一个子节点

parentNode 属性可返回某节点的父节点。

childNodes 属性可返回指定节点的子节点的节点列表。

nextSibling 属性可返回某个元素之后紧跟的元素（处于同一树层级中）。


2、DOM操作：

1、查找HTML元素

（1）通过 id 找到 HTML 元素

   document.getElementById

（2）通过标签名找到 HTML 元素

   document.getElementsByTagName//返回的是一个数组

（3）通过类名找到 HTML 元素

   document.getElementsByClassName//在IE中无效


2、改变 HTML 元素的内容 (innerHTML)：

 
 
  1. document.getElementById(id).innerHTML=new HTML

获取元素值的两种方法：


  
  
  1. <html>
  2. <body>
  3. <p id="intro">Hello World!</p>
  4. </body>
  5. </html>

1）用innerHTML属性：

 
 
  1. x=document.getElementById("intro");
  2. alert(x.innerHTML);

2）使用节点属性

 
 
  1. x=document.getElementById("intro");
  2. document.write(x.firstChild.nodeValue);


3、改变 HTML 元素的属性：

 
 
  1. document.getElementById(id).attribute=new value
  2. document.getElementById(id).setAttribute('attribute','value');

4、改变 HTML 元素的样式 (CSS)：

 
 
  1. document.getElementById(id).style.property=new style
  2. document.getElementById(id).setAttribute('style','new style');
  3. document.getElementById(id).className='styleclass';


5、对 HTML DOM 事件对出反应：

1）HTML 事件属性来绑定函数 

 
 
  1.  <button onlick="displayDate()">单击这里</button>

2）使用 HTML DOM 来分配事件

 
 
  1. document.getElementById("myBtn").onclick=function(){displayDate()};

常用事件：

onload：页面加载

onchange：内容改变

onmouseover：鼠标进入

onmouseout：鼠标移出

onmousedown：鼠标按下

onmouseup：鼠标释放

onclick：鼠标单击

onfocus：获得焦点

onblur：失去焦点


例：手风琴效果：

 
 
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style>
  7. 	*{
  8. 		margin:0px;
  9. 		padding: 0px;
  10. 	}
  11. 	body{
  12. 		padding: 20px;
  13. 		font-size: 12px;
  14. 	}
  15. 	dl{
  16. 		width: 200px;
  17. 		border: 1px solid #c5c6c4;
  18. 		border-top: none;
  19. 		border-bottom: none;
  20. 	}
  21. 	dl.last{
  22. 		border-bottom: 1px solid #c5c6c4;
  23. 	}
  24. 	dt{
  25. 		padding: 4px;
  26. 		font-weight: bold;
  27. 		border-top:1px solid #c5c6c4;
  28. 		background: #f4f4f4;
  29. 		position: relative;
  30. 	}
  31. 	dt span{
  32. 		position: absolute;
  33. 		right: 6px;
  34. 		top:center;
  35. 	}
  36. 	dd{
  37. 		padding: 4px 12px;
  38. 	}
  39. 	</style>
  40. </head>
  41. <body>
  42. 	<dl>
  43. 		<dt>CSS<span>▲</span></dt>
  44. 		<dd>CSS入门</dd>
  45. 		<dd>CSS进阶</dd>
  46. 		<dd>CSS高级技巧</dd>
  47. 	</dl>
  48. 	<dl class='last'>
  49. 		<dt>WebUI<span>▲</span></dt>
  50. 		<dd>理论知识</dd>
  51. 		<dd>实战应用</dd>
  52. 		<dd>高级技巧</dd>
  53. 	</dl>
  54. </body>
  55. <script>
  56. 	var arrayDt=document.getElementsByTagName('dt');
  57. 	for(var i=0;i<arrayDt.length;i++){
  58. 		arrayDt[i].onclick=function(){
  59. 			var span=this.getElementsByTagName('span')[0];
  60. 			var dds=this.parentNode.getElementsByTagName('dd');
  61. 			if (span.innerHTML=='▲') {
  62. 				span.innerHTML="▼";
  63. 				for(var i=0;i<dds.length;i++){
  64. 					dds[i].setAttribute('style','display:none');
  65. 				}
  66. 			}else{
  67. 				span.innerHTML="▲";
  68. 				for(var i=0;i<dds.length;i++){
  69. 					dds[i].setAttribute('style','display:block');
  70. 				}
  71. 			}
  72. 			
  73. 		}
  74. 	}
  75. </script>
  76. </html>


3、创建HTML元素

createElement(name) ：创建元素节点

createTextNode(data)：创建文本节点

appendChild(newchild)：向节点的子节点列表的末尾添加新的子节点

insertBefore(newchild,refchild)：在已有的子节点前插入一个新的子节点


  
  
  1. <div id="d1">
  2. <p id="p1">This is a paragraph.</p>
  3. <p id="p2">This is another paragraph.</p>
  4. </div>
 
 
  1. <script>
  2. var para=document.createElement("p");
  3. var node=document.createTextNode("This is new.");
  4. para.appendChild(node);
  5. var element=document.getElementById("d1");
  6. element.appendChild(para);
  7. </script>
 
 
  1. var child=document.getElementById("p1");
  2. element.insertBefore(para,child);


例：增加城市列表

 
 
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. </head>
  7. <body >
  8. 	<h1 id="header">城市</h1>
  9. 	<ul id='city'>
  10. 		<li>北京</li>
  11. 		<li>上海</li>
  12. 		<li>广州</li>
  13. 	</ul>
  14. 	<input type="text" name="cityname" id="cityname">
  15. 	<input type="button" value="添加" onclick="addCity()">
  16. </body>
  17. <script>
  18. 	function addCity(){
  19. 		var city=document.getElementById('city');
  20. 		var list=city.getElementsByTagName('li');
  21. 		var cityname=document.getElementById('cityname');
  22. 		var li=document.createElement('li');
  23. 		var txt=document.createTextNode(cityname.value);
  24. 		li.appendChild(txt);
  25. 		city.appendChild(li);
  26. 		cityname.value=';
  27. 	}
  28. </script>
  29. </html>


2、删除节点：

 
 
  1. parent.removeChild(node)
 
 
  1. <div id="div1">
  2. <p id="p1">This is a paragraph.</p>
  3. <p id="p2">This is another paragraph.</p>
  4. </div>
  5. <script>
  6. var parent=document.getElementById("div1");
  7. var child=document.getElementById("p1");
  8. parent.removeChild(child);
  9. </script>

删除节点必须要引用父节点,这里提供一个常用的解决方法：找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素：

 
 
  1. var child=document.getElementById("p1");
  2. child.parentNode.removeChild(child);


例：错误提示：

 
 
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<script>
  7. 		function checkdata2(){
  8. 			var stuid=document.myform.stuid;
  9. 			var parent=stuid.parentNode;
  10. 			var img=parent.getElementsByTagName('img')[0];
  11. 			var span=parent.getElementsByTagName('span')[0];
  12. 			if (img!=undefined) {
  13. 				parent.removeChild(img);
  14. 				parent.removeChild(span);				
  15. 			}
  16. 			if(stuid.value.length==0){
  17. 				// alert('请输入学号');
  18. 				errorInfo('请输入学号');
  19. 				stuid.focus();
  20. 				return false;
  21. 			}
  22. 			if(!isNum(stuid.value)){
  23.  
  24. 				errorInfo('学号必须是全数字');
  25. 				// alert('学号必须是全数字');
  26. 				stuid.focus();
  27. 				return false;
  28. 			}
  29. 			myform.submit();
  30. 		}
  31. 		function errorInfo(errorMsg){
  32. 			var span=document.createElement('span');
  33. 			var txt=document.createTextNode(errorMsg);
  34. 			span.appendChild(txt);
  35. 			span.style.color='red';
  36. 			var img=document.createElement('img');
  37. 			img.setAttribute('src','error.png');
  38. 			var parent=stuid.parentNode;
  39. 			parent.appendChild(img);
  40. 			parent.appendChild(span);
  41. 		}
  42. 		function isNum(str){
  43. 			for(var i=0; i<str.length; i++){
  44. 				var c=str.charAt(i);
  45. 				if (c<'0' || c>'9') {
  46. 					return false;
  47. 				};
  48. 			}
  49. 			return true;
  50. 		}
  51. 	</script>
  52. </head>
  53. <body>
  54. 	<form action="abc.asp" method="post" name="myform">
  55. 		<p>
  56. 			学号：<input type="text" name="stuid" id="stuid"  />
  57. 		</p>
  58. 		<input type="button" value="提交" onclick="checkdata2();">
  59. 	</form>
  60. </body>
  61. </html>


4、浏览器对象模型（Browser Object Model）

window对象：表示浏览器窗口

确定浏览器窗口的尺寸

 
 
  1. var w=window.innerWidth
  2. || document.documentElement.clientWidth
  3. || document.body.clientWidth;
  4. var h=window.innerHeight
  5. || document.documentElement.clientHeight
  6. || document.body.clientHeight;


window.open() - 打开新窗口

window.close() - 关闭当前窗口

window.moveTo() - 移动当前窗口

window.resizeTo() - 调整当前窗口的尺寸


screen对象：

screen.availWidth - 可用的屏幕宽度

screen.availHeight - 可用的屏幕高度

屏幕分辨率：screen.width + "*" + screen.height


location :对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.href 属性返回当前页面的 URL。

location.assign() 方法加载新的文档。


history 对象包含浏览器的历史

history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击按钮向前相同

history.go() - 加载 history 列表中的某个具体页面。


navigator 对象包含有关访问者浏览器的信息

navigator.appName：浏览器名称

navigator.appVersion：浏览器版本






评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值