javascript学习 真正理解DOM脚本编程技术背后的思路和原则

本文学习来源于《javascriptDOM编程艺术》仅供参考

学会怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页。

循序渐进：从最核心的内容开始，逐步添加额外的功能。

预留退路：为内容添加的样式和行为要留有足够的退路，以保证用户能访问到核心内容。

以用户为中心的设计：

DHTML（动态HTML）：是dynamic HTML 的简称。它不是一项单一的新技术，而是HTML、CSS、javascript这三种技术相结合的产物。现在的DHTML已经成为了一种简单、易用的标准化技术。含义：

1、利用HTML把网页 标记为各种元素；

2、利用CSS设计 各有关元素的排版样式 并确定它们在窗口中的显示位置；

3、利用javascript 实时操控和改变各有关样式。

但把这些东西真正凝聚在一起的是DOM。

什么是DOM：DOM是“document object model（文档对象模型）”的缩写。简单的说，DOM就是一套对文档的内容进行抽象和概念化的方法。DOM是一种API（应用编程接口），简单地说，API就是一组已经得到有关各方共同认可的基本约定。在现实世界中，例如：

1、摩尔斯码

2、国际时区

3、化学元素周期表

在编程领域中，虽然语言有多种不同，但很多任务确实相同或相似的，这正是需要API的原因，一旦掌握了某个标准，就可以应用在不同环境中，虽然有关语法会有所变化，但这些约定总是保持不变的。

W3C推出的标准化DOM可以让任何一种程序设计语言对 使用任何一种标记语言编写出来的任何一份文档 进行操控。定义是：“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改”。

对象（object）是一种非常重要的数据类型，对象是自我包含的数据集合，对象里的数据可以通过两种形式 属性（property）和方法（method）访问。

1、属性是隶属于某个特定对象的遍历；

2、方法是只有某个特定对象才能调用的函数。

对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体。

在javascript脚本里，属性和方法都需要使用 . “点”语法来访问，而为给定对象创建一个新实例需要使用new关键字。

对象、属性、方法和实例等概念都比较抽象，所以我们可以利用javascript语言来创建自己的对象——术语称之为用户定义对象。

节点（Node），文档也是有节点构成的集合。

getElementById（）方法将返回一个与有着给定id属性值的元素节点相对应的 对象，返回的是一个对象。

getElementsByTagName（）方法将返回一个 对象数组

getAttribute（）方法是一个函数，只有一个参数——要查询的属性的名字。但它不能通过document对象调用，只能通过一个元素节点对象调用，例：查询每个p元素的title属性

var par = document.getElementsByTagName('p');

for(var i=0;i<par.length;i++){

　　alert(par[i].getAttribute('title'));

}

setAttribute（）方法也是只能通过元素节点对象调用的函数，但需要向它传递两个参数：

object.setAttribute(attribute,value);

DOM还提供了许多其他的属性和方法，如nodeName、nodeValue、chileNodes、nextSibling和parentNode等。

对javascript函数进行功能扩展

childNodes属性让我们可以从给定文档的节点树里把任何一个元素的所有子元素检索出来。返回一个数组，包含给定元素节点的全体子元素。

nodeValue属性，用途是检索（和设置）节点的值。

firstChild属性，访问childNodes[]数组的第一个元素。

lastChild属性，访问childNodes[]数组的最后一个元素。

javascript编程原则和良好习惯

预留退路：确保网页在没有javascript的情况下也能正常工作。

javascript使用window对象的open()方法来创建新的浏览器窗口，该方法有三个参数

window.open(url,name,features);

三个参数都是可选的，第一个是URL地址，第二个是新窗口名字，第三个是新窗口的各种属性（原则上要求浏览功能要少而精）。

"javascript:"伪协议，例：

<a href="javascript:popUP('jsstudy.html')">window open</a>

但在不支持或禁用了Javascript功能的浏览器里将无法使用。

当不确定浏览器是否支持DOM时，需要进行对象检测。

分离javascript：把网页的结构和内容与javascript脚本的动作行为分开。

结构与行为的相互分离程度越大越好。

向后兼容性:确保老版本的浏览器不会因为你的javascript脚本而死机。

动态创建HTML内容：document.write()方法和innerHTML属性。

深入剖析DOM方法：createElement()、createTextNode()、appendChild()、insertBefore()。

学习通过创建新元素和修改现有元素而改变网页结构的DOM方法。

创建节点createElement()语法：

document.createElement(nodeName)

插入节点appendChild()语法：

parent.appendChild(child)

创建文本节点createTextNode()语法：

document.createTextNode(text)

将一个新元素插入到一个现有元素的前面insertBefore()语法：

parentElement.insertBefore(newElement,targetElement)

将一个新元素插入到一个现有元素的后面需要编写insertAfter()函数：

function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if(parent.lastChild == targetElement){
    parent.appendChild(newElement);
  }else{
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

<abbr>标签的含义是"缩略语"，是对单词或短语的简写形式的统称，<acronym>标签的含义是"字头缩写词"，特指单词形式的缩略语。

 

 

 

 

 

 

 

 

 

 

over