《JavaScript高级语言设计》(第三版)学习笔记(4)
来源:互联网 发布:平面设计作图软件 编辑:程序博客网 时间:2024/06/06 00:38
BOM对象和DOM对象
BOM
window对象
BOM的核心对象是window,他表示浏览器的一个实例
他即使通过js访问浏览器的一个窗口又是ESCMAScript规定的Global对象语句添加的window
全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以
使用var语句添加的window属性有一个名为[[Configurable]]的特性,这个特性值被设置为false
窗口及框架关系
如果页面中包含框架,则每个框架都有自己的window对象,并且保存在frames集合中。在frames集合中,可以通过数值索引,从0开始,从左到右,从上到下,或者框架名称来访问相对应的window对象。每个window对象都有name属性,其中包含框架的名称
top:始终指向最外层的框架,使用它可以确保正确的访问另一个框架
parent:始终指向当前框架的直接上层框架
self:始终指向window
注意:在使用框架的情况下,浏览器会存在多个Global对象。在每个框架中定义的全局变量会自动生成为框架中window对象的属性。由于window对象都包含原生类型的构造函数,因此每个框架都会有一套自己的构造函数,这些构造函数一一对应,但并不相等
窗口位置
注意虽然opera都实现了属性但属性并不对应
//通用代码var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
注意:无法再夸浏览器的条件下后去窗口左边和上边的精确坐标值
在IE Opera中sreenLeft和screenTop中保存的是屏幕左边和上边到window对象表示的页面可视区域的距离
在Chrome Firefox 和Safari中,screenY和screenTop中保存的是整个浏览器窗口相对于坐标的值
问题:Firefox Safari Chrome 始终返回页面中每个框架的top.screenX和top.screenY的值,即使页面发生偏移,而IE和Opera则返回精确值
使用moveTo和moveBy可能将窗口精确的移动到一个新的位置。接受两个参数moveTo接受新位置的x和y值而moveby接受移动像素数
在Opera和IE7+中禁用,此方法不使用框架只对最外层的window对象使用
窗口大小
//兼容模式下获得可窗口大小var pageWidth = window.innerWidth, pageHeigt = window.innerHeight;if (typeof pageWidth != "number"){ if(document.cpmpatMode == "CSS1Compat"){ pageWidth = document.docuemntElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; }}
Opera和IE7+中禁用
导航和打开窗口
间接调用和超时调用
系统对话框
location对象
提供与当前窗口中加载的文档相关的信息,还提供导航功能
即是window对象的属性也是document对象的属性
//解析URl,将查询变为对象数组function getQueryStringArgs(){ var qs = (location.search.length > 0 ? location.search.substring(1) : ""), args = {}, items = qs.length ? qs.split("&") : [], item = null, name = null, value = null, i = 0, len = items.length; for(i = 0; i < len; i++){ item = items[i].split("="); name = decodeURLComponent(item[0]); value = decodeURLComponent(item[1]); if(name.length){ args[name] = value; } } return args;}
navigator
识别客户端的事实标准
检测插件
//检测所有浏览器中的Flashfunction hasFlash(){ var result = hasPlugin("Flash"); if(!result){ result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash"); } return result; }//检测所有浏览器中的QuickTimefunction hasQuickTime(){ var result = hasPlugin("QuickTime"); if(!result){ result = hasIEPlugin("QuickTime.QuickTime"); } return result; }function hasIePlugin(name){ try{ new ActiveXObject(name); return true; }catch(e){ return false; }}function hasPlugin(name){ name = name.toLowerCase(); for(var i = 0; i< navigator.plugins.length; i++){ if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){ return true; } }}
screen
用处不大
history
保存着用户上网的浏览记录
history是window的属性
|方法|含义|
|go()|history.go(-1)后退一页,history.go(1)前进一页,history.go(2)前进两页,history.go(“XXX.com”)跳转至最近的XXX.com页面|
|back()|后退|
|forward()|前进|
|length属性|保存历史记录的数量|
DOM
DOM将HTML或XML描述成一个由多层节点构成的结构,节点分为几种不同的类型,每种类型分别表示文档中不同的信息以及标记
Node类型
DOM1定义了Node接口,该接口有所有节点实现
if(someNode.nodeType == 1){
|
alert("Node is an element.")
}
|nodeName和nodeValue|如果节点为元素则nodeName为元素的标签名,nodeValue为null|
|childrenNodes属性|其中保存着一个NodeList对象,保存是一个类数组对象,保存一组有序的节点,该对象基于html文本变化|
|parentNode属性|指向文档树中的父节点|
|previousSibling|同级上个节点|
|nextSibling|同级下个节点|
|firstChildren|第一个子节点|
|lastChildren|最后一个子节点|
|ownerDocument|代表整个文档的文档节点|
|appendChildren()|向childrenNodes列表的末尾添加一个节点,返回新增的节点|
|insertBefore()|接受两个参数,要插入的节点和作为参照的节点|
|replaceChild()|接受两个参数,要插入的节点和要替换的节点|
|cloneNode()|创建调用这个方法的节点的一个完全相同的副本,接受一个布尔参数,表示是否执行深度复制|
Document类型
表示文档,在浏览器中document对象是HTMLDocument(继承自Document类型)的一个实例,表示整个HTML页面
Element
表现XML和HTML
HTMLElement
继承Element添加属性
HTML元素都是HTMLElement的具体子类表示的
创建元素
document.createElement(“元素标签名或完整元素标签”);返回元素对象
Text
包含可以照字面解释的纯文本内容
document.createTextNode(“字符串”);根据字符串创建text对象
元素对象.normalize()合并该元素下的文本节点
元素对象.splitText(number)按number为止分割文本节点
Comment
注释
与text继承相同的基类
CDATASection
只针对XMl文档表示CDATA区
DocumentType
包含doctype信息保存在document.doctype对象中
DocumentFragment
DOM规定文档片段是一种轻量级的文档,可包含控制节点
document.createDocumentFragment();
临时文档片段,可以将需添加的元素先添加到该对象中,然后将该对象添加给document,直接添加给docuemt,降低性能。
Attr
表示元素的特性
document.createAttribute()
element.setAttributeNode(attr)
DOM操作
动态脚本
使用DOM创建script元素添加到document中
var script = document.createElement("script");script.type = "text/javascript";script.src = "client.js";//当不引用外部文档时script.appendChild(cocument.createTextNode("function sayHi(){alert('hi')}"));//ie中出错script.text = "function sayHi(){alert('hi')}";doucment.body.appendChild(script);
动态样式
var style = document.createElement("style");style.style = "text/css";try{ style.appendChildren(document.createTextNode("body{background-color:red}"));}catch(e){ style.styleSheet.cssText = "body{background-color:red}";}var head = document.getElementByTagName("head")[0];head.appednChildren(style);
操作表格
var table = document.createElement("table");table.border = 1;table.width = "100%";var tbody = document.createElement("tbody");table.appendChildren(tbody);var row1 = document.createElement("tr");tbody.appendChildren(row1);var cell_1 = document.createElement("td");cell_1.appendCHildren(document.createTextNode("Cell 1,1"));row1.appednChildren(cell_1);
table元素属性和方法
tbody属性和方法
tr属性和方法
//客户端检测,DOM一致性检测
- 《JavaScript高级语言设计》(第三版)学习笔记(4)
- 《JavaScript高级语言设计》(第三版)学习笔记(1)
- 《JavaScript高级语言设计》(第三版)学习笔记(2)
- 《JavaScript高级语言设计》(第三版)学习笔记(3)
- 《JavaScript高级语言设计》(第三版)学习笔记(5)
- 《JavaScript高级语言设计》(第三版)学习笔记(6)
- 《JavaScript高级语言设计》(第三版)学习笔记(7)
- 《JavaScript高级语言设计》(第三版)学习笔记(8)
- JavaScript高级程序设计(第三版)学习笔记(1)
- JavaScript高级程序设计(第三版)学习笔记(2)
- 《JavaScript高级程序设计 第三版》学习笔记 (十三)高级函数
- 《JavaScript高级程序设计 第三版》学习笔记 (十三)高级函数
- 《JavaScript高级程序设计 第三版》学习笔记 (十三)高级函数
- JavaScript 高级程序设计——第三章基本概念 学习笔记
- javascript高级程序设计学习笔记——第三章 基本概念
- 《JavaScript高级程序设计》学习笔记(第三章)
- javascript高级程序设计第三版 第4章 基本类型和引用类型的值 学习笔记
- SQL SERVER设计与高级查询 第三章 学习笔记
- Android Init进程源码分析
- hdu 4027 Can you answer these queries?(线段树——区间更新)(思路)
- ORACLE错误编码大全
- linux 非交互式实现分区的几种方法
- ImportError: No module named shutil_get_terminal_size
- 《JavaScript高级语言设计》(第三版)学习笔记(4)
- 【Android】简便地设置监听器
- NYOJ—skiing【记忆化搜索】
- GitHub入门与实践(四)——Git的基本操作从初始化仓库到确认提交是否成功
- cqoi 2017 T1
- AngularJS教程 AngularJS从0到1——AngularJS模块
- Fresco
- Python多进程编程
- Poj 2378 Tree Cutting(树形dp)