获取元素与属性

1
2
3
4
5
6
7
8
9

document.getElementById('id')

document.getElementsByTagName('p')

node.getAttribute('href')

node.setAttribute('src', 'img/img.png')

封装windowOnload加载函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function addLoadEvent(func){
  let oldonload = window.onload;
  if( typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function(){
      oldonload();
      func();
    }
  }
}

//  使用
addLoadEvent(firstFunc)
addLoadEvent(secondFunc)

创建元素

1
2
3
4
5
6
7
8
9
10
11
12
13

document.write(text)

document.innerHtml = '<p>hello</p>'

document.createElement('p')

document.createTextNode('hello')

parentNode.appendChild(child)

parentNode.insertBefore(newElement, targetElement)

封装插入元素到目标元素后：

1
2
3
4
5
6
7
8
9
function insertAfter(newElement, targetElement){
	let parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        parent.appendChild(newElement);
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

封装动画移动 absolute 元素到指定位置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function moveElement(elementId, final_x, final_y, interval) { 
    if (!document.getElementById) return false;
    if (!document.getElementById(elementId)) return false;
    let elem = document.getElementById(elementId);
    let xpos = parseInt(elem.style.left);
    let ypos = parseInt(elem.style.top);
    let dist = 0;

    if (elem.movement) {
        clearTimeout(elem.movement)
    } 
    if (!elem.style.left) elem.style.left = "0px";
    if (!elem.style.top) elem.style.top = "0px";
    
    if (xpos == final_x && ypos == final_y) {
        return true;
    }
    if (xpos < final_x) {
        dist = Math.ceil((final_x - xpos) / 10);
        xpos += dist;
    } 
    if (xpos > final_x) {
        dist = Math.ceil((xpos - final_x) / 10);
        xpos -= dist;
    }
    if (ypos < final_y) {
        dist = Math.ceil((final_y - ypos) / 10);
        ypos += dist;
    }
    if (ypos > final_y) {
        dist = Math.ceil((ypos - final_y) / 10);
        ypos -= dist;
    }
    
    elem.style.left = xpos + 'px';
    elem.style.top = ypos + 'px';

    let repeat = `moveElement('${elementId}', ${final_x}, ${final_y}, ${interval})`;
    elem.movement = setTimeout(repeat, interval);
}

获取XMLHttpRequest对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function getHttpObject() {
    if (typeof XMLHttpRequest == "undefined") {
        XMLHttpRequest = function () {
            try {
                return new ActiveXObject("Msxml2.XMLHTTP.6.0");
            } catch (e) {}
            try {
                return new ActiveXObject("Msxml2.XMLHTTP.3.0");
            } catch (e) {}
            try {
                return new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {}
            return false;
        }
    }
    return new XMLHttpRequest();
}

function getNewContent() {  
    let request = getHttpObject();
    if (request) {
        request.open("GET", "example.txt", true);
        request.onreadystatechange = function () {
            if (request.readyState = 4) {
                let para = document.createElement("p");
                let txt = document.createTextNode(request.responseText);
                para.appendChild(txt);
                document.getElementById("new").appendChild(para);
            }
        };
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        request.send(null);
    } else {
        alert("Sorry, your browser doesn\'t support XMLHTTPRequest");
    }
}