HTML_DOM学习

HTML DOM 树

通过ID/类名/标号可以定位HTML元素，然后可用JS改变这些元素的样式内容，并对DOM事件作出反应

对HTML事件的响应：

onmousedown 和onmouseup/onclick：鼠标的长按与释放/单击

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数

onload 和 onunload： 事件可用于处理 cookie

resize:重置浏览器事件（向winwows添加事件句柄）。

onfocus、onchange 事件：输入字段获得焦点、和失去焦点后。

添加和删除事件的侦听：element.addEventListener(event, function, useCapture);　　

　　　　　　　　　　　removeEventListener()：

　　　　早期的一些浏览器不支持的用以下替代：element.attachEvent(event, function);element.detachEvent(event, function);

　　如document.getElementById("myBtn").addEventListener("click", displayDate);//注意事件用click而不能用onclick

事件传递的顺序：冒泡（内部先触发，在触发外部）和捕获（外部先触发，在触发内部），即useCapture参数：默认值为 false, 即冒泡传递，用在当<p>夹在<div>中间时的触发先后顺序问题。
节点文本的添加（在前添加、在后添加）、删除、和替换：

　　添加：var para = document.createElement("p");

　　　　　var node = document.createTextNode("这是一个新的段落。");

　　　　　para.appendChild(node);//p和内容的绑定

　　　　　var element = document.getElementById("div1");//查找一个已有元素

　　　　　element.appendChild(para);//在一个已有的元素容器中添加新的元素

　　　　　　

　　　　　var child = document.getElementById("p1");

　　　　  element.insertBefore(para, child);/*在一个已有元素容器的某个元素的前面添加*/                 

　　　　　parent.removeChild(child);/*删除某个指定元素*/

　　　　　或不用父节点的删除child.parentNode.removeChild(child);

　　　　 parent.replaceChild(para, child);//用新创建的某个元素替换已有的某个元素

 

 

 

 

 

通过