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)

为了方便，因此编写一个window.onload处理函数 addLoadEvent()

function addLoadEvent(func) {
  var oldonload = window.onload;
  if(typeof window.onload != 'function'){
    window.onload = func;
  }else{
    window.onload = function () {
      oldonload();
      func();
    }
  }
}

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

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

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

显示"缩略词语表"，需要编写函数，我命名为displayAbbreviations():

function displayAbbreviations() {
  var abbreviations = document.getElementsByTagName('abbr');
  if(abbreviations.length<1){
    return false;
  }
  var defs = new Array();
  for(var i=0;i<abbreviations.length;i++){
    var current_abbr = abbreviations[i];

//由于IE旧版本不支持abbr元素，因此判断元素是否有abbr子节点，因为IE在统计abbr元素时会返回零
    if(current_abbr.childNodes.length<1){
      continue;
    }

var definition = current_abbr.getAttribute('title');
    var key = current_abbr.lastChild.nodeValue;
    defs[key] = definition;
    console.log(definition);
  }
  var dlist = document.createElement('dl');
  for(key in defs){
    var definition = defs[key];
    var dtitle = document.createElement('dt');
    var dtitle_text = document.createTextNode(key);
    dtitle.appendChild(dtitle_text);
    var ddesc = document.createElement('dd');
    var ddesc_text = document.createTextNode(definition);
    ddesc.appendChild(ddesc_text);
    dlist.appendChild(dtitle);
    dlist.appendChild(ddesc);
  }

//判断dl元素是否有子节点

if(dlist.childNodes.length<1){
    return false;
  }
  var header = document.createElement('h2');
  var header_text = document.createTextNode('Abbreviations');
  header.appendChild(header_text);
  document.body.appendChild(header);
  document.body.appendChild(dlist);
}

 学习利用DOM技术去读写CSS信息

首先，网页其实是由三层信息构成的一个共同体：即结构层（HTML标签），表示层（CSS样式），行为层（javascript）。

如何决定是使用纯粹的CSS还是利用DOM来设置样式，需要考虑以下因素：

1、这个问题最简单的解决方案是什么；

2、哪种方案会得到更多浏览器的支持。

 一般原则：如果想改变某个元素的呈现效果就选用CSS；如果想改变某个元素的行为就选用DOM；如果想根据某个元素的行为去改变它的呈现效果，请运用你的理智。

用javascript实现动画效果

时间函数setTimeout()函数能够让某个函数在结果一段预定的时间之后开始执行。它有两个参数，第一个参数为一个字符串，第二个参数是一个数值（以毫秒为单位）。在绝大多数时候，把这个函数调用赋值给一个变量将是个好主意：

variable = setTimeou('function',interval)

时间递增量，需要使用parseInt()函数，它可以把字符串里的数值信息提取出来，它将返回一个数值且为整数。如果要返回带小数点的数值需要使用parseFloat()函数。

CSS内容溢出问题 overflow属性可取值为：

visible：不裁剪溢出的内容，全部内容在浏览器中可见；

hidden：裁剪溢出的内容，只有部分内容可见；

scroll：会裁剪溢出的内容，但会显示滚动条显示其余内容；

auto：类似scroll，但如果内容没有溢出，不会显示滚动条。

javascript为我们准备了很多用来进行字符串比较的方法，indexOf()方法可以在一个字符串里寻找一个字串的位置：

string.indexOf(substring)

它返回的是子串substring在字符串string里第一次出现的位置。

关于javascript for...in语句

for...in 语句用于对数组或者对象的属性进行循环操作。

for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

Tip:for-in循环应该用在非数组对象的遍历上，使用for-in进行循环也被称为“枚举”。

使用split()方法可以将一个字符串拆分为两个或多个部分的常用方法：

array = string.split(character)

Form对象

每个Form对象都有一个elements.length属性，这个属性的值是包含在某给定form元素里的表单元素的总个数：

form.elements.length

elements.value 即表单元素的value属性包含该元素的当前值。

表单元素的defaultValue属性，它包含该表单元素的初始值。

 DOM方法和属性

创建新节点createElement()，该方法返回的是一个指向新元素节点的引用指针

var reference = document.createElement(element);

创建一个包含着给定文本的新文本节点createTextNode()，返回值是一个指向新建文本节点的引用指针

var reference = document.createTextNode()(element);

复制节点cloneNode()，返回值是一个指向新建克隆节点的引用指针

var reference = node.cloneNode(deep)

插入节点appendChild()，将给元素节点追加一个子节点

var reference = element.appendChild(newChild)

insertBefore()，将一个给定节点插入到一个给定元素节点的给定子节点前面，返回一个指向新增子节点的引用指针

var referebce = element.insertBefore(newNode,targetNode)

删除节点removeChild()，从一个给定元素里删除一个子节点

var reference = element.removeChild(node)

替换节点replaceChild()，将把一个给定父元素里的一个子节点替换为另外一个节点

var reference = element.replaceChild(newChild,oldChild)

设置属性节点setAttribute()，将为给定元素节点添加一个新的属性值或是改变它的现有属性的值

element.setAttribute(attributeName,attributeValue)

查找节点getAttribute()，将返回一个给定元素的一个给定属性节点的值

attributeValue = element.getAttribute(attributeName)

获取给定ID属性值的元素getElementById()

element = document.getElementById(ID)

获取有着给定标签名的所有元素getElmentsByTagName()

element = document.getElmentsByTagName(tagName)

hasChildNodes()方法可用来检查一个给定元素是否有子节点

booleanValue = element.hasChildNodes

DOM属性

节点属性

nodeName，返回一个字符串，内容是给定节点的名字

name = node.nodeName

nodeType，返回一个整数，代表给定节点的类型（元素节点、属性节点、文本节点）

integer = node.nodeType

nodeValue，返回给定节点的当前值，结果为字符串

value = node.nodeValue

遍历节点数

childNodes属性将返回一个数组，该数组由给定元素节点的子节点构成

nodeList = node.childNodes

firstChild属性将返回一个给定元素节点的第一个子节点

reference = node.firstChild

lastChild属性将返回一个给定元素节点的最后一个子节点

reference = node.laseChild

nextSibling属性将返回一个给定节点的下一个子节点

reference = node.nextSibling

parentNode属性将返回一个给定节点的父节点

reference = node.parentNode

previousSibling属性将返回一个给定节点的下一个子节点

reference = node.previousSibling

over