dom知识点
---------------------------------DOM 文档对象模型-------------------------- --浏览器执行过程: 服务器将浏览器请求的内容(1.html 页面的内容全部发回浏览器,浏览器接收到代码后,就由上到下的逐行解释代码 并将其中的html+css 代码翻译成图形界面给用户),通过服务器的卡西尼监听端口,执行服务器中的物理路径页面. 浏览器解释HTML+CSS生成DOM树,生成图形界面.
js使用两种主要的对象模型: 1.浏览器对象模型(BOM):提供访问浏览器各个功能部件,如:浏览器窗口本身,浏览历史等操作方法; 2.文档对象模型(DOM):提供了访问浏览器窗口内容
文档对象模型定义了 js 可以进行操作的浏览器,描述了文档对象的逻辑结构 及各功能部件的标准接口. 1.元素的事件后 == 一段完整的JavaScirpt代码 onclick="onClick()"是可以的, 相当于当onclick事件触发 的时候执行"onClick()"方法代码 ; onclick=onClick();是错误的. 2. js中事件调用与执行的问题: btn.onclick=onClick;-->js中注册事件,当onclick事件触发时执行onClick()方法. btn.onclick=onClick(); -->执行的时候先调用onClick()方法执行内部代码, 之后将onClick();方法的的返回值 赋值给btn.onclick 1.如果onClick()方法没有返回值,则就是将undefined返回, 由于btn.onclick事件不支持undefined返回值,所以报错 2.如果onClick()方法有返回值,则将返回值赋值给btn.onclick
3.window对象成员:(相当于DOM中的根对象) 1.在使用window对象成员属性的时候,可以省略 "window." ----------------------------------------------------------------------------------------------------- 4.document属性: 1.write : document.write(" "); 用于在当前位置输出文本. write只能在页面的执行流中加载,才会与原有内容融合在一起 不能在事件中,否则会覆盖(冲掉)之前的内容. 2.可以使用document.write();在页面中动态的画入内容 3.document.GetElementById("id名");-->根据元素的id获得对象,网页中id不能重复. 若重复了,则只管id重复元素的第一个元素 4.var txts = document.GetElementsByName()-->根据元素的name属性,获得返回一个元素对象数组.可以对其进行遍历.
5.var models= document.GetElementsByTagName();-->根据标签名 获得元素对象, 返回数组
6.设置元素对象的样式通过: 元素对象 . style.backgroundColor="red";
7.confirm(); 弹出是否真正关闭的提示框.
8.window.navigate("网址"); 导航到指定网站.---可应用于跳转指定页面
9.setInterval("code",time) 定时器---clearInterval(指定要取消的定时器)---取消定时器 code:第一个参数为时间到达时执行的代码, time:第二个参数为间隔多长时间执行一次(单位毫秒) setInterval();的返回值表示定时器的编号,因为可以指定多个定时器,可以根据编号选择所要停止的定时器
使用: setInterval(注册事件,2000);--->举例: setInterval(onInterval , 2000); setInterval("执行代码",1000);
10.setTimeout(); 只执行一次的定时器. clearTimeout();清除该定时器 11.parseInt("100px",10); 将第一个参数的字符串"尽力的"解析成10进制数 ---------------------------------------------------03-15------------------------------------
5.window对象的属性: window.onload事件 --当页面元素加载完毕后,才会触发. 1.重新导向新的地址: window.location.href="http://www.baidu.com"; 2.刷新页面:window.location.reload();
3.window.event:---->非常重要的属性,用来获得发生事件时的信息 returnValue属性:如果将returnValue设置为false,就会取消默认事件的处理 <a href>在超链接的onclick里面禁止访问href的页面.<a href="http://www.baidu.com" onclick="returnValue=false;">百度</a> <form>在表单校验的时候禁止提交表单到服务器,防止错误数据提交给服务器,防止页面刷新 <form> <input type="button" value="删除" onclick="window.event.returnValue=confirm('真的要删除?')"/> </form> 直接 return false 也可以阻止当前行为. ---------------关于 returnValue 和 return false 的区别---------------------------- 1.在onclick里面 window.event.returnValue=false; 不执行后续动作(a就是导航到href页面,type="submit"提交表单) 2.在onclick里面return false;也可以达到同样的目的 举例: function func1() // 执行后返回值为 func1 { return "func1"; } function func2() //执行后并没有返回 func1()方法的返回值,如果想获得返回值 { //可以写: return func1();从而获取func1的返回值 func1(); } <a href="http://www.taobao.com" onclick="return function(){return false;}">淘宝</a> 上面这个超链接可以跳转,是因为onclick 返回了一个匿名函数. 在其后加() 便不能跳转 如果把响应函数放入单独的函数 onclick="myclick();" 相当于 btn.onclick=function(){myclick();} 所以即使在myclick()里面return false,不影响function(){myclick();}返回值 通过window.event.returnValue也能简化问题,因为只是普通的赋值,所以不涉及返回值问题 这样即使是onclick="myclick();" 那么如果myclick里面window.event.returnValue=false也能阻止后续行为 -----------------------------------------------------------------------------------
srcElement属性: 获得事件源对象.几个事件共享一个事件响应函数用(获得当前所触发对象) clientX , clientY:发生事件时鼠标在客户区的坐标, screenX, screenY:发生事件时鼠标在屏幕上坐标 offsetX, offsetY: 发生事件时鼠标相对于事件源的坐标(比如点击按钮时出发onclick) button: 发生事件时鼠标按键,1-左键 2-右键 3-左右键同时按下 <body onmousedown="if(event.button==2){alert('禁止复制');}"> altKey属性 : bool类型,表示发生事件时 alt键 是否被按下. 还有:ctrlKey , shiftKey -------------------------------------------------------------------------------------------------------------- 6.DOM的动态创建: 1.调用document的createElement方法来创建具有指定标签的DOM对象, 然后通过调用某个元素的appendChild方法将创建元素添加到相应的元素下 也可以注册事件, 获取动态生成元素的ID值. function showit() { var divMain = document.getElementById("divMain"); var btn = document.createElement("input"); btn.type = "button"; btn.value = "我是动态的！"; divMain.appendChild(btn); } <div id="divMain"></div> <input type="button" value="ok" onclick="showit()" /> 2.innerText 与 innerHTML innerText:IE支持,但是火狐不支持,要使用textContent innerHTML:解析的时候能够识别HTML标签 3. 动态创建表格: 问题:通过dom动态给table加行的时候,发现IE6下没效果,使用开发人员工具发现 IE6下自动增加了一个tbody标签,通过代码appendChild的tr没有加到tbody下,所以显示不出来. 经过查看,发现通过t1.tBodies.appendChild(tr1) 可以加到tBody标签中. 但是IE8又失效了 这就是浏览器兼容问题的例子. 解决办法: 在table标签中先加入tBody标签,然后将表格动态加载到tBody标签中. 4.this 与 srcElement 区别 this:表示当前监听事件的对象,当前冒泡的对象,当onclick="func()", 在func()方法中使用this则代表当前window对象,即onclick中定义 了一个匿名方法,匿名方法属于window对象. srcElement:当前触发事件的事件源对象.
5.createTextNode("asd")创建文本节点 createElement("div") 创建元素标签类型 ----------------------------------------------------------------- DOM事件: 1.onload(); 页面所有元素加载完毕后触发. 2.unload(); 页面关闭后触发. 3.onbeforeunload(): 页面关闭之前触发.可以用confirm()让用户选择 是否关闭. 4.window.history.back()/go()-->history用栈实现,先进后出. hashmap也可以记录浏览器访问路径 5.document write/writeln : 当dom树创建后调用此方法的话 会重新创建一个新的dom树,前面的内容就没有了
--------------------------------------事件冒泡---------------------- 1.阻止事件冒泡: IE中阻断事件冒泡 window.event.cancelBubble=true; event.preventDefault 1.事件冒泡: 当元素父子级元素中都添加了onclick事件后, 点击子元素时,同时父级元素的onclick事件也会触发. 要考虑浏览器兼容问题(<p>标签在<div>标签中 就不会响应) ------------------------------------------------------------------- 层的位置: display:none; 不占用空间位置 visiability:hidden; 隐藏后占用位置 当改变层的位置的时候:必须设置position:absolute;绝对定位. position: static 默认的; fixed:固定位置(不该变位置); relative:相对于某个元素进行布局(新闻"热"点图片布局)
获得HTML的根节点: document.documentElement 获得浏览器可见区域的宽度与长度: document.documentElement.clientWidth. document.documentElement.clientHeight. 元素的实际宽度与长度(前提是元素提前显示出来才能获取长宽) : offsetHeight offsetWidth 获得滚动条的高度 scrollTop 浏览器滚动事件: window.onscroll() 浏览器大小改变事件 window.onresize() ----------------------------------------------------------------------- 设置元素属性: var divMain= document.getElementById("divMain") divMain.setAttribute("name","波波"); 参数1.key 2.value 移除元素属性: divMain.removeAttribute("name");
----------------------------------------------------------------------- 表单元素form: <form action="提交路径目标" method="post(get)"> <inout type="text" name="txt"/> <input type="submit" value="提交"/> </form> 通过按钮点击事件,将一大段代码 传送到 服务器. 文本内容指定name属性后 通过httpWatch工具能够看到提交的文本内容 method方式: post 与 get post: 提交表单后域名地址栏不显示提交的内容 get: 提交表单后域名地址栏显示所提交的内容
form表单中的onsubmit()事件: onsubmit();提交表单之前触发; 在事件内部可以进行判断 阻断当前表单的提交操作. return false或 window.event.returnValue=false; 如果想通过button按钮提交表单,必须给表单注册submit事件.
----------------------------------------window.event.keyCode----------------------------------- 响应文本框的onKeyDown事件，window.event.keyCode获得用户点击的keyCode 回车实现Tab跳转 if(window.event.keyCode == 13){window.event.keyCode = 9;} <body onkeydown="if(window.event.keyCode==13){window.event.keyCode=9;}">
keyCode ascii码说明： 8：退格键 46：delete 37-40： 方向键 48-57：小键盘区的数字 96-105：主键盘区的数字 110、190：小键盘区和主键盘区的小数点 189、109：小键盘区和主键盘区的负号
13：回车 9： Tab 就是那个把焦点移到下一个文本框的东东。
