Dom编程艺术学习笔记4

Posted on | Edited on | In | | Views:

Ajax这个知识点还理解不透，暂时放下，等全本书过完之后，再来细究。时间稍微有点紧，进度没有预想中的那么快，毕竟上班期间总会有各种事情来打断，这是无法避免的。虽然要求慢一步、深一度！但是进度总体还是得跟上的。切记不要钻牛角尖！

Chapter8 充实文档的内容

不要滥用DOM。

  • 渐进增强(progressive enhancement)基于这种思想：总是从最核心的内容开始。根据内容使用标记实现良好的结构；然后再逐步加强这些内容。这些增强工作既可以是通过CSS改进呈现效果，也可以是通过DOM添加各种行为。如果使用DOM添加核心内容，那就太迟了，内容应该在刚开始编写文档时就要成为文档的组成部分。

  • 平稳退化。渐进增强的实现，必然支持平稳退化。即便缺乏必要的CSS和DOM支持，访问者仍然可以访问到核心内容。如果使用JS来添加核心内容，那就肯定是不支持平稳退化的。

  • for (variable in array)可以利用一个for/in循环把某个数组的键临时赋值给一个变量。

  • 如果没有百分百的把握，就一定要去检查nodeType属性值。很多DOM方法只能用于元素节点，如果用到文本节点就会出错。
  • 如果把通配符”*”作为参数传递给getElementsByTagName方法，它就会把所有的元素，不管是标签名是什么，一一返回给我们。
  • 本节涉及到的函数的过程相似：从创建一个特定元素构成的节点集合开始，用一个循环遍历这个节点集合并在每次循环里创建出一些标记，最后把新创建的标记插入到文档里。

文档检索，使用下列方法

  • getElementById
  • getElementsByTagName
  • getAttribute

添加信息到文档中去，使用下列方法

  • createElement
  • createTextNode
  • appendChild
  • insertBefore
  • setAttribute

update 2015-12-21

Chapter9 CSS-DOM

利用DOM技术去获取和设置CSS信息

  • 我们看到的网页其实是由结构层(HTML/XHTML)、表现层(CSS)、行为层(JS&DOM)这三层信息组成的。

  • CSS可以通过:hover和:focus之类的伪类根据用户触发事件改变元素的呈现效果。DOM也可以修改Style属性修改样式设定。

  • 告诉我们元素在节点树上的位置信息：parentNode、nextSibling、previousSibling、childNodes、firstChild和lastChild等属性告诉了我们文档中个节点之间的关系信息。

获取style属性

  • element.style.property
  • element.style.color
  • 减号和加号之类的操作符是保留字符，不允许用在函数货变量的名字里。
  • 需要引用一个中间带减号的CSS属性时，DOM要求你用驼峰命名法。font-family -> element.style.fontFamily

内嵌样式

  • 通过style属性获取样式有很大的局限性——style属性只能返回内嵌样式。表现信息与结构混杂在一起。
  • DOM style属性不能用来检索在外部CSS文件里声明的样式。即外部样式表里声明的样式不会进入style对象。

设置样式

  • 使用赋值操作更新样式：element.sytle.property = value
  • style对象的属性值必须放在引号里，单引号或双引号均可。如果忘记引号，JS会把等号右边的值解释为一个变量。
  • 不应利用DOM为文档设置重要的样式。不过在使用CSS不方便的场合，还是可以利用DOM对文档的样式做一些小的增强。
  • 采用纯粹的CSS还是利用DOM来设置样式，需要考虑下面两点：
    • 这个问题最简单的解决方案是什么；
    • 那种解决方案会得到跟股东浏览器的支持。
  • 想要改变某个元素的呈现效果，使用CSS；想要改变某个元素的行为，使用DOM；如果想要根据某个元素的行为去改变它的呈现效果，需要具体情况作判断，自己做取舍，没有标准答案。

利用className设置class属性

  • 有个简单的法子：与其使用DOM直接改变某个元素的样式，不如通过JS更新这个元素的class属性。在引用的外部样式表中添加对应class的属性。
1
2
3
4
.info {
    font-weight: bold;
    font-size: 1.2em;
}

elem.setAttribute("class","intro")

className属性是一个可读／可写的属性，凡是元素节点都有这个属性。

用className属性和操作符设置一个元素的class属性：element.className = value。

  • 叠加两种样式:elem.className += " intro";

  • 需要给一个元素追加新的class时：

    • 检查className属性的值是否为null
    • 如果是，把新的class设置值直接赋值给className属性；
    • 如果不是，把一个空格和新的class设置值追加到className属性上。
      据此封装成一个函数addClass。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      function addClass(elem,value) {
          if (!elem.className) {
              elem.className = value;
          } else {
              newClassName = elem.className;
              newClassName+= " ";
              newClassName+= value;
              elem.className = newClassName;
          }
      }

函数抽象

  • 对函数进行抽象(abstraction):把具体的值转化为函数的参数，就可以让它成为一个更加通用的函数。
  • 无论何时发现可疑对某个函数进行抽象，都应该马上去做！
坚持原创技术分享，您的支持将鼓励我继续创作！