JavaScript之HTML Dom对象

第一步: 了解Dom的树结构

第二步:掌握查找HTML的三种方式

通过Id查找，也是最常用的
document.getElementById
通过类别查找，也是常用的
document.getElementByClassName
通过标签名查找
在Id查找的基础上，再次查找p标签

第三步: HTML的改变

改变HTML内容
document.getElementById().innerHTML = "";
改变HTML元素
document.getElementById().attribute= "";
改变HTML输出流
document.write(new Date());
改变HTML样式
document.getElementById().style.color/fontsize/fontfamily/background

第四步: HTM事件

onclick, onload, onmouseover, onmouseout,onmousedown,onmouseup, onchange
比较常用的,onclick

第五步: EventListenter

参考例子:	document.getElementById("myBtn").addEventListener("click", displayDate);

第六步: 元素[创建，添加，移除，插入，替代]

此刻根据Dom树的结构，罗列了几个方法
appendChild
	var p3 = document.createElement("p");
	var node = document.createTextNode("我是新的一句话");
	p3.appendChild(node);
	
	// 获取块级元素
	var d1 = document.getElementById("div1");
	d1.appendChild(p3);
insertBefore
	var p3 = document.createElement("p");
	var node = document.createTextNode("我是新的一句话");
	p3.appendChild(node);
	
	// 获取块级元素
	var d1 = document.getElementById("div1");
	var child = document.getElementById("p1");
	d1.insertBefore(p3, p1);
remove
	// 获取块级元素
	var d1 = document.getElementById("div1");
	var child = document.getElementById("p1");
	d1.remove(child);
replaceChild
var p3 = document.createElement("p");
	var node = document.createTextNode("我是新的一句话");
	p3.appendChild(node);
	
	// 获取块级元素
	var d1 = document.getElementById("div1");
	var child = document.getElementById("p1");
	d1.replaceChild(p3, p1);

第七步: HTML Collection

首先了解什么返回的对象时Collection
getElementByTagName();
他可以使用数组的方法，但其实不是一个数组
Here is instance
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;
分析: 第一句话，拿到所有的p标签，第二句话，获取所有p标签的个数

第八步: NodeList对象

功能非常类似Collection
有几个方法
childNodes;
querySelectorAll();

更多文章，请关注博客