javascript DOM编程

javascript DOM编程

1.获取DOM对象

document.getElementById();

document.getElementsByTagName();

document.getElementsByClassName();

document.getElementByName();

document.querySelector(selector);

document.querySelectorAll(selector);

//class操作

document.querySelector(selector).classList

document.querySelector(selector).classList.contains(className)

document.querySelector(selector).classList.remove(className)

document.querySelector(selector).classList.add(className)  //ele.classList.add('a', 'b');

document.querySelector(selector).classList.toggle(className)

2.设置DOM对象属性

DOM.setAttribute("src",source);

DOM.style.color = '#f00';

DOM.style.font = "2em 'Times',serif";

DOM.className = 'name';

DOM.id = 'id';

alert("The font family is " + para.style.fontFamily);

3.获取DOM对象属性值

DOM.getAttribute('src');

DOM.hasAttribute('src');

 

4.获取DOM节点

DOM.firstChild.nodeValue = text

DOM.firstChild.nodeType = 1 || 2 || 3

元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9

 

DOM.nodeName = 'TAGNAME'

DOM.childNodes.length; //childNodes它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点,可通过nodeType == 1来判断是否是元素节点

DOM.children;//非标准属性，它返回指定元素的子元素集合,不包括文本节点，相对来说children比childNodes好用，不用过滤什么。需要注意的是children在IE6/7/8中包含注释节点 IE9不包括注释节点

DOM.lastChild.nodeValue

DOM.hasChildNodes()

DOM.previousSibling

DOM.nextSibling

DOM.parentNode

DOM.firstChild //通过firstChild拿回来的元素有可能是文本节点，如果希望拿回来的一定是元素节点，可通过DOM.children[0]的方式获取

DOM.lastChild //类似firstChild

 

5.创建元素

var p = document.createElement("p");

var t = document.createTextNode("I inserted ");

p.appendChild(t);

DOM.insertBefore(newElement,targetElement.nextSibling);

 

6.插入HTML

DOM.innerHTML = '<p>hello world!</p>';

alert(DOM.innerHTML);

document.write(str);

 

事件绑定

DOM.onclick = function(){};

DOM.ondblclick = function(){};

DOM.onfocus = function(){};

DOM.onblur = function(){};

DOM.onmouseover = function(){};

DOM.onmouseout = function(){};

DOM onload事件

function addLoadEvent(func) {
  var oldonload = window.onload;
    if (typeof window.onload != 'function') {
      window.onload = func;
    } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

 

7.节流(源自https://keelii.github.io/2016/06/11/javascript-throttle/)

var throttle = function (fn, delay, atleast) {
    this.fn      = fn;
    this.delay   = delay;
    this.atleast = atleast;

    this.init();
};

throttle.prototype = {
    init: function () {
        this.previous = null;
        this.timer = null;
    },
    detect: function () {
        var now = +new Date();

        if ( !this.previous ) this.previous = now;

        // 如果上一次与本次的时间差大于最小触发值，就走最小触发值的逻辑
        // 否则走 timeout 的逻辑
        if ( now - this.previous > this.atleast ) {
            this.atleastCond();
        } else {
            this.timeoutCond();
        }
    },
    atleastCond: function () {
        this.fn();
        this.previous = +new Date();
    },
    timeoutCond: function () {
        var _this = this;

        clearTimeout(this.timer);
        this.timer = setTimeout(function() {
            _this.fn()
            _this.previous = null;
        }, this.delay);
    }
};

var th = new throttle(testFn, 200, 1000);
window.onresize = function () {
    th.detect()
};

 

基础知识：

~：表示取反，例如~8,8转换为二进制数，再取反，最终结果是(-8 - 1) = -9。再例如 ~-8,结果为(8 - 1) = 7。