Dom与Bom

Dom与Bom

Dom

​ 一个Html文件就是一个Dom对象（文档对象模型）

	<img id="img" src="img/off.gif"/>
	<script>
        //获取id为img的标签的对象 var 对象名 = document.getElementById("标签的id值")
    	var element = document.getElementById("img");
		//给img对象赋值 对象名.属性名 = 属性值
    	element.src="img/on.gif";
		//得到对象的标签体并修改
		element.innerHTML() = 新的标签体;
   	<script/>

事件

​ 某些组件被执行了某个指令（动作），触发了某些代码的执行

方式:

​ 1.在标签内添加一个事件,值为js代码

​ 2.获取标签对象，并给标签内的事件赋值。

//单击事件
	//方式一 入侵式写法(不建议)1.1
	//<input type="button" value="点我" οnclick="alert("hello")">
	//1.2
	//<input type="button" value="点我" οnclick="func();">
	//方式二
	  <input id="btn" type="button" value="点我" onclick="func">
    <script>
        //function func(){
        //	alert("hello");
    	//}
          //得到button按钮的对象
          var btn = document.getElementById("btn");
		  //给btn的onclick的属性赋值
		  btn.onclick=alert("hello");
    <script/>

Bom

​ Brower Object Model （浏览器对象模型）

//window 窗口对象
	//创建 不需要创建，直接使用 
	//调用方法
		//对话框的方法
			1.alert();  //弹出警告对话框
			2.confirm(); //弹出一个确定取消对话框 返回值为boolean值(点击确定返回true，取消返回								false)
			3.prompt(); //弹出一个输入框 返回值为输入值(点击确定返回输入值，取消返回null)
		//打开与关闭
			1.open() //返回值为被打开的窗口的对象
            2.close() 
		//定时器 
			1.setTimeout(函数对象,毫秒值);// 返回值为定时器的编号(唯一标识)
			2.clearTimeout(定时器id); // 清除指定的定时器
			3.setInterval(函数对象,毫秒值); //每隔多长时间执行一次函数 返回值为定时器的编号
	//访问属性 通常可以省略window
		window.方法名
	//属性
		document //文档对象 html页面对象
        innerWidth //浏览器的显示区域的宽
        innerHeight //浏览器的显示区域的高
//location 地址栏对象
    //属性或方法
       	1.href
        2.reload()  //重新加载页面|刷新
//histroy 历史对象
	//创建 直接调用
	//属性或方法
		forward():前进一个页面
        back():后退一个页面
        go(参数): 参数为正表示前进，负表示后退
        length:历史记录条数
//navigator 浏览器对象
//Screen 显示浏览器的电脑屏幕对象
        var CScreen = screen;
		alert(CScreen.width);
		alert(CScreen.height);
//Dom对象 把结构化(用标记语言写的)文档的各个部分封装为对象，操作html中的标签
	//对象
		1.document //当前html对应的对象
        2.element  //表示一个标签对象
        3.Node	//表示一个节点
   	//Element
        //方法
        	getElementById(); //根据id获取标签对象
			getElementByTagName();//根据标签名获取标签数组
			getElementByClass();//根据class获取标签数组
			getElementByName();//根据name属性获取标签数组或对象，通常用作获取单选，复选框对象 
	//创建其他对象
		Element e = document.createElement("标签名");
	//Node对象
		//方法
			1.document.createElement("标签名")  //创建的是标签节点
			2.document.createTextNode("标签体名");//创建的是标签体节点
			3.父节点.appendChild(子节点); //将子节点追加到父节点中
			4.父节点.removeChild(子节点) //删除子节点
	//样式控制
		1. .style //得到标签对象的样式属性
		2.  .className="div" //给节点添加名为div的样式

DOM：

* 概念： Document Object Model 文档对象模型
	* 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

* W3C DOM 标准被分为 3 个不同的部分：

	* 核心 DOM - 针对任何结构化文档的标准模型
		* Document：文档对象
		* Element：元素对象
		* Attribute：属性对象
		* Text：文本对象
		* Comment:注释对象

		* Node：节点对象，其他5个的父对象
	* XML DOM - 针对 XML 文档的标准模型
	* HTML DOM - 针对 HTML 文档的标准模型





* 核心DOM模型：
	* Document：文档对象
		1. 创建(获取)：在html dom模型中可以使用window对象来获取
			1. window.document
			2. document
		2. 方法：
			1. 获取Element对象：
				1. getElementById()	： 根据id属性值获取元素对象。id属性值一般唯一
				2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
				3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
				4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
			2. 创建其他DOM对象：
				createAttribute(name)
            	createComment()
            	createElement()
            	createTextNode()
		3. 属性
	* Element：元素对象
		1. 获取/创建：通过document来获取和创建
		2. 方法：
			1. removeAttribute()：删除属性
			2. setAttribute()：设置属性
	* Node：节点对象，其他5个的父对象
		* 特点：所有dom对象都可以被认为是一个节点
		* 方法：
			* CRUD dom树：
				* appendChild()：向节点的子节点列表的结尾添加新的子节点。
				* removeChild()	：删除（并返回）当前节点的指定子节点。
				* replaceChild()：用新节点替换一个子节点。
		* 属性：
			* parentNode 返回节点的父节点。


* HTML DOM
	1. 标签体的设置和获取：innerHTML
	2. 使用html元素对象的属性
	3. 控制元素样式
		1. 使用元素的style属性来设置
			如：
				 //修改样式方式1
		        div1.style.border = "1px solid red";
		        div1.style.width = "200px";
		        //font-size--> fontSize
		        div1.style.fontSize = "20px";
		2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

事件

    某些组件被执行了某些操作，而触发了某些代码的执行

常见的事件

div.οnkeydοwn=function(envent){} //event代表事件，可以获取里面的值或属性。 eg：event.keCode()

//点击的事件
	onclick //单击
	ondblclick //双击
//焦点事件
	onblur //失去焦点
	onfocus //获得焦点
//键盘事件 keyCode获取键盘值
	onkeydown //按下
	onkeyup //松开
	onkeypress //按下并松开
//加载的事件
	onload //加载完成的事件
//鼠标的事件 左键0 滚轮1 右键2
	onmousedown //按下
	onmousemove //移动
	onmouseout //移开
	onmouseover //移动到上面
	onmouseup //松开
//选择事件
	onselect //被选中
	onchange//被改变
//表单事件
	onsubmit //提交 返回值为true则返回，否则不提交
	onreset //重置