`

html-dom-总结

    博客分类：
  • W3C
 
阅读更多

 -------------------------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)

                    }


分享到：
| ajax-总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Laravel开发-laravel-html-dom-parser

    总结来说，`laravel-html-dom-parser` 提供了一个简单且高效的手段，让 Laravel 开发者能方便地在项目中处理和操作 HTML 文档。通过熟练掌握这个工具，你可以轻松实现网页数据抓取、内容分析等多种任务，从而提升...

    Python库 | ais-dom-0.83.6.tar.gz

    总结一下，`ais-dom-0.83.6.tar.gz`是一个Python库，专门用于DOM操作，支持HTML和XML文档的处理。这个库适用于后端开发，尤其是涉及到与网页内容交互的场景。通过解压、安装和理解库的API，开发者可以有效地利用它来...

    PyPI 官网下载 | py_dom_xpath_six-0.2.4-py3-none-any.whl

    XPath是一种在XML文档中查找信息的语言，而DOM则是XML和HTML文档的结构表示。这个库将XPath查询功能与Python的DOM接口相结合，使得在Python中处理XML文档变得更加简单。 **版本信息** 在文件名 "py_dom_xpath_six-...

    xml--DOM技术

    总结来说，XML--DOM技术是XML文档处理的关键，它通过将XML转换为可操作的节点树，使开发者能够灵活地读取、修改和管理XML内容。在JavaScript中，DOM API提供了丰富的功能，支持对XML数据的高效处理，广泛应用于现代...

    react.js、react-dom.js、babel.js文件包下载

    总结来说，这三个文件的组合使得开发者可以使用React的现代特性（如JSX）构建可复用的组件，并在实际浏览器环境中运行。在实际开发中，为了提高性能和优化资源加载，通常会采用模块打包工具（如Webpack或Parcel），...

    Javascript系列-DOM操作(理论)

    总结本章内容，DOM是JavaScript与HTML进行交互的重要接口，它提供了遍历、查找、操作元素的方法。通过学习DOM操作，开发者可以更好地控制网页的行为和布局。课后作业可以加深对这些概念的理解，例如编写代码实现对...

    react and react dom js.zip

    总结：这个压缩包提供了React和React DOM的开发版本，以及Babel编译器，是搭建React开发环境的基础。在开发过程中，这些文件可以帮助调试和构建React组件，而当准备发布时，需要转换为生产版本以优化性能。结合现代...

    XML-DOM.rar_DOM

    总结来说，DOM作为XML处理的核心工具，使得程序能够灵活地解析、操作和生成XML文档。掌握DOM的基本概念和操作方法，对于进行XML相关的开发工作至关重要。在实际应用中，理解DOM的工作原理，并合理运用其API，能够极...

    jQury-DOM篇学习笔记

    总结来说，jQuery提供了一套丰富的API来处理DOM操作，使得在JavaScript中操作HTML变得简单高效。无论是创建、插入还是删除节点，jQuery都提供了简洁的语法和多种选择，以适应不同的场景需求。理解并熟练掌握这些方法...

    这是项目的index，js，css，内含babel ，react.js ，react-dom.js

    9. `10-实战：项目收尾.zip`：这可能是项目的总结部分，涵盖测试、优化、部署等收尾工作。 整体来看，这个压缩包提供了一个全面的React学习和实践路径，从基础知识到进阶实战，覆盖了React开发的多个关键点，对于想...

    Algorithm-virtual-dom.zip

    总结来说，虚拟DOM是现代前端开发的重要工具，它通过高效的数据结构和算法，解决了频繁DOM操作带来的性能问题，极大地推动了前端性能优化的发展。理解和掌握虚拟DOM的原理与应用，对于任何Web开发者来说，都是提升...

    simple_html_dom,php下的html文件DOM解析库

    总结，PHP Simple HTML DOM解析库为PHP开发者提供了一种高效、灵活的HTML处理方式，无论是简单的数据提取还是复杂的页面重构，都能得心应手。只要熟悉了它的API，就能轻松地驾驭HTML文档，让Web开发变得更便捷。

    react-router-dom:react-router-dom原始码

    总结来说，React-Router-Dom通过定义路由规则、监听URL变化、解析路径匹配以及控制组件渲染，实现了React应用中的页面路由管理。深入理解其源码，有助于我们更好地运用这个库，解决实际开发中遇到的问题，构建出更...

    XML应用开发（软件品牌）-1期 6.1 课堂实践-DOM树结构.doc

    总结，DOM树结构是理解和操作XML文档的关键。通过掌握DOM，开发者可以有效地读取、修改和生成XML数据，这对于XML应用开发至关重要。在本课程的实践中，学生需要通过分析`Client.xml`文档，绘制DOM节点树，从而加深对...

    22-DOM树：JavaScript是如何影响DOM树构建的？_For_vip_user_0011

    总结来说，DOM树的构建是浏览器解析HTML文件的关键步骤，JavaScript的执行会中断这一过程，以允许动态更新DOM结构。了解这一机制对于优化网页性能至关重要，因为延迟JavaScript执行或使用异步加载可以减少阻塞，加快...

    Web APIs-Dom获取&属性操作（理论+实战篇）-获取随机图片案例资料

    总结，DOM获取和属性操作是Web开发中的基础技能，通过熟练掌握这些技能，我们可以实现丰富的交互效果和动态更新页面内容。在实际项目中，结合CSSOM和性能优化策略，能够打造出高效、用户体验良好的网页应用。

    reflex-dom-inbits：具有小代码位的reflex-dom教程

    总结来说，"reflex-dom-inbits"教程是一个适合Haskell开发者学习Reflex-FRP和构建轻量级GUI的应用实践。通过这个教程，学习者可以深入理解函数式反应式编程，并掌握在Haskell中构建高效、响应式用户界面的技巧。

    simple_html_dom下载和使用

    ### Simple HTML DOM：下载与使用详解 #### 一、简介 Simple HTML DOM 是一个 PHP 库，用于解析和操作 HTML 文档。它提供了一种简单而直观的方式来处理 HTML 内容，使得开发者能够轻松地抓取网页数据、修改 HTML ...

    physijs-dom-renderer:使用 DOM 元素模拟 JavaScript 物理引擎的演示。 D3.js 用于生成 HTML

    总结来说，"physijs-dom-renderer"项目是JavaScript物理引擎与D3.js结合的典范，它通过DOM元素展示了JavaScript物理模拟的潜力，为Web开发带来了新的可能性。借助这个工具，开发者可以实现更丰富、更具吸引力的交互...

Magicbox
Global site tag (gtag.js) - Google Analytics