JavaScript HTML DOM

HTML DOM ——文档对象模型（Document Object Model）

文档对象模型是文档在被加载时，由浏览器创建的。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
能够改变页面中的所有 HTML 元素、改变页面中的所有 HTML 属性、改变页面中的所有 CSS 样式以及对页面中的所有事件做出反应。
通常，通过 JavaScript，在操作 HTML 元素首先能找到该元素。有三种方法来做这件事：通过 id 、标签名、类名找到 HTML 元素。

使用JavaScript改变HTML 元素的内容

1.使用 (document.write())
使用document.write(Date());改变HTML输出流，这个语句可以在原来页面的基础上添加一行

2.使用innerHTML改变THML内容

	
		
		
	
	
		
Hello World!
		
		
以上段落通过JavaScript修改文本。
	

3.使用特定语法，改变HTML的属性
先获取元素，再修改属性
document.getElementById(id).attribute=新属性值
注：一定是Id不能换成别的！！！！！

使用JavaScript改变HTML 元素的样式 ——改变CSS样式

document.getElementById(id).style.property=新样式

	
		
		
	
	
		
Hello World!
		
Hello World!
		
		
以上段落通过脚本修改。
	

使用JavaScript改变对 HTML DOM 事件做出反应

表单提交事件

1.JavaScript表单验证

	
		
		
	
	
		
 //action="h.php"的意思是提交数据到h.php页面，action去掉并不影响页面检测效果
			名字: 
			
		
	

2.HTML表单自动验证使用——关键字required

	
		
	
	
		

		  
		  
		
		
点击提交按钮，如果输入框是空的，浏览器会提示错误信息。
	

几个特殊事件

（1）onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。另外，onload 和 onunload 事件可用于处理 cookie。

	
		
		
	
	
		
		
弹窗-提示浏览器 cookie 是否可用。
	

（2）onmouseover 和 onmouseout 事件、onmousedown、onmouseup 以及 onclick 事件。
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

	
		
		
	
	
	
Mouse Over Me
		
	

（3）onchange事件
onchange 事件常结合对输入字段的验证来使用。

	
		
		
	
	
		
	
	
		输入你的名字: 
		
当你离开输入框后，函数将被触发，将小写字母转为大写字母。
	

使用JavaScript添加或删除 HTML 元素

1.添加元素，在添加时，需要知道所需添加元素的父元素信息，但是也可以直接添加

	
	



	
这是一个段落。
	
这是另一个段落。

 
 

2.删除元素

	
		
		
	
	
		

		    
这是一个段落。
		    
这是另一个段落。