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。


  • 相关阅读:
    ConcurrentHashMap get方法保持同步的解释
    HashMap resize导致死循环
    ConcurrentHashMap原理详解
    单列索引和联合索引区别
    优先队列
    大根堆排序
    小根堆排序
    基础哈夫曼树-最简单的
    二叉查找树
    二叉查找树
  • 原文地址:https://www.cnblogs.com/dfyg-xiaoxiao/p/7213780.html
Copyright © 2011-2022 走看看