DOM,BOM知识

地址栏信息:
                      window.location:
                               window.location.href="http://www.baidu.com"//打开一个页面
                               window.location.search :获取地址栏问号后面的东西;
                               window.location.port:端口号;
                               window.location.hash:获取#号后面的东西;    
  窗口信息:
                        滚动条:window.onscroll
                        浏览器窗口缩放:window.onresize
                        可视区的高度:document.documentElement.clientHeight
                        可视区宽度:document.documentElement.clientWidth;
  右下角广告:
                        if(window.navigator.userAgent.indexOf(‘MSIE 6.0‘)!=-1){
                               window.onload=window.onscroll=window.onresize=function(){
                                         var oBox=document.getElementById("box");
                                         var oScrollTop=document.documentElement.scrollTop||document.body.scrollTop;
                                         var clientH=document.documentElement.clientHeight;
                                         var objH=oBox.offsetHeight;
                                         var hei=oScrollTop+clientH-objH;
                                         oBox.style.top=hei+‘px‘;
                                       }
                                   }

滚动条:
            document.body.scrollTop//兼容chrome;
            document.documentElement.scrollTop;//兼容火狐和IE;不兼容chrome
            var oTop = document.documentElement.scrollTop || document.body.scrollTop;

物体本身的高度/宽度:
                                     getStyle              obj.offsetHeight/width
                    宽高         本来的宽高           盒子模型的宽高;
                    类型             string                               number
                    隐藏的       可以获取                  获取不到;
                    offsetHeight:物体的高度
                    offsetWidth: 物体的宽度;
                    obj.offsetLeft:物体到定位父级的左距离;
                    obj.offsetTop:物体到定位父级的上距离;
 绝对距离:
                       getPos(obj){
                              var l = 0;
                              var t = 0;
                               while(obj){
                                    l+=obj.offsetLeft;
                                    t+=obj.offsetTop;
                                    obj = obj.offsetParent;
                                   }    
                                return {left: l, top: t};
                             }

时间: 2024-08-04 00:25:18

DOM,BOM知识的相关文章

HTML DOM基础知识

HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3.通过 JavaScript,您可以重构整个 HTML 文档.您可以添加.移除.改变或重排页面上的项目.要改变页面的某个东西,JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口.这个入口,连同对 HTML 元素进行添加.移动.改变或移除的方法和属性,都是通过文档对象模型来获得

DOM&BOM笔记

day01正课:1. DOM概述2. ***DOM树3. *查找 1. DOM概述: DHTML:动态网页技术的统称 DHTML=HTML+CSS+JS 鄙视题: HTML XHTML DHTML XML: HTML:超文本标记语言,专门编写网页内容的语言 XHTML:严格的HTML语言标准 DHTML:动态网页技术的统称,=HTML+CSS+JS XML:可扩展的标记语言,可自定义标签 专门用来存储/传输自描述的结构化数据 逐渐被json替代了 <演员> <姓名>范冰冰</

DOM&amp;BOM

DOM&BOM 文档对象模型 (DOM):处理网页内容的方法和接口 浏览器对象模型(BOM):与浏览器交互的方法和接口 BOM window对象:浏览器中打开的窗口 ① 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象. ② window.frames 返回窗口中所有命名的框架 ③parent是父窗口(如果窗口是顶级窗口,那么parent==self==top) top是最顶级父窗口(有

web前端全部课件(html5+CSS3+javascript+dom+bom+jquery+jqm+bootstrap+angular+ext+weixin+less)

一.HTML5 BASIC课件 Unit01:Web基础知识.HTML快速入门.文本 Unit02:图像和链接.表格.结构标记 Unit03:列表.表单.其他常用标记 二.CSS3 BASIC课件 Unit01:CSS 概述.CSS 语法\尺寸与边框 Unit02:框模型.背景.渐变\文本格式化-1 Unit03:文本格式化-2.表格.浮动.显示 Unit04:列表.定位 三.京东首页实战(无PPT) 四.WEB UI课件 Unit01:Photoshop基本操作.网页切图.图像优化 Unit0

JSONP / DOM / BOM 部分总结

#JSONP 跨域请求 JSONP原理:通过动态创建script标签,利用其scr跨域的属性,访问其他域的服务器,请求数据并通过回调函数返回请求的结果 20:26 2017/7/13 突然发现在记事本按F5可以自动写出当前日期和时间,美滋滋 1.递归函数应该始终使用arguments.callee来递归的调用自身. 不要使用函数名 (函数名可能会发生变化)2.匿名函数 也叫 拉姆达函数3.关于闭包的作用域: 闭包的作用域链包含着它自己的作用域. 包含函数的作用域和全局作用域 通常,函数的作用域及

DOM BOM

DOM  document 操作页面的能力 获取元素:getElementByID()    getElementsByTagName()    getElementByClassName() 改变页面: innerHTML()  ,oDiv.style.color(), DOM树: 节点:文本节点,元素节点 获取节点 childNodes  ,因为兼容问题,可用NodeType 判断:  children ,则无兼容问题. parentNode,offsetParent(实际位置): firs

DOM BOM document window 区别

DOM 是为了操作文档出现的 API,document 是其的一个对象: BOM 是为了操作浏览器出现的 API,window 是其的一个对象. 使用下图讲解: 归DOM管的: E区:即document 归BOM管的: A区:浏览器的地址栏,书签栏等 B区:右键菜单 C区:document加载时的状态等 D区:滚动条 E区:document

JavaScript HTML DOM,BOM

DOM DOM 是一个 W3C (万维网联盟) 标准. DOM 定义了用于访问文档的标准: "W3C 文档对象模型 (DOM) 是一个平台和与语言无关的界面, 允许程序和脚本动态访问和更新文档的内容.结构和样式. W3C DOM 标准分为3个不同的部分: 适用于所有文档类型的核心 DOM 标准模型 用于 xml 文档的 xml DOM 标准模型 html 文档的标准模型 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. HTML DOM (Document Obj

DOM &amp; BOM :起源、方法、内容、应用

文档对象模型 (DOM):处理网页内容的方法和接口 浏览器对象模型(BOM):与浏览器交互的方法和接口 1. DOM 是 W3C的标准:[所有浏览器公共遵守的标准]2. BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]3. window 是 BOM对象,而非js对象: DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API). BOM 主要处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM