html-dom-总结

 -------------------------browser对象--------------- 

browser 对象

        没有应用于 browser 对象的公开标准,不过所有浏览器都支持该对象。

window 对象

        表示浏览器中打开的窗口对象,是全局对象,所有的表达式都在当前的环境中计算,不需要显示引用window

        如window.alert==alert,        window.parent==parent

        常用方法:

                alert() 显示带有一段消息和一个确认按钮的警告框。 

                clearInterval() 取消由 setInterval() 设置的 timeout。 

                clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 

                setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。 4 1 9 

                setTimeout() 在指定的毫秒数后调用函数或计算表达式。

                        function circleHeartbeat(){//给循环加条件

                                while(PlantixComet.state != PlantixComet.s_leave){

                                PlantixComet.heartbeat();

                                setTimeout("circleHeartbeat()",PlantixComet.hbtimer);//一定要加上双引号"circleHeartbeat()"

                                应该setTimeout(circleHeartbeat,PlantixComet.hbtimer);

                        }

        常见属性:

                location,parent,navigator,document,history,screen

navigator 对象

        浏览器信息的对象

        常用属性:

                userAgent,appName,appName

screen对象

        浏览器显示屏幕的对象

history 对象由一系列的 URL 组成。这些 URL 是用户在一个浏览器窗口内已访问的 URL 。

        但出于隐私方面的原因,History 对象不再允许脚本访问已经访问过的实际 URL。

        唯一保持使用的功能只有 back()、forward() 和 go(-2) 方法。

location 

        常用属性:

                host、href、pathname、search、protocol

        常用方法:

                       reload() 重新加载当前文档。replace() 

-------------------------dom对象---------------        

        document        

                document.write(document.URL)//返回当前文档(页面)的URL

                referrer 返回载入当前文档的文档的 URL。 //即前一个URL

                document.open(mimetype,replace)//该方法将擦除当前 HTML 文档的内容,开始一个新的文档        

                        var newDoc=document.open("text/html","replace");

                        var txt="<html><body>Learning about the DOM is FUN!</body></html>";

                        newDoc.write(txt);

                        newDoc.close();

        Event 对象代表事件的状态,比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

                function show_coords(event){

                        alert("X 坐标: " + event.clientX + ", Y 坐标: " + event.clientY);

                }

                <body onmousedown="show_coords(event)">        //event不能换成this####################

                很多on开头的属性都是event的属性,比如onclick,onblur

                        onunload 用户退出页面。 

                        onload 一张页面或一幅图像完成加载。 

        Form 对象

                Form 对象的属性

                        action /method 

                        enctype “设置或返回”表单用来编码内容的 MIME 类型

                Form 对象的方法

                        reset() 把表单的所有输入元素重置为它们的默认值。

                        submit() 提交表单。

                Form 对象的事件句柄##########################事件句柄##########

                        onreset 在重置表单元素之前调用。 

                        onsubmit 在提交表单之前调用。 

                document.getElementById("myText").select()

                <input size="25" type="text" id="myText" value="选定我吧!">

                <input type="button" value="选择文本" onclick="selText()"> 

                document.getElementById('myName').accessKey="n" //按下ALT+N时,就会使myName获得焦点。

                <input id="myName" type="text" />

        Form dom的子dom对象的表单控件input及select(他们一般都有name,idvalue,length等属性,很方便,特有的)

                radio,checkbox被选中时,value值才被传递getParameter//js中 不是这种情况

                对象属性:.只要是属性就能"."

                        tagName,type,name,id,value,length,

                        selected,selectedIndex,disabled,display,checked,src

                        innetHTML,style.cssText,style

                select节点

                        slt.value<==>slt.options[slt.selectedIndex].value

                        新增/替换:slt.options[i]=new Option(value,text)//Option 有这个类么?

                        删除slt.options[i]=null

                                for(var i=0;i<slt.length;i++){}//删除时length一直都在变

                        清空slt.length=0;

                        --------

                        document.getElementById("city").value="bj";

                        <==>city[i].selected=true//city[i].value="bj"

                        <==>city.options[i].selected=true

                        new Option("-请选择-","-1");text/value

                        <==><option value="-1">-请选择-</option>

坐标

        屏幕2个

                window.screen.width屏幕分辨率的宽: 1280  

                window.screen.height屏幕分辨率的高: 800 

        页面6个

                document.body.scrollHeight=document.body.scrollTop+document.body.clientHeight=1263

                document.body.clientWidth=document.body.scrollLeft +document.body.scrollWidth=609

        style.width/height/left/top

        offset// 很复杂,故一般用绝对位置

                offsetParent//父元素中第一个其position设为relative或者absolute的元素

                obj.offsetTop 指 obj 相对于版面(或offsetParent)的上侧位置

                obj.offsetLeft 指 obj 相对于版面(或offsetParent)的左侧位置。

                obj.offsetWidth 指 obj 控件自身的绝对宽度

                obj.offsetHeight 指 obj 控件自身的绝对高度

        event专指:鼠标键盘

                event.clientX //页面x坐标

                event.clientY//页面y坐标

                调用event

                    <body onmousedown="show_coords(event)">

                    function show_coords(ev){

                            alert("X 坐标: " + ev.clientX + ", Y 坐标: " + ev.screenX)

                    }


猜你喜欢

转载自luckywnj.iteye.com/blog/1722651