【JavaScript】DOM基础

一、介绍

       DOM（Document Object Model）即文档对象模型，针对HTML和XML文档的API（应用程序接口）。DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM脱胎于Netscape及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。

        DOM中的三个字母：

        D：文档，可以理解为整个web加载的网页文档。

        O：对象，可以理解为类似Windows对象之类的东西，可以调用属性和方法，这里指document对象

        M：模型，可以理解为网页文档的树形结构。

    

    其他概念：

        1、节点：

               加载HTML页面时，web浏览器生成一个树形结构，用来表示页面内部结构，DOM将这种树形结构理解为由节点组成。

                

 

             节点种类：

              

 

二、功能

        1、查找元素

              

        1、getElementById()

           获取ID:

                     windows.οnlοad=function(){

                                     document.getElementById('box');

                         };

          判断是否支持getElementById:

                   if(document.getElementById){

                        alert('当前浏览器支持getElementById');

                   }

          获取完之后通过这个节点，可以访问它的一系列属性:

                document.getElementById('box').tagName;

           

 

         2、getElementByTagName()方法

              

          

       3、getElementByName()方法

             

 

         4、getAttribute()方法

             

          5、setAttribute()方法

                设置元素中某个属性和值，它需要接受2个参数：属性名和值

                

 

         

三、DOM节点

        1、node节点属性

              节点可分为元素节点，属性节点，文本节点，这些节点又有三个非常有用的属性，nodeName，nodeType，nodeValue.

            

          2、层次节点属性

                  节点的层次结构可以划分为：父节点与子节点、兄弟节点。

 

            

 

      1、childNodes属性

             childNodes属性可以获取某一个元素的所有子节点，这些子节点包含元素子节点和文本子节点。

             varbox=document.getElementById('box');  获取一个元素节点

            alert(box.childNodes.length);   //获取这个元素节点的所有子节点

            alert（box.childNodes[0]);         //获取第一个子节点对象

               获取元素子节点：  用nodeName 

              获取标签名称：tagName;

              文本子节点：nodeValue

           

               box.innerHTML    这个是能输入HTML，和nodevalue不同，不仅仅是获取到文本。

              

        2、firstChild 和lastChild

              相当于childNodes[0];和childNodes[box.childNodes.length-1].

 

        3、ownerDocument属性

               返回该节点的文档对象根节点，返回的对象相当于document。

     

四、节点操作

           DOM不单单可以查找节点，也可以创建节点，复制节点，插入节点，删除节点和替换节点

          

 

        

 小结：

基础固然重要，更重要的是在实践中不断的去查找，不断的去总结。