HTML DOM基本操作，附js代码

1. DOM节点访问

1.1 直接获取

document.getElementById("intro");//返回单个id为into的元素节点document.getElementsByTagName("p");//返回所有标签p的元素集合，也可以node.document.getElementsByTagName("p");//代表node的所有p子孙节点document.getElementsByClassName("intro");//集合document.getElementsByName("intro");//集合document.getElementsByNameNS("intro");  //namespace

1.2 父子兄弟操作（dom的操作需要注意换行和空格，也可能是节点）

var chils= s.childNodes;  //得到s的全部子节点    坑：1.子节点还是子孙（浏览器） 2.空格换行可能是节点var par=s.parentNode;   //得到s的父节点var ns=s.nextSbiling;   //获得s的下一个兄弟节点var ps=s.previousSbiling;  //得到s的上一个兄弟节点var fc=s.firstChild;   //获得s的第一个子节点var lc=s.lastChile;   //获得s的最后一个子节点节点属性

2.DOM属性

2.1 innerHTML
等号的位置决定读写
2.2 nodeName，nodeValue，nodeType
无非属性、元素、文档、注释等取值不同，一般用的不太多

3.修改DOM

appendChild(node)   把新的子节点添加到指定节点。removeChild(node)   删除子节点。replaceChild(node)  替换子节点。insertBefore(node)  在指定的子节点前面插入新的子节点。createAttribute(name,value) 创建属性节点。createElement(tag)  创建元素节点。createTextNode(tesxt)   创建文本节点。getAttribute(name)  返回指定的属性值。setAttribute(name,value)    把指定属性设置或修改为指定的值。

4.事件

document.getElementById("myBtn").onclick=function(){displayDate()}; //是否可以给集合这样直接添加事件<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1><h1 onclick="changetext(this)">点击文本!</h1>document.getElementById("myBtn").addEventListener("click", displayDate);

常用事件：
onload 和 onunload 事件：当用户进入或离开页面时，会触发 onload 和 onunload 事件。
onchange 事件：onchange 事件常用于输入字段的验证。
onmouseover 和 onmouseout 事件：onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件：onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。