学习HTML DOM之前需要懂得到JS,HTML技术

一、概念：1.HTML:超文本标记语言（HYPER TEXT MARKUP LANGUAGE）

     2.DOM:文档对象模型（Document Object Model）定义处理，访问HTML文档标准方法

     3.JS:向HTML添加交互行为，是一种脚本语言

     4.节点树：HTML DOM把HTML 文档呈现为带有元素，属性，文本的树结构

     5.父节点：除文档节点之外的每个节点都有父节点

     6.子节点:大部分元素节点都有子节点

     7.同级节点：  节点分享同一个父节点

     8.节点列表（nodeList）：

二、DOM，JS，HTML 三者间关系:

   通过JS 可以重构HTML 文挡，可以添加，移除，修改或重排HTML 文档，

   DOM 是JS 重构HTML 文挡的入口，


  • 整个文档是一个文档节点

  • 每个 HTML 标签是一个元素节点

  • 包含在 HTML 元素中的文本是文本节点

  • 每一个 HTML 属性是一个属性节点

  • 注释属于注释节点

三、查找并访问节点

   1.getElementByID和getElementsByTagName可以查找整个HTML 元素，这两种方法会忽略文档的结        构

       getElementByID：可通过指定的 ID 来返回元素

       getElementsByTagName：会使用指定的标签名返回所有的元素（作为一个节点列表），这些            元素是您在使用此方法时所处的元素的后代。

       语法：document.getElementById('ID').getElementsByTagName("标签名称");

             document.getElementsByTagName("标签名称");

             document.getElementById("ID");


   2. 节点列表：当我们使用节点列表时，通常要把此列表保存在一个变量中

               语法：获取节点列表：var x=document.getElementsByTagName("p");

                     遍历节点列表：for (var i=0;i

                                   // do something with each paragraph

                                           }

                    可以通过索引号来访问某个具体的元素：var y=x[2];


  3.parentNode、firstChild以及lastChild

           对 firstChild 最普遍的用法是访问某个元素的文本：var x=[a paragraph];

                                                   var text=x.firstChild.nodeValue;

           parentNode 属性常被用来改变文档的结构。假设您希望从文档中删除带有 id 为 "maindiv" 的节点：var x=document.getElementById("maindiv");

                  x.parentNode.removeChild(x);

   4.根节点访问：

   document.documentElement ：可返回存在于 XML 以及 HTML 文档中的文档根节点

   document.body ：提供了对 标签的直接访问。

四、节点信息：

   1.nodeName节点名称

   2.nodeValue节点值

   3.nodeType节点类型