zoukankan      html  css  js  c++  java
  • DOM 笔记

    DOM就是HTML页面的模型,将每个标签作为一个对象,javascript通过调用DOM中的属性,方法对网页中的文本框,层等进行编程控制
    javascript——》DOM就是C#——》.NET FRAMEWORK
    DOM也像winform一样,通过事件,属性,方法编程。
    CSS+javascript+DOM=DHTML

    一,window对象,代表当前浏览器窗口,使用window对象的属性,方法的时候可以省略window
    1.confirm方法,显示“确定”,“取消”对话框,按下“确定”返回true,否则返回false
    2.navigate方法,重新导航到指定的地址。
    3.setInterval,每个一段时间执行指定的代码,第一个参数为代码的字符串,第二个参数为间隔时间(单位毫秒),返回值为定时器的标识。<input type="button" value="滚动" onclick="setInterval('scroll()',500)"/>每调用一次setInterval都会产生一个新的定时器,并且旧的不会停止,所以看起来好像“越跑越快”
    4.clearInterval取消setInterval的定时执行,相当于timer中的enabled=false。因为可以设定多个定时器,所以取消时要指定清除那个定时器的标识,即setInterval的返回值。
    5.setTimeout,超时。也是定时执行,但只执行一次。对应clearTimeout

    二,body,document对象的事件
    1.onload,网页加载完毕时触发,浏览器一边下载文档一边解析执行,可能会出现javascript执行时需要操作某个元素这个元素还没加载,若这样就要把操作的代码放到onload事件中,或者把javascript放在元素之后,比如在页面打开时就更改一个还未没创建的按钮的属性,可这么做<body onload="btn.value='ok';"/>
    2.onunload,网页关闭(或者离开)后触发
    3.onbeforeunload,在网页准备关闭(或者离开)后触发。在事件中为“window.event.returnValue赋值(即设置要显示的警告消息),这样窗口离开(比如前进,后退,关闭)就会弹出确认消息<body onbeforeunload="window.event.returnValue='真的要放弃吗?';"/>
    4.其他事件。onclick,ondbclick,onkeydown,onkeypress,onkeyup,onmousedown,onmousemove,onmouseout,onmouseover,onmouseup.


    三,window对象属性。
    1.window.location.href。获取或设置地址。
    2.window.event。用来获得发生事件时的信息,事件不局限于window对象的时间,类似于winform中的eventArgs e。
    altKey属性,bool类型,类似还有ctrlKey,shiftKey.
    clientX,clientY,客户区的坐标;screenX,screenY,屏幕上的坐标;offsetX,offsetY鼠标相对于事件源的坐标
    returnValue属性,设置为false会取消默认事件的处理。在超链接的onclick里面禁止访问href的页面;在表单校验的时候禁止提交表单到服务器;可考虑用这个,如:<a href="http://www.baidu.com" onclick="alert('禁止访问');window.returnValue=false;">百度</a>
    srcElement,获得事件源对象。
    keyCode发生事件时的按键值。
    button,发生事件时鼠标按键,1为左键,2为右键,3为左右键同时按。
    3.screen对象,屏幕的信息;.height;.width
    4.clipboardData对象,对粘贴板的操作。clearData("Text")清空粘贴板;getData("Text")读取粘贴板的值,返回值为粘贴板中的内容;setData("Text",val)设置粘贴板的值。参数永远是Text。练习:可以复制地址给好友。
    当复制的时候body的oncopy方法被触发,直接return false就是禁止复制。<body oncopy="alert('禁止复制!');return false;">
    很多元素也有oncopy,onpaste事件。练习:禁止粘贴账号。
    在网站中复制文章的时候为了防止拷贝党不添加文章来源,自动在复制的内容后添加版权声明。
    function modifyClipboard(){
    clipboardData.setData('Text',clipboardData.getData('Text')+'本文来自。。。转载请注明出处'+location.href);
    }
    oncopy="setTimeout('modifyClipborad()',100)",不能在oncopy中执行对粘贴板的操作,因此设定定时器,0.1秒后执行,这样就不再oncopy的执行调用栈上了。
    5.window.history.back()后退;window.history.forward()前进。也可以用window.history.go(-1),window.history.go(1)前进
    6.window对象的document属性,最复杂属性之一。
    document.write方法,向页面中写入内容。。在onclick等事件中写的代码会冲掉页面的内容,只有在页面加载过程中write才会与原有内容融合在一起。write经常在广告代码,整合资源代码中被使用。
    document.getElementByIdx_x_x_x方法(非常常用),根据元素的id获得对象,网页中id不能重复,当然你也可以直接通过元素的id来引用元素,但是有有效范围,因此不建议直接通过id操作元素而是通过getElementById.
    document.getElementByName,根据元素的name获得对象,由于页面中元素的name可以重复,因此此方法返回值是对象数组。比如获得radio的数组。
    documen.getElementByTagName,获得指定标签名称的元素数组。
    练习:点击一个按钮,被点击的按钮显示“呜呜”,其他显示“哈哈”
    十秒钟后协议文本框下的注册按钮才能被点击,时钟倒数。(btn.disabled=true)
    加法计算器,利用控件的ID来获得值相加注意用parsteInt转换;美女时钟、img控件加载图片,用时间来改变组装图片的名字。
    四,DOM的动态创建。
    1. 当我们想动态创建DOM对象时怎么办呢?也许你想到了document.write,但是这个方法只能在页面加载过程中动态创建
    可以调用document_createElement_x_x_x方法来创建具有指定标签的DOM对象,然后通过调用元素的a方法将新创建元素添加到相应元素下(如div)。
    2.几乎所有的DOM元素都有innerText,innerHTML属性(注意大小写),分别是元素标签内内容的文本表示形式(标签内部的文本,如<a>文本</a>)和HTML源代码(标签内部的代码,如<div id='...'>innerHTML</div>),这两个属性是可读可写的。所以可用其动态修改元素。。动态产生的元素,浏览器中查看源代码是看不到的,可以通过DebugBar——>DOM——>文档——>HTML

    五,其他。
    1.冒泡事件。
    2.事件中的this,我们之前有在事件响应函数中用event.srcElement,现在我们还可以用this,this表示发生事件的控件。但是只有在事件响应函数中才能使用this获得发生事件的控件,在事件响应函数调用的函数中是不能使用的,非要用的话要将this传递给函数或者使用event.srcElement
    3.修改元素样式不是设置class属性,而是className属性。
    修改元素的样式不能this.style="background-color:Red".单独修改样式的属性使用style.属性名。注意在CSS中属性名在javascript中操作的时候属性名可能不一样,主要集中在哪些属性名中含有-的属性,因为javascript中-是不能做属性,类名的。如CSS:background-color而javascript:style.background
    4.控制层的显示。修改style.display。=‘none’不显示,=‘’显示。
    鼠标进入控件的事件是onmouseover,离开的事件是onmouseout,移动的事件是onmousemove。
    5.IE中body的事件范围。在body上添加onclick、onmouseover、等事件响应那么如果页面没有满,则body中最后一个元素以下(但是横向就不受限制)的部分是无法响应事件的。必须得使用代码在document上监听那些事件,比如document.onmouseover=方法。。。
    6.通过DOM读取元素的top、left、width、height等取到的值是像10PX这样的字符串,为这些属性设值得时候IE可以是80,90这样的数字,但FF必须是加PX,%等这样的字符串形式,为了兼容统一我们要用字符串形式。
    若要用DOM修改(比如自动加宽)元素的大小要首先要取出元素的宽度然后用parseInt将宽度转换为数字,然后再加上PX赋值回去。PS:不像C#中那样,在JS中parseInt是尽可能解析出数字的,比如50fhdhjh它也能解析出50来。
    7.层的定位操作。元素的position样式值:static(无定位,显示在默认位置)、absolute(绝对定位)、fixed(相对于窗口的固定定位,位置不会随着浏览器的滚动而变化,IE6不支持)、relative(相对于元素默认位置的定位)。若要通过代码修改元素的坐标则一般使用absolute,然后修改元素的top、left两个样式值。

    -------------------------------------------------------------------------------
    form对象!
    1.方法submit()提交表单,但是不会触发onsubmit事件。如果按钮不是submit类型的想要实现同样的效果可先取得form的ID然后再调用它的submit()方法。
    2.点击submit后form的onsubmit事件被触发,在onsubmit中可以进行数据校验,数据有问题则返回false即可阻止form提交。。记住,这是个很有用的方法,咱们要校验数据来着。
    3.具体的一个应用场景是,下拉选择框,用户选择后即提交,无须点击按钮,只需onchange方法调用form的submit方法即可实现,并无神奇之处的。
    4.面试时会被问具体浏览器之间的差异,及怎么解决,请观看录像60.。。JQuery能解决不同浏览器上DOM的不同。
    5.JS正则表达式。JS中创建正则表达式类的方法:var regex=new RegExp("\d{5}")或者var regex=/d{5}/。。。/表达式/是JS中专门为简化正则表达式编写而提供的语法。写在里面的表达式不用管转义符。
    RegExp对象的方法:test(str)判断是否匹配表达式。相当于IsMatch。


  • 相关阅读:
    C语言 realloc为什么要有返回值,realloc返回值具体解释/(解决随意长度字符串输入问题)。
    opencv中的vs框架中的Blob Tracking Tests的中文注释。
    Java实现 蓝桥杯VIP 算法提高 棋盘多项式
    Java实现 蓝桥杯VIP 算法提高 棋盘多项式
    Java实现 蓝桥杯VIP 算法提高 棋盘多项式
    Java实现 蓝桥杯VIP 算法提高 棋盘多项式
    Java实现 蓝桥杯VIP 算法提高 分苹果
    Java实现 蓝桥杯VIP 算法提高 分苹果
    Java实现 蓝桥杯VIP 算法提高 分苹果
    Java实现 蓝桥杯VIP 算法提高 分苹果
  • 原文地址:https://www.cnblogs.com/dfyg-xiaoxiao/p/7213780.html
Copyright © 2011-2022 走看看