HTML Dom 对象，属性，事件的整理

HTML Dom
======================================================================================

一. HTML Dom 方法
-------------------------------------------------------------------------------------------------------------------------------------------------------

1.getElementById()返回带有指定 ID 的元素。

var element=document.getElementById("直接写id名");

2.getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

3.getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。

4.appendChild()把新的子节点添加到指定节点。

5.removeChild()删除子节点。

6.replaceChild()替换子节点。

7.insertBefore()在指定的子节点前面插入新的子节点。

8.createAttribute()创建属性节点。

9.createElement()创建元素节点。

10.createTextNode()创建文本节点。

11.getAttribute()返回指定的属性值。

12.setAttribute()把指定属性设置或修改为指定的值。

13.appendChild() 将新元素作为父元素的最后一个子元素进行添加。

14.insertBefore() 在您指定的已有子节点之前插入新的子节点

node.insertBefore(newnode,existingnode)

node:您插入的节点-----插入到哪个节点面

newnode：必需。需要插入的节点对象。--插入的节点对象

existingnode：可选。在其之前插入新节点的子节点。如果未规定，则 insertBefore 方法会在结尾插入 newnode。-----node节点里面会有很多子节点，需要插入哪个子节点前面。

15.removechild() 删除节点----如果要删除节点，必须清楚该节点的父元素，或者使用parentNode属性来查找其父元素

parentNode.removeChild(deleteNode);

16.replaceChild（） 替换HTML元素

parentNode.replaceChild(newNode, replaceNode);

二. HTML Dom 属性
------------------------------------------------------------------------------------------------------------------------------------------------------

1.innerHTML - 获取节点（元素）的内容--经常用于改变元素内容

document.getElementById("p").innerHTML = "替换的内容";

2.nodeName -规定节点的名称

nodeName 是只读的

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

3.nodeValue - 规定节点的值

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

4.nodeType - 返回节点的类型

5.parentNode - 节点（元素）的父节点

6.childNodes - 返回节点的子节点集合，以 NodeList 对象

7.attributes - 节点（元素）的属性节点

8.lastChild - 返回列表中的最后一个子节点

三. HTML Dom 事件
-----------------------------------------------------------------------------------------------------------------------------------------------------

1.onclick="" - 点击事件

2.onload -页面加载时执行-可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页

<script>

function checkCookies()

{

if (navigator.cookieEnabled==true)

{

alert("Cookies are enabled")

} else {

alert("Cookies are not enabled")

}

}

</script>

3.onchange --常用于输入字段的验证。当输入框失去焦点时。

4.onmouseover -鼠标划入时执行，ommouseout - 鼠标划出时执行

5.onmousedown -鼠标按钮被点击时执行， onmouseup - 鼠标按钮松开时执行

<script>