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 事件。