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
}
*/
}
2.3 getElementsByClassName(class属性值)通过类名找到 HTML 元素
function testByClassName(){
var testp1dom=document.getElementsByClassName(“testp1”);
for(var i=0;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属性–得到和修改表单元素的内容。
例如：
HTML 标记/内容
"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的开始标记中，如果有多个中间使用空格分离。
例如:
1.dom对象.具体的HTML元素的属性名称 — 得到HTML元素的属性值
2.dom对象.具体的HTML元素的属性名称=”数据值”；—改变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文件的方式设置的样式，不能得到但是可以修改。
例如：
控制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–不提交
例如：
表单提交事件
method="get" οnsubmit="return testsubmit();">
"1px">
"center">
"2">用户登录
"center">
账号:
"username" type="text" value="">
"center">
密码:
"password" type="password" value="">
"center">
"2">
"submit" value="登录"/>