JavaScript高级程序设计学习笔记(9)

最新推荐文章于 2024-05-23 23:33:04 发布

dust and galaxy

最新推荐文章于 2024-05-23 23:33:04 发布

阅读量151

点赞数

分类专栏：看书笔记文章标签：前端 JavaScript

本文链接：https://blog.csdn.net/yiyiyiburuxin/article/details/88825085

版权

看书笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JavaScript高级程序设计学习笔记

1.对JavaScript实现各个组成部分的详尽解读
2.对JavaScript面向对象编程的全方位阐述
3.DOM，BOM及浏览器事件模型的透彻剖析
4.Web应用基本数据格式JSON，XML及存取
5.Ajax，Comet服务器端通信和基于File API的拖放式文件上传
6.ECMAScript 5定义的最核心语言特性
7.HTML 5涵盖的表单，媒体，Canvas（包括WebGL）
8.Selectors、Web Workers、地理定位及跨文档传递消息等最新API
9.离线应用及客户端存储（包括IndexedDB）
10.维护、性能、部署相关的最佳开发实践
11.新兴API及ECMAScript Harmony展望

DOM，BOM及浏览器事件模型的透彻剖析

客户端检测

由于浏览器存在不一致性的问题，开发人员要么采取迁就各方的“最小公分母”策略，要么（常见）就得利用各种客户端检测的方法，来突破或者规避种种局限性。

1.能力检测（☆）
     能力检测（特性检测）的目标不是识别特定的浏览器，而是识别浏览器的能力，就可以给出解决方案。能力测试基本方案：
在这里插入图片描述
     更可靠的能力检测：

2.怪癖检测（☆）
     怪癖监测目标：浏览器的特殊行为，但是怪癖监测可以知道浏览器存在什么缺陷

var hasDontEnumQuirk =function () {
    var o={toString:function () {}};
    for (var prop in o){
        if (prop=="toString"){
            return false;
        }
    }
    return true;
}();
alert(hasDontEnumQuirk);

3.用户代理检测（☆）
用户代理检测：用户通过检测用户代理字符串来确定实际使用的浏览器。每一次HTTP请求过程中，用户代理字符串作为响应首部发送，而且该字符串可以通过JavaScript的navigator.userAgent属性访问。

IE浏览器呈现引擎：Trident
Firefox浏览器呈现引擎：Gecko
Chrome浏览器呈现引擎：Webkit

DOM

     DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化节点树，允许开发人员添加、移除和修改页面的某一部分。
1.节点层次（★★★）
     节点分为几种不同类型，每种类型分别表示文档种不同信息及标记。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。所有页面标记则表现为一个以特定节点为根节点的树形结构：
在这里插入图片描述
Node类型
     DOM1级定义了一个Node接口，该接口将由所有节点类型实现。JavaScript中所有节点类型都是继承Node类型，因此所有节点类型都共享着相同的基本属性和方法。

nodeName保存的是元素的标签名
nodeValue的值始终是null

1）节点关系
可以将节点间的关系比做成家族树。例如：<html>是<body>的父元素；<body>是<html>的子元素；<head>是<body>的同胞元素。
每个节点都有一个childNodes属性，其中保存着一个NodeList对象，可以通过位置来访问这些节点。

var firstChild=someNodee.childNodes[0];
var secondChild=someNodee.childNodes.item(1);
var count=someNodee.childNodes.length;

可以利用Array.prototype.slice()方法将其转化为数组
可以利用previousSibling和nextSilbling属性，访问列表中的其他同胞节点。列表中的第一个节点的previousSlibling属性为null，列表中的最后一个节点的nextSibling属性的值同样也为null
父节点与其第一个和最后一个子节点之间也存在特殊关系。父节点的firstChild和lastChild属性分别指向childNodes列表中第一个和最后一个节点。
someNode.firstChild=someNode.childNodes[0]
someNode.lastChild=someNode.childNode[someNode.childNode.length-1]
hasChildNodes()方法：这个方法在节点包含一个或者多个子节点的情况下返回true
ownerDocument属性：该属性指向整个文档节点

2）操作节点

appendChild()方法：向childNodes列表的末尾添加一个节点。
var returnedNode = someNode.appendChild(newNode);
insertBefore()方法：将节点放到childNdes列表的某个特定的位置上。接受两个参数：要插入的节点和作为参照的节点。
var returnedNode = someNode.insertBefore(newNode,someNode.firstChild);
replaceChild()方法：替换某个节点。介绍两个参数：插入的节点和要替换的节点
var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);
cloneNode()方法：用于创建调用这个方法的节点的一个完全相同的副本。但是新的副本没有父节点，必须通过以上的方法，进行添加到文档。

Document类型
JavaScript通过Document类型表示文档。在浏览器中，document对象是HTMLDocument（继承自Document类型）的一个实例，表示整个HTML页面。

通过documentElement属性访问HTML页面的<html>元素。
var html =document.documentElement;//取得对<html>的引用
注意：documentElement、firstChild和childNodes[0]的值相同
通过document.body访问HTML页面的<body>元素。
var body =document.body;//取得对<body>的引用
var originalTitle=document.title;//取得文档标题
document.title="New page title";//设置文档标题
var url=document.URL;//取得完整的URL
var domain=document.domain;//取得完整的域名
元素引用： getElementById()方法，接受一个参数：要取得元素的ID。找到返回该元素，否则返回null。
var images=document.getELementById（“myId”）；getElementsByTagName()方法接受一个参数：取得元素的标签名。
var images=document.getELementByTagName（“myname”）；namedItem()方法通过元素的name特性取得集合中的项
var images=images.namedItem（“myimagename”）
可以在getElementsByTagName()传入“*”表示全部，表示为：
var images=images.namedItem（“*”）
只有HTMLDocument类型才有的方法，是getELementsByName()。这个方法是返回name特性的所有元素。一般是取得单选按钮。
-
ID一般不同用于分别更单选按钮，而name特性都是color，利用document.getElementsByName(“color”)可以获取所有的单选按钮。
特殊集合：
1）document.anchors，包含文档中所有name特性的<a>元素
2）document.forms，包含文档中所有<form>元素
3）document.images，包含文档中所有<img>元素
4）document.links，包含文档中所有带href特性的<a>元素

1）Dom的一致性监测
由于DOM分为多个级别，也包含多个部分，因此监测浏览器实现DOM的哪些部分就十分必要。document.implementation属性就是为提供相应信息和功能的对象。利用hasFeature（）方法监测，有两个参数：要检测的DOM功能的名称及版本号。如果实现，则返回true。

var hasXmlDom=document.implementation.hasFeature("XML","1.0");

2）文档写入
document对象功能：将输出流写入到网页的功能。
1）write()会原样写入，可以写入HTML代码

<body>
<p>the time is:</p>
<script>
document.write("<strong>"+new Date().toString()+"</strong>");
</script>
</body>

2）writeIn()会在字符串末尾添加一个换行符（/n）
3）open()
4）close()

Element类型
Element类型用于表现XML或HTML元素，提供对元素签名、子节点及特性的访问。Element节点具有以下特征：

nodeType的值为1
nodeName的值为元素的标签名
nodeValue的值为null
parentNode可能是Document或者是Element
要访问元素标签名，可以使用nodeName属性和tagName属性

1）HTML元素：所有的HTML元素都由HTMLElement类型的子类型表示或者修改。属性：
id，元素在文档中唯一标识符
title，有关元素附加说明信息
lang，元素内容的语言代码，很少使用
dir，语言的方向（“ltr”或者“rtl”）
className，与元素的class特性对应

2）取得特性

getAttribute()针对任何特性都可以使用，得到属性。alert(document.getElementById("myDiv").getAttribute("id"));//myDiv有两类特殊属性：第一类特性是style，用于通过css为元素指定样式。返回的是一个对象。第二类是onclick这样的事件处理返回的是一个JavaScript函数。
setAttribute()设置特性。两个参数：要设置的特性名和值。div.setAttribute("id","someOtherId");设置的特性名会转化为小写形式。
removeAttribute()删除元素特性div.removeAttribute("class");不仅会清除特性的值，而且会从元素中完全删除特性。

3）attributes属性
Element类型是使用attributes属性唯一一个DOM节点类型。attributes属性包含一个NamedNodeMap，类似于NodeList，包含下列方法：

getNamedItem（name）：返回nodeName属性等于name的节点
removeNamedItem（name）：从列表中移除nodeName属性等于name的节点
== setNamedItem（node）==：向列表添加节点，以节点的nodeName属性为索引

var id=element.attributes["id"].nodeValue;

4）创建元素
使用document.createElement()方法可以创建新元素。例如：var div=document.createELment("div id=\"myDiv\" class=\"box\"></div>");
5）元素子节点
元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。

<ul id="mylist">
     <li>item1</li>
     <li>item2</li>
</ul>

IE解析代码的话，

元素会有3个子节点，分别是3个
元素。但是对于其他的浏览器
- 会有7个元素，包括3个
- 元素和4个文本节点（表示
- 元素之间的空白符）如果改为下面的代码：

<ul id="mylist"><li>item1</li><li>item2</li></ul>

则此时返回同样数目的子节点数。
如果想通过某个特定的标签名取得子节点或者后代节点，可以使用getElementByTagName()的方法。例如：

var ul =document.getElementById("myList");
var items=ul.getElementsByTagName("li");

Text类型
可以通过nodeValue属性或者data属性访问Text节点包含的文本，两个属性包含的值相同。

appendData(text):将text添加到节点的末尾
deleteData（offset，count）：从offset指定的位置开始删除count字符
insertData（offset，count）：在offset指定的位置插入text
replaceData（offset，count，text）：用text替换从offset指定的位置开始到offset+count为止的文本
splitText（offset）：从offset指定的位置将当前文本节点分成两个文本节点
substringData(offset,count)：提取从offset指定的位置开始到offset+count为止的字符串

1)创建文本节点
     可以使用document.creatTextNode()创建新的文本节点，但是必须将新节点添加到文档树中间，否则无法再浏览器窗口看到新节点。
注意appendChilid

2）规范化文本节点
     DOM文档存在相邻同胞节点会导致混乱。所以催生出能够将相邻文本节点合并的方法：normalize()。用法如下：

3）分割文本节点
     与normalize()相反：splitText()，会将一个节点分割成为两个节点。
Comment类型
     Comment类型与Text类型相似，拥有除splitText ()之外所有字符串操作方法
CDATASection类型
     继承自Text类型，因此拥有除spiltText（）之外所有字符串的操作方法
DocumentFragment类型
     只有DocumentFragment在文档中没有对应标记。虽然不能把文档片段直接添加到文档节点中，但是可以将它作为一个“仓库”来使用，即可以在里面保存将来可能会添加到文档中的节点。创建文档片段，用法：var fragment=document.createDocumentFragment();但是新的节点仍不属于文档树，需要通过appendChild()或者insertBefore()将节点添加到文档中。
Attr类型
     Attr对象有3个属性：name、value和specified。其中，name是特性名称（与nodeName的值相同），value是特性的值（与nodeValue的值相同），而specified是一个布尔值，用区别的特性是在代码中指定的，还是默认的。
     可以创建新的节点并且传入特性

2.DOM扩展（★★）
呈现模式
     IE6开始区分标准模式和混杂模式，所以就要开始确定浏览器处于何种模式需求。可以利用compatMode属性进行区别。各种模式介绍
标准模式：document.compatMode=Css1Compat
混杂模式：document.compatMode=BackCompat
对于IE8来说：
document.documentMode=5[混合模式]
document.documentMode=7[IE7的仿真模式]
document.documentMode=9[IE8的标准模式]
滚动
scroIlIntoView(alignWithTop)滚动浏览器窗口或者容器元素【确保可见】
children属性
contains()方法
     contains（）监测给定节点是否是另一个节点的后代。例如：alert（document.documentElement.contains(document.body)）//trueFirefox则是利用compareDocumentPositon()根据不同掩码确定节点关系（1：无关系；2：居前；4：居后；8：包含；16：被包含）
操作内容
innerText属性：显示标签内的文字。并且使用innerText可以设置标签内的内容，只会生成当前节点的一个子文本节点确保生成一个子文本节点。
innerHTML属性：会返回当前元素所有子节点HTML表现，包括元素、注释及文本节点
outerText属性：读取信息时，效果与innerText属性效果相同；在写入信息时，outerText会替换整个元素包括子元素。
outerHTML属性：读取信息时，会返回调用元素的HTML代码；在写入信息时，会解析给定的HTML字符串。

dust and galaxy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级程序设计学习笔记(9)

JavaScript高级程序设计学习笔记1.对JavaScript实现各个组成部分的详尽解读2.对JavaScript面向对象编程的全方位阐述3.DOM，BOM及浏览器事件模型的透彻剖析4.Web应用基本数据格式JSON，XML及存取5.Ajax，Comet服务器端通信和基于File API的拖放式文件上传6.ECMAScript 5定义的最核心语言特性7.HTML 5涵盖的表单，媒...
复制链接

扫一扫