2021-03-18

1.DOM对象
DOM–Document Object Model[文档对象模型]
当网页被加载时，浏览器会创建页面的文档对象模型。
HTML DOM 模型被构造为对象的树

当网页被加载时，浏览器会创建页面的文档对象模型。那么在网页中的任何一个html标记都有可能成为DOM对象。
我们通过JS来控制网页中的html标记，但是JS并不能直接控制html标记，这时我们就需要将网页中的html标记变成JS能够识别的对象，这个能够被JS识别的对象就是DOM对象 。
2.查找HTML元素
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
2.1 getElementById(id属性值);通过 id 查找 HTML 元素
例如：
//测试getElementById(id属性值);通过 id 查找 HTML 元素
function testById(){
       var p1dom=document.getElementById(“p1”);
       //p1dom===[object HTMLParagraphElement]
       //注意:当id相同的html标记有多个的时候，getElementById()只得第一个。
}
2.2 getElementsByTagName(标签名)通过标签名查找 HTML 元素，返回值是JS数组
例如：
function testByTagName(){
       var pdom=document.getElementsByTagName(“p”);
       //pdom—[object HTMLCollection]
       /*
        for(var i=0;i                 alert(pdom[i]);
        }
       */
}
2.3 getElementsByClassName(class属性值)通过类名找到 HTML 元素
function testByClassName(){
       var testp1dom=document.getElementsByClassName(“testp1”);
       for(var i=0;i              alert(testp1dom[i]);
        }
}
3.DOM可以完成的功能
1.JavaScript 能够改变页面中的所有 HTML 标记/内容
      1.innerHTML属性–得到html标记的内容和改变html标记的内容
          Dom对象.innerHTML;—得到html标记的内容
          Dom对象.innerHTM=”数据值”;–改变html标记的内容
       2.innerText属性----得到html标记的内容和改变html标记的内容
          Dom对象.innerText;—得到html标记的内容
          Dom对象.innerText=”数据值”;–改变html标记的内容
        innerHTML属性与innerText属性的区别：
        innerHTML属性可以到包含的html标记，可以解释运行出包含的html标记的效果。
        innerText属性不可以到包含的html标记，不解释运行出包含的html标记的效果。
        innerHTML和innerText属性，不能得到和修改表单元素的值。
        3.value属性–得到和修改表单元素的内容。
例如：

	
		
		
		
	
	
		
"p1">"red">测试dom对象改变html标记的内容
		"text1" type="text" value="测试文本框">
		"button" value="innerHTML属性" οnclick="testInnerHtml();">
		"button" value="innerText属性" οnclick="testinnerText();"/>
		"button" value="value属性" οnclick="testvalue();"/>
	

2.JavaScript 能够改变页面中的所有 HTML元素的属性
        属性在html和css中都有。
        HTML元素的属性—是给浏览器解释运行html标记时通过附加信息。
                                        往往出现在html的开始标记中，如果有多个中间使用空格分离。
        例如: src就是HTML元素img的属性。
        1.dom对象.具体的HTML元素的属性名称 — 得到HTML元素的属性值
        2.dom对象.具体的HTML元素的属性名称=”数据值”；—改变HTML元素的属性值
例如：

	
		
		
		
	
	
		"img1" src="imgs/close.PNG" />
		"button" value="给变html元素的属性" οnclick="testattr();" />
	

3.JavaScript 能够改变页面中的所有 CSS 样式
        1.dom对象.style.CSS属性名称;—得到样式值
        2.dom对象.style.CSS属性名称=”数据值”;—改变样式
       上面的得到和改变CSS 样式时，内部样式块/独立css文件的方式设置的样式，不能得到但是可以修改。
例如：

	
		
		
		
		
	
	
		
"p1">测试控制css
		"button" value="控制css" οnclick="testcss();">
	

	
		
		
		
		
	
	
		"but1" type="button" value="隐藏" οnclick="testImg();">
		"img1" src="imgs/close.PNG" />
	

4.JavaScript 能够对页面中的所有事件做出反应


常见的事件
    1.onload–页面初始化事件
    2.onclick–按钮点击事件
    3.onfocus当获得焦点时触发
    4.onblur当失去焦点时触发
    5.onmouseover 鼠标进入事件
    6.onmouseout 鼠标移出事件
    7.onkeydown 事件会在用户按下一个键盘按键时发生
    8.onsubmit 事件会在表单中的确认按钮【submit】被点击时发生
事件的添加方式:
    1.javascritp程序都是有事件驱动执行的。
    2.在html元素的开始标记中设置事件，提供所要触发的函数。
    3.javascriptDom对象为指定的元素添加具体事件
测试onload–页面初始化事件
例如：

测试onclick–按钮点击事件
例如：

/*
		   function testclick(){
			   alert("测试onclick--按钮点击事件");
		   }
		   
		   */
		  /*
		   window.οnlοad=function(){
			   //得到按钮的dom对象
			   var butdom=document.getElementById("but1");
			   butdom.οnclick=function(){
				   alert("测试onclick--按钮点击事件");
			   }
		   }
		   */

测试onfocus当获得焦点时触发
测试onblur当失去焦点时触发
例如：

window.οnlοad=function(){
     
			//得到文本框对应的dom对象
			var textdom1=document.getElementById("text1");
			textdom1.οnfοcus=function(){
     
				textdom1.value="";
			};
			textdom1.οnblur=function(){
     
				var phonenum=textdom1.value;
				var reg=new RegExp(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{
     8}$/);
				var flag=reg.test(phonenum);
				if(flag){
     
					alert("手机号码合法");
				}else{
     
					alert("手机号码不合法，请重新输入!");
					textdom1.value="";
				}
			};
		  }

测试onmouseover 鼠标进入事件
测试onmouseout 鼠标移出事件
例如:

window.οnlοad=function(){
     
		 	//得到图片对应的dom对象
		 	var imgdom1=document.getElementById("img1");
			imgdom1.οnmοuseοver=function(){
     
				imgdom1.width=200;
				imgdom1.height=200;
			};
			imgdom1.οnmοuseοut=function(){
     
				imgdom1.width=150;
				imgdom1.height=150;
			};	
		 }

测试onkeydown 事件会在用户按下一个键盘按键时发生
例如:

"testkey(event);">
function testkey(event){
     
			//得到键盘的建码
			var code=event.keyCode;
			if(code==37){
     
				alert("向左移动");
			}
			if(code==38){
     
				alert("向上移动");
			}
			if(code==39){
     
				alert("向右移动");
			}
			if(code==40){
     
				alert("向下移动");
			}
			if(code==13){
     
				alert("暂停");
			}
			if(code==32){
     
				alert("开始");
			}
		}

测试onsubmit 事件会在表单中的确认按钮【submit】被点击时发生
1.onsubmit 事件是给form表单元素添加
2.onsubmit 事件调用对应的处理函数之前要有return 处理函数;
3.onsubmit 事件对应的处理函数要有boolean的返回值
        true–提交表单数据给后台处理程序
        false–不提交
例如：

	
		
		
		
	
	
		
			
"/login" method="get" οnsubmit="return testsubmit();">
				"1px">
					"center">
						"center">
						"center">
						"center">
						
"2">
用户登录
					
					
账号:
						
"username" type="text" value="">
					
					
密码:
						
"password" type="password" value="">
					
					
"2">
							"submit" value="登录"/>