DOM学习

一些常用的 HTML DOM 方法：

getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
首先创建一个节点，
然后创建一个文本节点，
然后将文本节点添加到LI节点上。
最后将节点添加到列表中。
appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加。
如果不希望如此，您可以使用 insertBefore() 方法

var node = document.createElement("li")  #创建了以li节点
var textnode = document.createTextNode("里子") #创建了一个文本节点
node.appendChild(textnode) #将文本节点textnote添加到li节点node上
document.getElementById("d").appendChild(node) #将节点li添加到列表中

removeChild(node) - 删除子节点（元素）
先找到需要删除的节点的父节点再用方法删除需要删除的节点

var parent=document.getElementById("div1");
var child=document.getElementById("p")

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
如果你需要替换一个子节点name你需要做的事有6件
首先找到需要被替换的子节点和其父节点；其次创建一个新的节点或者替换的节点和替换的内容；在将替换的内容添加到新的节点中；最后用父节点.replaceChild(新的节点，被替换的节点)。这样你就完成了节点的替换

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
var para=document.createElement("p");
var node=document.createTextNode("这是一个新的段落。");
para.appendChild(node);
parent.replaceChild(para,child);

insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。

nodeValue 属性

nodeValue 属性规定节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

修改 HTML 元素

修改 HTML DOM 意味着许多不同的方面：
改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
找到需要修改的节点用innerHTML属性等于新的值像这样：documen.getElementById("info").innerHTML="新的数据"
修改样式：
documen.getElementById("info").style.color="red"
这里修改样式很灵活，如果你只需要修改某一个属性就点上它如果需要修改所有属性那么就不需要点任何一个属性直接style=""这样你就可以重写他的样式了

HTML 事件属性

onclick=""

鼠标点击事件：当鼠标点击有onclick事件的元素或者节点时会执行双引号中的函数

onload 和 onunload 事件

用户进入或者离开网页事件：当用户进入到某一网页含onload 和 onunload 事件中时会执行事件后的函数多用于处理 cookies。

onchange 事件

onchange 事件常用于输入字段的验证。这里是当你完成输入时触发事件后的函数

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。

onmousedown、onmouseup 以及 onclick 事件

onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件