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

电玩女神 2022-09-25 03:21 222阅读 0赞

> 声明：本文内容来源于编程助手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');