《JavaScript DOM 编程艺术 》 笔记

一：这本书由几个案列带入知识点，通俗易懂。最大的收获莫过于作者多次提到的逐渐增强和平稳退化。

"渐进增强"指的是给所用用户同等的基本使用体验，再根据用户终端的级别给予更高级的用户更为高效轻松的用户体验。"平稳退化"同样是给所有用户同等的一个基准，但其方向却是与渐进增强相反，此方法是剥夺低级用户的一些体验。

二：解决部分浏览器不兼容html5、css3 的问题

使用modernizr解决

https://modernizr.com/download?setclasses

三：方法

加载函数，复杂的代码用此方法更加方便

//加载函数的方法，如addLoadEvent(functionName),等同于window.onload
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function loadEvents() {
  // home
  prepareSlideshow();
  // about
  prepareInternalnav();
  // photos
  preparePlaceholder();
  prepareGallery();
  // live
  stripeTables();
  highlightRows();
  displayAbbreviations();
  // contact
  focusLabels();
  prepareForms();
}

// Load events
addLoadEvent(highlightPage);
addLoadEvent(loadEvents);

h5中不存在insertAfter()方法

//在某个元素节点前插入
function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

追加class

//追加class 的方法
function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}

通过className获取元素

function getElementByClassName(node, classname) {
    if (node.getElementByClassName) {
        // 使用现有方法
        return node.getElementByClassName(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];
            }
        }
    }
}