HTML DOM归纳

学而不用易忘，此时记下，方便下次查看。

HTML DOM定义

    HTML DOM 是W3C DOM中针对html文档的标准模型。W3C核心DOM标准中立于任何平台及语言，允许程序和脚本动态地访问和更新文档的结构、内容及样式。 W3C DOM标准中包含了HTML DOM的标准对象模型及编程接口，通过HTML DOM标准可动态实现对html文档的修改，常与CSS、JavaScript连用。

基本概念

节点

    在W3C给出的HTML DOM标准中，将html文档中的所有内容都看作结节。节点包括文档节点（如：html整个文档）、元素节点（html元素）、文本节点（html元素内的文本）、属性节点（html属性）、注释节点(html注释)。
    W3C官网给出的HTML DOM节点树：

节点层级关系

    DOM树既然名字中有树，那么其节点间的层级关系也与树相似，层级包括子节点、父节点、同胞节点，含义与树结构相同。其中最上层的节点称为根节点，根节点没有父节点。在使用导航方法查找某一节点时，依赖的就是节点层级关系。

常用方法

    在HTML DOM标准中定义了许多标准的编程接口用于其他编程语言对HTML DOM的访问。下面是W3C列举出的常用接口：

方法常见属性

    通过修改编程接口提供的属性值，可获取、修改、删除html文档（如：节点、节点名、文本值等）。常见的属性有：

属性名	效果
innerHTML	获取元素内容
nodeName	只读，获取节点名称，元素节点与标签名相同、属性节点与属性名相同、文本节点始终是#text、文档节点始终是#documnet

作用

    HTML DOM通过一系列已定义的行为，可获取、修改、新增及删除html元素（简记为html dom增删改查）。

查找

    1、可查找到的对象
        HTML DOM标准通过“id”、“class name”、“Tag”等文档信息定位查找节点、节点元素、节点文本、节点样式等。
    2、查找方法

方法名	效果
getElementById()	通过节点“id”名定位查找节点，并返回该对象
getElementByTagName()	定位查找指定标签名的所有元素，并返回查找对象
getElementByClassName()	定位查找具有相同类名的所有html元素，并返回查找对象

    3、 导航（在当前节点根据DOM树查找其他节点）
        依据节点的层级关系，使用节点的parentNode、firstChild、lastChild属性，可实现在文档结构中进行导航搜索。
        特殊属性：

方法	效果
document.documentElement	获取html整个文档节点
document.body	获取html文档的主体
childNode[i].nodeValue	获取元素内容

新增

    1、创建
        方法名：createElement(‘TagName’)
    新创建的节点或其父层级关系上的某一级必须依附于已有节点。
    2、添加方式，appeandChild（）追加在当前节点末尾，insertBefore（new_node，now_node）在节点now_node前插入new_node节点。

修改

    1、可修改的对象列举
    ☀新建html元素
    ☀修改html内容
    ☀修改CSS样式
    ☀修改html属性
    ☀删除html元素
    ☀改变事件
    **方法：**新建使用createElement（“p”）;修改，首先查找定位到需修改的节点，再修改属性值等；删除，必须先找到当前节点的父节点，然后执行removeChild（child）方法；事件一般配合JavaScript使用，详细信息见下。

事件

    1、html常用事件
    ☀用户点击鼠标
    ☀用户长按鼠标
    ☀用户放开鼠标
    ☀网页已加载时
    ☀图片已加载时
    ☀节点字段被改变时
    ☀html表单被提交时
    ☀用户点击某一按钮触发事件
    2、事件属性
    事件通常与某一行为（函数）相关，当事件被触发时，执行某一函数完成预期效果。常见的事件属性如下：

属性名	含义
onclick	当鼠标点击指定对象时触发事件
onchange	当指定元素内容发生改变时触发事件
onload/onunload	当用户进入或离开页面时触发事件
onmouseover/onmouseout	当鼠标指针移动到或离开元素时触发事件
onmousedown/onmouseup	这两个动作是鼠标点击时的两个子动作，即鼠标按下或放开时触发事件。注：鼠标完成点击时，触发onclick事件

参考网址：http://www.w3school.com.cn/htmldom/index.asp

☆☆☆ ★ 鹿子