编程助手JavaScript学习库-DOM笔记

声明：本文内容来源于编程助手APP的JavaScript学习库

• DOM可以理解成文档（HTML文档、XML文档和SVG文档）的编程接口。

• 将新节点插在当前节点的最前面（即变成第一个子节点），可以使用当前节点的firstChild属性。

parentElement.insertBefore(newElement, parentElement.firstChild);

• clientWidth属性，clientHeight属性，这两个属性返回视口（viewport）的大小，单位为像素。所谓“视口”，是指用户当前能够看见的那部分网页的大小。

• offsetWidth属性，offsetHeight属性，这两个属性返回html元素的宽度和高度，即网页的总宽度和总高度。

• 下面的代码用来检查网页是否加载成功：

if (document.readyState === 'complete') {
  // ...
}
// 轮询检查
var interval = setInterval(function() {
  if (document.readyState === 'complete') {
    clearInterval(interval);
    // ...
  }
}, 100);

• 如果希望向监听函数传递参数，可以用匿名函数包装一下监听函数。

function print(x) {
  console.log(x);
}

var el = document.getElementById("div1");
el.addEventListener("click", function(){print('Hello')}, false);
//上面代码通过匿名函数，向监听函数print传递了一个参数。

• 当一个事件发生以后，它会在不同的DOM节点之间传播（propagation）。这种传播分成三个阶段：

  • 第一阶段：从window对象传导到目标节点，称为“捕获阶段”（capture phase）。
  • 第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。
  • 第三阶段：从目标节点传导回window对象，称为“冒泡阶段”（bubbling phase）

• 事件传播的最上层对象是window，接着依次是document，html（document.documentElement）和body（document.dody）。也就是说，如果body元素中有一个div元素，点击该元素。事件的传播顺序，在捕获阶段依次为window、document、html、body、div;在冒泡阶段依次为div、body、html、document、window。

• 事件发生以后，会生成一个事件对象，作为参数传给监听函数。
  如果监听函数最后返回布尔值false（即return false），浏览器也不会触发默认行为，与preventDefault方法有等同效果。

• 由于DOM没有提供像complete属性那样的，判断是否发生加载错误的属性，所以error事件的监听函数最好放在img元素的HTML属性中，这样才能保证发生加载错误时百分之百会执行。

• CSS模块的侦测:一个比较普遍适用的方法是，判断某个DOM元素的style对象的某个属性值是否为字符串。

typeof element.style.transform === 'string';
//如果该属性不存在，则会返回undefined。

• DOM节点的style对象无法读写伪元素的样式，这时就要用到window对象的getComputedStyle方法，使用window.getComputedStyle对象的getPropertyValue方法，获取伪元素的属性。

var result = window.getComputedStyle(test, ':before')
  .getPropertyValue('content');