编程助手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,接着依次是documenthtml(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');
posted @ 2016-08-05 19:09  西河  阅读(188)  评论(0编辑  收藏  举报