从屌丝到架构师的飞越（JavaScript篇）-JavaScri

作者: 走着别浪 | 来源:发表于2019-10-01 06:46 被阅读0次

一、介绍

这节课呢，我们来了解的是JavaScript BOM概述。

BOM 是 Browser Object Model，浏览器对象模型。

刚才说过 DOM 是为了操作文档出现的接口，那 BOM 顾名思义其实就是为了控制浏览器的行为而出现的接口。

浏览器可以做什么呢？比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。

所以 BOM 就是为了解决这些事情出现的接口。比如我们要让浏览器跳转到另一个页面，只需要

location.href = "http://www.xxxx.com";这个 location 就是 BOM 里的一个对象。

由于BOM的window包含了document，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。

可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。

二、知识点介绍

1、Window对象

2、Location对象

3、Document对象

4、Element对象

5、Table对象

三、上课对应视频的说明文档

JavaScript的实现包括以下3个部分：

ECMAScript(核心) 描述了JS的语法和基本对象。

文档对象模型（DOM）处理网页内容的方法和接口

浏览器对象模型（BOM）与浏览器交互的方法和接口

javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象。

1)DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]

2)BOM 是各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]

3)window 是 BOM 对象，而非 js 对象；javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)

ECMAScript扩展知识：

① ECMAScript是一个标准，JS只是它的一个实现，其他实现包括ActionScript。

② “ECMAScript可以为不同种类的宿主环境提供核心的脚本编程能力……”，即ECMAScript不与具体的宿主环境相绑定，如JS的宿主环境是浏览器，AS的宿主环境是Flash。

③ECMAScript描述了以下内容：语法、类型、语句、关键字、保留字、运算符、对象。

DOM, DOCUMENT, BOM, WINDOW 区别

DOM 是为了操作文档出现的 API，document 是其的一个对象；

BOM 是为了操作浏览器出现的 API，window 是其的一个对象。

BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作

归DOM管的：

E区（就是你说的document啦。由web开发人员呕心沥血写出来的一个文件夹，里面有index.html，CSS和JS什么鬼的，部署在服务器上，我们可以通过浏览器的地址栏输入URL然后回车将这个document加载到本地，浏览，右键查看源代码等。

归BOM管的：

A区（浏览器的标签页，地址栏，搜索栏，书签栏，窗口放大还原关闭按钮，菜单栏等等）

B区（浏览器的右键菜单）

C区（document加载时的状态栏，显示http状态码等）

D区（滚动条scroll bar）

1、Window对象

Window 对象是 JavaScript 层级中的顶层对象。

Window 对象代表一个浏览器窗口或一个框架。

Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。

1.1.1、对象属性

1）成员对象属性

window //窗户自身, window=window.self 可使用全局属性 window访问　Window对象

document 对 Document 对象的只读引用。请参阅 Document 对象。

history 对 History 对象的只读引用。请参数 History 对象。

location 用于窗口或框架的 Location 对象。请参阅 Location 对象。

screen 对 Screen 对象的只读引用。请参数 Screen 对象。

navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。

external.AddFavorite("地址","标题" ) //把网站新增到保藏夹

2）基本属性

属性描述

closed 返回窗口是否已被关闭。

defaultStatus 设置或返回窗口状态栏中的默认文本。

innerheight 返回窗口的文档显示区的高度。

innerwidth 返回窗口的文档显示区的宽度。

length 设置或返回窗口中的框架数量。

name 设置或返回窗口的名称。

opener 返回对创建此窗口的窗口的引用。

outerheight 返回窗口的外部高度。

outerwidth 返回窗口的外部宽度。

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。

pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

parent 返回父窗口。

self 返回对当前窗口的引用。等价于 Window 属性。

window window 属性等价于 self 属性，它包含了对窗口自身的引用。

status 设置窗口状态栏的文本。

top 返回最顶层的先辈窗口。

screenLeft

screenTop

screenX

screenY 只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。

1.1.2、对象方法

window.close(); //关闭窗口

window.alert("message"); //弹出一个具有OK按钮的系统消息框，显示指定的文本

window.confirm("Are you sure?"); //弹出一个具有OK和Cancel按钮的询问对话框，返回一个布尔值

window.prompt("What's your name?", "Default"); //提示用户输入信息，接受两个参数，即要显示给用户的文本和文本框中的默认值，将文本框中的值作为函数值返回

window.setTimeout("alert('xxx')", 1000); //设置在指定的毫秒数后执行指定的代码，接受2个参数，要执行的代码和等待的毫秒数

window.clearTimeout("ID"); //取消还未执行的暂停，将暂停ID传递给它

window.setInterval(function, 1000); //无限次地每隔指定的时间段重复一次指定的代码，参数同setTimeout()一样

window.clearInterval("ID"); //取消时间间隔，将间隔ID传递给它

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

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

createPopup() 创建一个 pop-up 窗口。

moveBy() 可相对窗口的当前坐标把它移动指定的像素。

moveTo() 把窗口的左上角移动到一个指定的坐标。

open() 打开一个新的浏览器窗口或查找一个已命名的窗口。

print() 打印当前窗口的内容。

resizeBy() 按照指定的像素调整窗口的大小。

resizeTo() 把窗口的大小调整到指定的宽度和高度。

scrollBy() 按照指定的像素值来滚动内容。

scrollTo() 把内容滚动到指定的坐标。

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

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

timeOutEvent = setTimeout("longPress('" + obj + "')",1500);定时器传参数

扩展

① 如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

② window.frames 返回窗口中所有命名的框架

③parent是父窗口（如果窗口是顶级窗口，那么parent==self==top）

top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe）

self是当前窗口（等价window）

opener是用open方法打开当前窗口的那个窗口

④与消息框有关的方法：alert(String)、confirm(String)、prompt(String)

⑤两种定时器：setTimeout(code,latency) 和 setInterval(code,period)

注：setTimeout只执行一次code，如果要多次调用，可以让code自身再次调用setTimeout()；setInteval()会不停地调用code，直到clearInterval()被调用。

myWindow=window.open('','','width=200,height=100')

myWindow.document.write("This is 'myWindow'")

window.open("弹出窗口url","窗口名称"," 窗口特征");

弹出固定大小窗口,并且无菜单栏等

window.open("adv.html",""," height=380,width=320,toolbar=0,

scrollbars=0, location=0,status=0,menubar=0,resizable=0 ");

属性名称说明

height、width 窗口文档显示区的高度、宽度。以像素计。

left、top 窗口的x坐标、y坐标。以像素计

toolbar=yes | no |1 | 0 是否显示浏览器的工具栏。黙认是yes。

scrollbars=yes | no |1 | 0 是否显示滚动条。黙认是yes。

location=yes | no |1 | 0 是否显示地址地段。黙认是yes。

status=yes | no |1 | 0 是否添加状态栏。黙认是yes。

menubar=yes | no |1 | 0 是否显示菜单栏。黙认是yes。

resizable=yes | no |1 | 0 窗口是否可调节尺寸。黙认是yes。

titlebar=yes | no |1 | 0 是否显示标题栏。黙认是yes。

fullscreen=yes | no |1 | 0 是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式。

1.2、History对象

window.history.length //浏览过的页面数

history.back() //在浏览历史里后退一步

history.forward() //在浏览历史里前进一步

history.go(i) //到汗青详细登记单的第i位

//i>0进步,i<0撤退退却

1.3、Screen对象

screen对象：用于获取某些关于用户屏幕的信息，也可用window.screen引用它

window.screen.width //屏幕宽度

window.screen.height //屏幕高度

window.screen.colorDepth //屏幕颜色深度

window.screen.availWidth //可用宽度(除去任务栏的高度)

window.screen.availHeight //可用高度(除去任务栏的高度)

1.4、Navigator对象

navigator`对象：包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用

　　window.navigator.appCodeName //浏览器代码名

　　window.navigator.appName //浏览器步伐名

　　window.navigator.appMinorVersion //浏览器补钉版本

　　window.navigator.cpuClass //cpu类型 x86

　　window.navigator.platform //操作体系类型 win32

　　window.navigator.plugins

　　window.navigator.opsProfile

　　window.navigator.userProfile

　　window.navigator.systemLanguage //客户体系语言 zh-cn简体中文

　　window.navigator.userLanguage //用户语言,同上

　　window.navigator.appVersion //浏览器版本(包括体系版本)

　　window.navigator.userAgent//用户代理头的字符串表示

　　window.navigator.onLine //用户否在线

　　window.navigator.cookieEnabled //浏览器是否撑持cookie

　　window.navigator.mimeTypes

2、Location对象

location对象：表示载入窗口的URL，也可用window.location引用它

location.href //当前载入页面的完整URL，如http://www.somewhere.com/pictures/index.htm

location.protocol //URL中使用的协议，即双斜杠之前的部分，如http

location.host //服务器的名字，如www.wrox.com

location.hostname //通常等于host，有时会省略前面的www

location.port //URL声明的请求的端口，默认情况下，大多数URL没有端口信息，如8080

location.pathname //URL中主机名后的部分，如/pictures/index.htm

location.search //执行GET请求的URL中的问号后的部分，又称查询字符串，如?param=xxxx

location.hash //如果URL包含#，返回该符号之后的内容，如#anchor1

location.assign("http:www.baidu.com"); //同location.href，新地址都会被加到浏览器的历史栈中

location.replace("http:www.baidu.com"); //同assign()，但新地址不会被加到浏览器的历史栈中，不能通过back和forward访问

location.reload(true | false); //重新载入当前页面，为false时从浏览器缓存中重载，为true时从服务器端重载，默认为false

document.location.reload(URL) //打开新的网页

3、Document对象

HtmlDocument 为 Internet Explorer 的文档对象提供托管包装，该文档对象也称为 HTML 文档对象模型 (DOM)。您可以通过 WebBrowser 控件的 Document 属性获取 HtmlDocument 的实例。

HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。

HTML 文档中的 HTML 标记可以相互嵌套。因此，HtmlDocument 表示一个文档树，其子级是 HtmlElement 类的实例。下面的代码示例演示一个简单的 HTML 文件。

HtmlDocument 表示 HTML 标记内的整个文档。BODY、DIV、FORM 和 SPAN 标记各由一个单独的 HtmlElement 对象表示。

3.1、对象属性

document.body//提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。

document.cookie 返回与当前文档有关的所有 cookie。

document.title //返回文档标题等价于HTML的title标签

document.domain 返回当前文档的域名。

document.URL //设置URL属性从而在同一窗口打开另一网页

document.referrer 返回载入当前文档的文档的 URL。

document.lastModified 返回文档被最后修改的日期和时间。

3.2、常用对象方法

document.write() //动态向页面写入内容

document.writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

document.createElement(<Tag>) //用指定标签类型创建一个新的element对象)

document.getElementById(ID) //获得指定ID值的对象

document.getElementsByName(Name) //获得指定Name值的对象

document.getElementsByTagName() 返回带有指定标签名的对象集合。

3.3、body-主体子对象

document.body //指定文档主体的开始和结束等价于body>/body>

document.body.bgColor //设置或获取对象后面的背景颜色

document.body.link //未点击过的链接颜色

document.body.alink //激活链接(焦点在此链接上)的颜色

document.body.vlink //已点击过的链接颜色

document.body.text //文本色

document.body.innerText //设置body>…/body>之间的文本

document.body.innerHTML //设置body>…/body>之间的HTML代码

document.body.topMargin //页面上边距

document.body.leftMargin //页面左边距

document.body.rightMargin //页面右边距

document.body.bottomMargin //页面下边距

document.body.background //背景图片

document.body.appendChild(oTag) //动态生成一个HTML对象

Document子对象HTMLElement对象详解

HTML DOM 节点

在 HTML DOM （文档对象模型）中，每个部分都是节点：

1.文档本身是文档节点

2.所有 HTML 元素是元素节点

3.所有 HTML 属性是属性节点

4.HTML 元素内的文本是文本节点

5.注释是注释节点

4、Element 对象

在 HTML DOM 中，Element 对象表示 HTML 元素。

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点

获取

document.getElementById(ID) //获得指定ID值的对象

document.getElementsByName(Name) //获得指定Name值的对象

getElementsByTagName() 返回带有指定标签名的对象集合。

属性和方法

方法里有a,b的参数仅仅是为了加深说明,其他元素没有a,b不代表是无参方法

Element.add(<class>)给元素添加指定的类

element.accessKey 设置或返回元素的快捷键。

element.appendChild() 向元素添加新的子节点，作为最后一个子节点。

element.attributes 返回元素属性的集合。

element.childNodes 返回元素子节点的 NodeList。

element.className 设置或返回元素的 class 属性。

element.clientHeight 返回元素的可见高度。

element.clientWidth 返回元素的可见宽度。

element.cloneNode() 克隆元素。

element.compareDocumentPosition() 比较两个元素的文档位置。

element.contentEditable 设置或返回元素的文本方向。

element.dir 设置或返回元素的文本方向。

element.firstChild 返回元素的首个子。

element.getAttribute() 返回元素节点的指定属性值。

element.getAttributeNode() 返回指定的属性节点。

element.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。

element.getFeature() 返回实现了指定特性的 API 的某个对象。

element.getUserData() 返回关联元素上键的对象。

Element.hidden获取或设置hidden属性的存在状态

element.hasAttribute() 如果元素拥有指定属性，则返回true，否则返回 false。

element.hasAttributes() 如果元素拥有属性，则返回 true，否则返回 false。

element.hasChildNodes() 如果元素拥有子节点，则返回 true，否则 false。

element.id 设置或返回元素的 id。

element.innerHTML 设置或返回元素的内容。

element.insertBefore(<a>,<b>) 在指定的已有的子节点之前插入新节点。A插到b前

element.isContentEditable 设置或返回元素的内容。

element.isDefaultNamespace() 如果指定的 namespaceURI 是默认的，则返回 true，否则返回 false。

element.isEqualNode(<a>) 检查a元素是否与当前元素相等。

element.isSameNode(a) 检查指定元素是否就是当前元素.

element.isSupported() 如果元素支持指定特性，则返回 true。

element.lang 设置或返回元素的语言代码。

element.lastChild 返回元素的最后一个子元素。

element.namespaceURI 返回元素的 namespace URI。

element.nextSibling 返回当前元素之后的兄弟元素

element.nodeName 返回元素的名称。

element.nodeType 返回元素的节点类型。

element.nodeValue 设置或返回元素值。

element.normalize() 合并元素中相邻的文本节点，并移除空的文本节点。

element.offsetHeight 返回元素的高度。

element.offsetWidth 返回元素的宽度。

element.offsetLeft 返回元素的水平偏移位置。

element.offsetParent 返回元素的偏移容器。

element.offsetTop 返回元素的垂直偏移位置。

element.ownerDocument 返回元素的根元素（文档对象）。

element.parentNode 返回元素的父节点。

element.previousSibling 返回当前元素之前的兄弟元素

Element.remove(<class>) 从元素移除指定的类

element.removeAttribute() 从元素中移除指定属性。

element.removeAttributeNode() 移除指定的属性节点，并返回被移除的节点。

element.removeChild(a) 从元素中移除子节点。

element.replaceChild(a,b) 替换元素中的子节点。

element.scrollHeight 返回元素的整体高度。

element.scrollLeft 返回元素左边缘与视图之间的距离。

element.scrollTop 返回元素上边缘与视图之间的距离。

element.scrollWidth 返回元素的整体宽度。

element.setAttribute() 把指定属性设置或更改为指定值。

element.setAttributeNode() 设置或更改指定属性节点。

element.setIdAttribute()

element.setIdAttributeNode()

element.setUserData() 把对象关联到元素上的键。

element.style 设置或返回元素的 style 属性。

Element.toggle(<class>)如果类不存在就添加它存在就移除它

element.tabIndex 设置或返回元素的 tab 键控制次序。

element.tagName 返回元素的标签名。

element.textContent 设置或返回节点及其后代的文本内容。

element.title 设置或返回元素的 title 属性。

element.toString() 把元素转换为字符串。

nodelist.item() 返回 NodeList 中位于指定下标的节点。

nodelist.length 返回 NodeList 中的节点数。

contentWindow 属性如果文档里有iframe属性利用此属性可以返回iframe的内容

1490072898345358625.jpg 1490072918339853569.jpg 1490072931218635674.jpg

1490072941526335126.jpg 1490072950580851309.jpg

图片在窗口中滚动：

#tu{

position:absolute;

top:0;

left:0;

background-image:url(image/qiu.png);

width:171px;

height:170px;

}

</style>

var x=0;

var y=0;

var wayx=0;

var wayy=0;

function move1(){

var sp=7;

var w=document.documentElement.clientWidth;

var h=document.documentElement.clientHeight;

//判断是否走到了最右

if(x+sp+171>w){

wayx=1;

}

//判断是否走到了最左

if(x-sp<0){

wayx=0;

}

if(y+sp+170>h){

wayy=1;

}

if(y-sp<0){

wayy=0;

}

if(wayy==0)

y+=sp;

else

y-=sp;

if(wayx==0)

x+=sp;

else

x-=sp;

document.getElementById("tu").style.left=x+"px";

document.getElementById("tu").style.top=y+"px";

}

setInterval("move1()","30");

</script>

</head>

<body>

</div>

</body>

图片跟随：

#guang{

position:absolute;

background-image:url(290009.jpg);

width:817px;

height:508px;

top:80px;

left:50px;

}

#cha{

background-image:url(1490072898345358625.jpg);

width:200px;

height:88px;

float:right;

}

</style>

var top=80;

function gen(){

var h=document.documentElement.scrollTop;

document.getElementById("guang").style.top=h+80+"px";

//document.getElementById("msg").innerHTML=h;

}

function guan(){

document.getElementById("guang").style.display="none";

}

window.onscroll=gen;

</script>

</head>

<body>

</div>

</body>

事件监听方法单讲

element.addEventListener(event, function, useCapture)

参数描述

event 必须。字符串，指定事件名。

注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。

提示：所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。

function 必须。指定要事件触发时执行的函数。

当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。

useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

可能值:

true - 事件句柄在捕获阶段执行

false- false- 默认。事件句柄在冒泡阶段执行

5、Table 对象详解

5.1、Table 对象集合

集合描述

cells[] 返回包含表格中所有单元格的一个数组。

rows[] 返回包含表格中所有行的一个数组。

tBodies[] 返回包含表格中所有 tbody 的一个数组。

rows 集合返回表格中所有行（TableRow 对象）的一个数组，该集合包括 <thead>、<tfoot> 和 <tbody> 中定义的所有行

5.2、TableRow 对象

TableRow 对象代表一个 HTML 表格行。

在 HTML 文档中 <tr> 标签每出现一次，一个 TableRow 对象就会被创建。

cells 集合返回表格中所有 <td> 或 <th> 元素。

5.3、TableCell 对象

TableCell 对象代表一个 HTML 表格单元格。

在一个 HTML 文档中 <td> 标签每出现一次，一个 TableCell 对象就会被创建

5.4、Table 对象方法

方法描述

createCaption() 为表格创建一个 caption 元素。

createTFoot() 在表格中创建一个空的 tFoot 元素。

createTHead() 在表格中创建一个空的 tHead 元素。

deleteCaption() 从表格删除 caption 元素以及其内容。

deleteRow() 从表格删除一行。

deleteTFoot() 从表格删除 tFoot 元素及其内容。

deleteTHead() 从表格删除 tHead 元素及其内容。

insertRow() 在表格中插入一个新行。

从屌丝到架构师的飞越（JavaScript篇）-JavaScri

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读