DOM基础----DOM

Posted blfbuaa

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM基础----DOM相关的知识,希望对你有一定的参考价值。

       DOM(Document Object Model),中文名称为文档对象模型。是处理可扩展标识语言的标准编程接口,主要针对html和XML。DOM描绘了一个层次化的节点树,开发者能够加入、改动和移除页面的某一部分,也就说改变文编的内容和呈现方式。

        D(Document):能够理解为整个Web载入的网页文档。

        O(Object):对象。能够调用属性和方法。

        M(Model):能够理解为网页文档的树型结构。一个节点有分支。

      先对DOM有一个简单的介绍,在从基础来学习一下DOM,DOM有自己的节点和元素。

DOM的树型就是由节点组成的,W3C提供了比較方便的定位节点的方法和属性,这样我们就能够对节点进行操作,找到所须要的值。

查找元素节点的方法:

        getElementById() :获取特定ID元素的节点

        getElementsByTagName():获取同样元素的节点列表

        getElementsByName():获取同样名称的节点列表

        getAttribute():获取特定元素节点属性的值

        setAttribute():设置特点元素节点属性的值

        removeAttribute():移除特定元素节点属性  

       查找元素节点的方法有非常多。我就以getElementById()为例。来说明一下获取元素节点的方法:

        window.onload=function (){

            varbox =document.getElementById(‘box‘);

            alert(box);

        };

   显示效果:

                       技术分享

节点:

      节点(node):了解什么是节点(javascript节点)相当于树分叉的地方,通过以下的图我们就能非常清晰的了解节点。

         技术分享

      节点分这么多种,我们怎样来划分元素节点、属性节点、文本节点呢?这是一个小样例,能说明各个的差别:   

 <HTML>  
<HEAD>  
<TITLE>生活</TITLE>  
</HEAD>  
<BODY>  
    <table>  
        <tr>  
            <td id="john" name="myname">John</td>  
            <td>Doe</td>  
            <td id="jack">Jack</td>  
        </tr>  
    </table>  
    <script>  
        var d = document.getElementById("john");  
        alert(d.nodeType)  
        alert(d.nodeName)  
        alert(d.nodeValue)  
    </script>  
</BODY>  
</HTML>
         输出结果:其三个属性的值分别为:

                nodeType:ELEMENT_NODE

                nodType值:1

                nodeName(元素标记 ):td

                nodeValue:null

       经过这个过程,对于DOM有一个初步的了解,DOM的发展,基本组成,以及元素、节点的属性。在当中有大量是讲的方法。元素方法、节点操作方法,这些方法的学习为以后做基础,期待有更一步的提高。

以上是关于DOM基础----DOM的主要内容,如果未能解决你的问题,请参考以下文章

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段

jQuery的DOM操作

深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

JavaScript 将片段附加到DOM而不是每个节点。

将片段附加到DOM而不是每个节点。

JavaScript单行代码,也就是代码片段