《JavaScript DOM 编程艺术2》 笔记摘抄

        

2017-02-23

《JavaScript DOM 编程艺术2》 笔记摘抄


DOM操作有两项原则,分别是渐进增强(progressive enhancement)平稳退化这样更符合html+css+javascript的三者分离标准。

  • 渐进增强(progressive enhancement)

渐进增强原则基于这样一种思想:你应该总是从最核心的部分,也就是从内容开始。 应该根据内容使用标记良好的结构;然后再逐步加强这些内容。 这些增强工作既可以是通过CSS改进呈现效果,也可以是通过DOM添加各种行为。

  • 平稳退化

网站访问者完全有可能使用不支持JavaScript的浏览器,或者禁用了它,如果没有考虑这个问题,就会遇到很多问题,为了让这种情况下也能顺利的浏览这个网页,就要做到平稳退化,就是说,虽然某些功能无法使用,但最基本的操作仍然能完成。渐进增强的实现必然支持平稳退化。 如果你按照渐进增强的原则去充实内容,你为内容添加的样式和行为就自然支持平稳退化。


  • 三者分离

使用(X)HTML去搭建文档的结构(html负责结构层)
使用CSS去设置文档的呈现效果(css负责表现层)
使用DOM脚本去实现文档的行为(javascript负责行为层)


  • 可用函数调用

 getElementsByClassName(node,classname) —— 兼容老浏览器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function getElementsByClassName(node,classname) {
if(node.getElementsByClassName) {
//使用现有方法
return node.getElementsByClassName(classname);
}
else{
var results = new Array();
var elems = node.getElementsByTagName("*");
for(var i=0;i < elems.length;i++){
if(elems[i].className.indexOf(classname) != -1) {
results[results.length] = elems[i];
}
}
return results;
}
}

  getNextElement() —— 获取下一个元素节点   

1
2
3
4
5
6
7
8
9
function getNextElement(node) {
if(node.nodeType == 1) {
return node;
}
if(node.nextSibling) {
return getNextElement(node.nextSibling);
}
return null;
}

  addLoadEvent() —— 共享onload事件   

1
2
3
4
5
6
7
8
9
10
11
12
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function(){
oldonload();
func();
}
}
}

  insertAfter() —— 在某元素后插入新元素   

1
2
3
4
5
6
7
8
9
10
11
12
//DOM已提供,在某元素之前插入新元素
insertBefore(newElement,targetElement)
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode();
if(parent.lastChild == targetElement){
parent.appendChild(newElement);
}
else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}

  addClass() —— 添加新的className   

1
2
3
4
5
6
7
8
9
10
11
12
13
function addClass(element,value) {
//判断className属性是否为空
if(!element.className) {
element.className = value;
}
else {
//若不为空,把空格和新的class设置值追加到className属性上去
newClassName = element.className;
newClassName += " ";
newClassName += value;
element.className = newClassName;
}
}

  moveElement() —— 基于CSS属性的动画   

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
function moveElement(elementID,final_x,final_y,interval) {
//添加安全检查,检测是否支持getElementById
if(!document.getElementById) return false;
//添加安全检查,检测是否有elementId
if(!document.getElementById(elementId)) return false;
var elem = document.getElementById(elementID);
if(elem.movement) {
clearTimeout(elem.movement);
}
//添加安全检查,检测elementId是否有left/top属性
if(!elem.style.left) {
elem.style.left = 0 + "px";
}
if(!elem.style.top) {
elem.style.top = 0 + "px";
}
var xpos = parseInt(elem.style.left);
var ypos = paresInt(elem.style.top);
var dist = 0;
if(xpos == final_x && ypos == final_y){
return true;
}
if(xpos < final_x) {
dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if(xpos > final_x) {
dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if(ypos < final_y) {
dist = Math.ceil((final_y - xpos)/10);
ypos = ypos + dist;
}
if(ypos > final_y) {
dist = Math.ceil((xpos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}