微信小程序学习笔记2

三、HTML DOM（文档对象模型）

js能够改变html文档所有元素。

1. DOM方法 HTML对象：
2. 改变元素属性

document.getElementById("myImage").src = "landscape.jpg";

1. 改变CSS

document.getElementById("p2").style.color = "blue";

1. DOM事件（任何元素都可以添加） onclick, onload, onunload(离开页面), onmouseover, onmouseout, onmousedown, onmouseup。

// 事件监听器
document.getElementById("myBtn").addEventListener("click", displayDate);
element.addEventListener(event, function, useCapture);
// 第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的
// 第一个参数："click" "mouseout" "mouseover"等
// 也可以给window添加监听器
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});
// 移除事件监听器
element.removeEventListener("mousemove", myFunction);

1. DOM节点 parentNode，childNodes[nodenumber]，firstChild，lastChild，nextSibling，reviousSibling。

var myTitle = document.getElementById("demo").firstChild.nodeValue;
// 创造新节点
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
// 创造新html元素
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
// 删除html元素
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
// 替换html元素
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);

1. HTML DOM集合

var myCollection = document.getElementsByTagName("p"); // 返回HTMLCollection对象
myCollection.length;
myCollection[0];
// HTMLCollection不是数组，无法使用数组方法：valueOf(), pop(), push(), join()。