今日知识
1. Dom(文档对象模型)
2. Bom(浏览器对象模型)
3. 总结Dom
1. 获取id为div1的元素对象。
* var result=document.getElementById("div1");
//获取元素内容
var x=result.innerHTML;
2. 通过标签名称查找HTML元素
* var result=document.getElementByTagName("p"); * 有多个P标签时，返回的数组形式 3. 通过类名查找Html元素 * var result=document.getElementByClassName("类名称"); * 有多个类名称相同标签时，返回的数组形式 4. 改变元素属性：var result=document.getElementById("div1"); * result.setAttribute("属性名","新的属性值")； * 或者 result.属性名="新的属性值"; 5. 修改css元素 * 元素对象.style.属性=新的值； 6. DOM事件 1. 鼠标事件 1. onclick 当用户点击某个对象时调用的事件句柄。 2. ondblclick 当用户双击某个对象时调用的事件句柄。 3. onmousedown 鼠标按钮被按下。 * 定义方法时，定义一个形参，接受event对象。 * event对象中的button属性可以获取那个鼠标被点击了 4. onmousemove 鼠标被移动。 //和下面类似 5. onmouseover 鼠标移到某元素之上。 6. onmouseout 鼠标从某元素移开。 7. onmouseup 鼠标按键被松开。 //tr颜色改变，this代表当前触发的对象 var tr = document.getElementsByTagName("tr"); for (var i=0;i<tr.length;i++){ tr[i].onmouseover = function () { this.style.background="#00ff00"; } tr[i].onmouseout = function () { this.style.background="#ffffff"; // alert(22) } } 2. 框架和对象事件Object onload 一张页面或一幅图像完成加载。 3. 表单事件 1. onblur 元素失去焦点 2. onfocus 元素获得焦点。 3. onsubmit 确认按钮被点击。 //如果返回false,表单不会被提交 4. onselect 文本被选中。( <input> 和 <textarea>) 5. onchange 域的内容被改变。 ( <input>, <select>, 和 <textarea>) 4. 键盘事件 1. onkeydown 某个键盘按键被按下。 2. onkeypress 某个键盘按键被按下并松开。 3. onkeyup 某个键盘按键被松开。 * <p id="p1"> 这是一段文字。。。。。 </p> <button onclick="change()">点我改变文本属性</button> <script> function change() { document.getElementById("p1").innerHTML="click事件触发，调用函数改变该方法"; } </script> 7. DOM节点（动态添加和删除HTML元素） * //获取对象元素 var p=document.getElementById("div1"); //获取要移除的对象 var box=document.getElementById("con"); var box=document.createElement("div"); p.removeChild(box); //类似剪切到目标节点上 p.appendChild(box); p.parentNode//获取p的父节点对象 p.childNode//获取p的子节点 p.childNodes//获取p的所有子节点 1. 文本节点（没有任何标签修饰） * 文本节点的nodeName：永远是#text * nodeValue是属性包含的文本 * nodeType=3 2. 属性节点（style等等） * 文本节点的nodeName：是属性名称 * nodeValue是属性包含的属性值 * nodeType=2 3. 元素节点（各种标签） * 文本节点的nodeName：是标签名称 * nodeValue是不可用 * nodeType=1 * 注意：对 firstChild 最普遍的用法是访问某个元素的文本： childNode.firstChild.nodeValue 4. 文档节点 * 文本节点的nodeName：永远是#document * nodeValue是不可用 * nodeType=9 * 节点的克隆 //用克隆的为方法 var clone=game.cloneNode(true);//那么 会克隆源节点的所有节点 bj.parentNode.replaceChild(clone,bj);BOM
1. Window:浏览器窗口对象
* window是一个全局对象，不需要创建(调用下面方法window可以不写，直接用)
* var width=window.innerWidth; var heigth=window.innerHeight; document.write("浏览器的宽度："+width+",浏览器 的高度"+heigth); * window.open("http://ww.baidu.com") - 打开新窗口 ,返回一个新的window对象 * window.close() - 关闭当前窗口 * 谁调用我 ，我关谁，可以把新创建的窗口对象用一个变量接收，该变量调用close()方法即可关闭，新打开的页面 * window.moveTo() - 移动当前窗口 * window.resizeTo() - 调整当前窗口的尺寸 * window.confirm("sometext"); 当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。 window.confirm() 方法可以不带上window对象，直接使用confirm()方法。 * window.prompt("sometext","defaultvalue"); 如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。用一个变量来接收你输入的值。 1.1 定时器 1. setTimeout() :在指定时间后调用该方法，只调用一 * 参数：js代码或者方法对象，第二个参数是毫秒值 clearTimeout(需要定时器的返回值) 取消由 setTimeout() 方法设置的 timeout。 * 返回值：返回一个唯一标识，用于取消定时器 2. setInterval():参数和上面一样，按指定时间一直调用 clearInterval() 取消由 setInterval() 设置的 timeout。 2. Screen:屏幕对象 1. var width=screen.availWidth();//获取屏幕的可用宽 2. var height=screen.availHeight();//获取屏幕的可用高 3. Locaton:位置对象 1. location.href="http://www.cskaoyan.com";//重定向到其他yemian 2. location.reload();//重新加载当前页面 3. host 返回一个URL的主机名和端口 4. hostname 返回URL的主机名 5. href 返回完整的URL //不赋值的话，可以直接获取当前的url，赋值的话代表将要跳转的地址 4. History:历史记录对象（onclicks属性中用） 1. back() 加载 history 列表中的前一个 URL 2. forward() 加载 history 列表中的下一个 URL 3. go() 加载 history 列表中的某个具体页面 5. Navigator:浏览器对象 1. appCodeName 返回浏览器的代码名 2. appName 返回浏览器的名称 3. appVersion 返回浏览器的平台和版本信息 4. cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值 5. platform 返回运行浏览器的操作系统平台 6. userAgent 返回由客户机发送服务器的user-agent 头部的值