JavaScript-DOM文档对象

全称：Diucyment Object Model
将标记语言的各个组成部分封装为对象

• Document：整个文档对象
• Element：元素对象
• Attribute：属性对象
• Text：文本对象
  

有什么直接去查文档：HTML 标签参考手册

DOM的作用

• 改变HTML元素的内容
• 改变HTML元素的样式(css)
• 改变HTLM DOM事件作出反应
• 添加和删除 HTML 元素

介绍

• DOM将所有标签封装为对象
• 所有标签的父对象是Element

只要是提取属性赋值的，都是使用等于号

获取Element对象

 * getElementById：根据id属性值获取，返回一个Element对象
 * getElementsByTagName：根据标签名称获取，返回Element对象数组
 * getElementsByName：根据name属性值获取，返回Element对象数组
 * getElementsByClassName：根据class属性值获取，返回Element对象数组

仅掌握 document.getElementById 即可，根据标签的 id 值，来拿到Element对象
其余的根据 class 和根据 name的，返回的都是数组

<img src="off.gif" style="width: 100px;height: 150px;" id="myimg">
<script>
	let imdObj = document.getElementById("myimg")
</script>   

使用Element对象

  //1. getElementById：根据id属性值获取，返回一个Element对象
  var img = document.getElementById("light");
 // 修改图片地址 ---------------------------------------------------------------- 重要
 img.src="on.gif"

 //2. getElementsByTagName：根据标签名称获取，返回Element对象数组
 var divs = document.getElementsByTagName("div");
 /*
     style:设置元素css样式
     innerHTML：设置元素内容
 */

 for (let i = 0; i < divs.length; i++) {
   //设置字体颜色为红色  ---------------------------------------------------------------- 重要
   divs[i].style.color="red"
   //更改文本  ---------------------------------------------------------------- 重要
   divs[i].innerHTML="aaaa"
 }

 //3. getElementsByName：根据name属性值获取，返回Element对象数组
 var hobbys = document.getElementsByName("hobby");
 for (let i = 0; i < hobbys.length; i++) {
     //设置复选框被选中  ---------------------------------------------------------------- 重要
     hobbys[i].checked=true 
 }

事件监听

监听种类：单击、鼠标经过、鼠标离开等
有两种方式可以绑定事件监听

<!--第一种方式,直接在标签中指定-->
<input type="button" onclick="fu()">
<script>
	function fu(){
		alert("我被点了")
	}
</script>
<!--第二种方式,在函数中指定-->
<input type="button" id="btn">
<script>
	function fu(){
		document.getElementById("btn").onclike=function(){
			alert("我被点了")
		}
	}
</script>

注意：只有是对象才能绑定，如果是数组对象，需要先拿出元素再绑定

常见事件

事件名	事件作用
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	表单提交时触发该事件
onkeydown	键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

1.常见事件：onsubmit

 <form action="" id="register">
     <input type="text" id="username" name="username">
     <input type="submit">
 </form>
<script>
    document.getElementById("register").onsubmit=function(){
        let username = document.getElementById("username").value
        if(username===""||username==='')return false;
        else return true;
    }
</script>

onsubmint 这个属性能否提交，看的是最后 return 的布尔值，true是可以，false的不可以

2.常见事件：onload
作用：等待某个页面或图像被完成加载
有这么一个场景

 <script>
    document.getElementById("register").onsubmit=function(){
        let username = document.getElementById("username").value
        if(username===""||username==='')return false;
        else return true;
    }
</script>

 <form action="" id="register">
     <input type="text" id="username">
     <input type="submit">
 </form>

当这个获取 from 的element 的代码在 from 标签上的时候，会返回Null，因为 from 标签还没有被加载进入内存中，所以这个时候想保持这个格式，然后继续正常运行代码，就需要使用 onload ，使用后的代码如下

 <script>
	window.onload=function(){
	    document.getElementById("register").onsubmit=function(){
	        let username = document.getElementById("username").value
	        if(username===""||username==='')return false;
	        else return true;
	    }
	}
</script>

 <form action="" id="register">
     <input type="text" id="username">
     <input type="submit">
 </form>

使用 ==window.onload=function(){}==的方式，来包裹着函数体