zoukankan      html  css  js  c++  java
  • 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的发展,基本组成,以及元素、节点的属性。在当中有大量是讲的方法。元素方法、节点操作方法,这些方法的学习为以后做基础,期待有更一步的提高。

  • 相关阅读:
    Excel 向程序发送命令时出现问题
    JavaScript中undefined,null,NaN的区别
    MYSQL查询优化(一)
    win7 去除任务栏上出现的过期图标
    InnoDB与MyISAM区别
    form表单 按回车自动提交 实现方式
    多线程下载图片
    MySQL启动不了,InnoDB: autoextending data file .\ibdata1 is of a different size 78592 pages (rounded down to MB) than specified in the .cnf file: initial 131072 pages, max 0 (relevant if nonzero) pages!
    Net EF to MySQL生成edmx文件时报错:StrongTypingException:表“TableDetails"中列“IsPrimaryKey"的值为DBNull
    DataTable转置
  • 原文地址:https://www.cnblogs.com/blfbuaa/p/7081151.html
Copyright © 2011-2022 走看看