Java Script 中的 DOM 对象
DOM–Document Object Model[文档对象模型]
当网页被加载时，浏览器会创建页面的文档对象模型。
1.当网页被加载时，浏览器会创建页面的文档对象模型。那么在网页中的任何一个 html 标记都有可能成为 DOM 对象。
2.我们通过 javascript 来控制网页中的 html 标记，但是 javascript 并不能直接控制 html 标记，
3.这是我们就需要将网页中的 html 标记，变成 javascript 能够识别的对象，这个能够被 javascript识别的对象就是 DOM 对象。
查找 HTML 元素【html 标记变成 DOM 对象】
1.getElementById(id 属性值);通过 id 查找 HTML 元素
注意:当 id 属性值相同时,只能得到第一个元素
2.getElementsByTagName(标签名)通过标签名查找 HTML 元素,返回值是 javascript 数组。
3.getElementsByClassName(class 属性值)通过类名【class 属性值】找到 HTML 元素,返回值是 javascript 数组。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>查找 HTML 元素【html标记变成DOM对象】</title>
<script>
window.οnlοad=function(){
//getElementById(id 属性值)-------通过ID查找HTML元素
/*
var pobj=document.getElementById("p1");
alert(pobj);// object HTMLParagraphElement
pobj.innerHTML="object HTMLParagraphElement";
//当ID属性值相同时，只能得到第一个元素
*/
//getElementsByTagName(标签名)通过标签名查找 HTML 元素,返回值是javascript数组
/*
var parray=document.getElementsByTagName("p");
alert(parray);//object HTMLCollection
parray[0].innerHTML="parray=[object HTMLCollection]---parray[0]";
parray[1].innerHTML="parray=[object HTMLCollection]---parray[1]";
}
*/
/*
var harray=document.getElementsByTagName("h2");
alert(harray);//object HTMLCollection
*/
//3.getElementsByClassName(class属性值)通过类名【class属性值】找到 HTML 元素,返回值是javascript数组
var spanarray=document.getElementsByClassName("s1");
alert(spanarray)//object HTMLCollection
}
</script>
</head>
<body>
<p id="p1">查找 HTML 元素【html标记变成DOM对象】</p>
<p id="p1">查找 HTML 元素【html标记变成DOM对象】</p>
<h2 id="p1">查找 HTML 元素getElementsByTagName(标签名)</h2>
<span class="s1">查找 HTML 元素getElementsByTagName(标签名)</span>
<span class="s1">查找 HTML 元素getElementsByTagName(标签名)</span>
</body>
</html>
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 属性–得到和修改表单元素的内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变页面中的所有HTML内容/标记</title>
<script>
window.οnlοad=function(){
//var pobj1=document.getElementById("p1")
//innerHTML---得到HTML标记内容
// var con=pobj1.innerHTML;
//alert(con);
//innerHTML--- 改变HTML标记内容
// pobj1.innerHTML="innerHTML--- 改变HTML标记内容 ";
//pobj1.innerHTML="innerHTML---<a href='#'>改变HTML标记内容</a>";
// var pobj2=document.getElementById("p2")
// innerText---得到HTML标记内容
// var text=pobj2.innerText;
// alert(text);
//innerText---改变HTML标记内容
//var text=pobj2.innerText="innerText------改变HTML标记内容";
//alert(text);
// pobj2.innerText="innerText---<a href='#'>改变HTML标记内容</a>";
//innerHTML与innerText区别
//innerHTML属性可以到包含的html标记，可以解释运行出包含的html标记的效果。
//innerText属性不可以到包含的html标记，不解释运行出包含的html标记的效果。
//innerHTML和innerText属性，不能得到和修改表单元素的值。
var butobj=document.getElementById("but1");
//butobj.innerHTML="测试按钮"; 不能修改或得到表单元素的值
//butobj.innerText="测试按钮";不能修改或得到表单元素的值
var text=butobj.value;
//alert(text);
butobj.value="测试按钮";
}
</script>
</head>
<body>
<p id="p1">改变页面中所有HTML内容/标记----innerHTML</p>
<p id="p2">改变页面中所有HTML内容/标记----innerText</p>
<input id="but1" type="button" value="按钮"/>
</body>
</html>
2.JavaScript 能够改变页面中的所有 HTML 元素的属性
属性在 html 和 css 中都有。
HTML 元素的属性—是给浏览器解释运行 html 标记时通过附加信息。
往往出现在 html 的开始标记中，如果有多个中间使用空格分
离。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变页面中的所有HTML元素的属性</title>
<script>
function test1(){
var imgarray=document.getElementsByTagName("img");
//1.dom对象.具体的HTML元素的属性名称 --- 得到HTML元素的属性值
var path=imgarray[0].src;
alert(path);//http://127.0.0.1:8848/JS%20work/5.6/imgs/avatar.png
//2.dom对象.具体的HTML元素的属性名称=”数据值”；---改变HTML元素的属性
imgarray[0].src="imgs/avatar3.png";
}
</script>
</head>
<body>
<img src="imgs/avatar.png"/>
<input type="button" value="改变/得到HTML元素的属性" οnclick="test1();">
</body>
</html>
3.JavaScript 能够改变页面中的所有 CSS 样式
1.dom 对象.style.CSS 属性名称;—得到样式值
2.dom 对象.style.CSS 属性名称=”数据值”;—改变样式
上面的得到和改变 CSS 样式时，内部样式块/独立 css 文件的方式设置的样式，不能得到但是可以修改。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变页面中所有的CSS样式</title>
<style>
p{
color: aqua;
font-size: 30px;
}
</style>
<script>
function test1(){
var parray=document.getElementsByTagName("P");
//dom对象.style.CSS属性名称=”数据值”;---改变样式
parray[0].style.color="yellow";
parray[0].style.fontSize="60px";
//内部样式块/独立CSS文件的方式设置的样式，不能得到但是可以修改
}
</script>
</head>
<body>
<p>测试改变HTML元素的CSS样式</p>
<input type="button" value="测试" οnclick="test1();">
</body>
</html>
4.JavaScript 能够对页面中的所有事件做出反应常见的事件
- onload–页面初始化事件
- onclick–按钮点击事件
- onfocus 当获得焦点时触发
- onblur 当失去焦点时触发
- onmouseover 鼠标进入事件
- onmouseout 鼠标移出事件
- onkeydown 事件会在用户按下一个键盘按键时发生
- onsubmit 事件会在表单中的确认按钮【submit】被点击时发生
事件的添加方式: - javascritp 程序都是有事件驱动执行的。
- 在 html 元素的开始标记中设置事件，提供所要触发的函数。
- javascriptDom 对象为指定的元素添加具体事件
测试 onl oad–页面初始化事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常见事件</title>
<script>
/*
window.οnlοad=function(){
//onfocus当获得焦点时触发
//onblur当失去焦点时触发
var textObj=document.getElementById("text1");
//为文本框添加聚焦事件
textObj.οnfοcus=function(){
textObj.value="";
};
//为文本框添加失焦事件
textObj.οnblur=function(){
alert(textObj.value);
}
//onmouseover 鼠标进入事件
//onmouseout 鼠标移出事件
var imgobj=document.getElementById("img1");
//为图片添加鼠标进入事件
imgobj.οnmοuseοver=function(){
imgobj.src="imgs/avatar.png";
};
//图片添加鼠标移出事件
}
imgobj.οnmοuseοut=function(){
imgobj.src="imgs/avatar3.png";
};
function testkeydown(event){
var imgobj=document.getElementById("img1");
//得到键盘的按键键码
var code=event.keyCode;
//alert(code);
if(code==40){
imgobj.src="imgs/avatar3.png";
}
if(code==38){
imgobj.src="imgs/avatar.png";
}
*/
function login(){
var usernameObj=document.getElementById("username");
var passwordObj=document.getElementById("password");
var name=usernameObj.value;
var pass=passwordObj.value;
if(name=="zhangsan" && pass=="123456"){
return true;
}else{
alert("用户名密码错误");
return false;
}
}
</script>
</head>
<body οnkeydοwn="testkeydown(event)">
<input type="text" id="text1" value="测试聚焦/失焦事件"/><br>
<img src="imgs/avatar3.png" id="img1"/><br>
<form action="login" method="get" οnsubmit="return login();">
<input type="text" id="username" name="name" value="请输入用户名"/><br>
<input type="password" id="password" name="pass"/> <br>
<input type="submit" value="登录"/><br>
</form>
</body>
</html>