• 了解DOM


      DOM是为了方便处理层次型文档(如XML、HTML)的一种技术。DOM还提供了一套API,使开发人员可以用面向对象的方式来处理这些文档。对于XML文档来说,有专门的处理XML文档是XML  DOM,一般用的都是处理HTML文档 的HTML  DOM 。

      DOM 主要的功能是获得HTML语言中的各个元素(如div、form),从而可以很容易地获得这些元素的信息,或动态向这些元素中添加新的元素。操作DOM的对象实际上也需要使用JavaScript,也就是,调用DOM API也要编写JavaSscript代码。在JavaScript中描述DOM的对象是docment,其实document不仅是HTML DOM ,也是XML DOM,如果是直接操作HTML文档,可以使用documentElement属性,

        var   oHtml =  document.documentElement ;
    

      oHtml对象表示当前的整个HTML文档。在HTML文档的下一层有两个元素,head和body,这两个元素可以使用firstChild属性和lastChild属性获得,

        var   oHead = oHtml.firstChild ;
        var   oBody  = oHtml.lastChild ;
    

      还可以使用childNodes属性来获得上面两个对象,

            var  oHead = oHtml.childNodes[0] ;
            var  oBody  = oHtml.childNodes[1] ;
    

      通过HTML元素对象的outerHTML和innerHTML属性,可以分别获得当前元素的包括元素本身的和不包括元素本身的HTML代码,

            alert(oHead.outerHTML) ;    //  显示包括head标签本身的内容
            alert(oBody.innerHTML) ;    //  显示不包括body标签本身的内容
    

      在DOM 中有3中方法可以获得当前HTML文档中的任意一个HTML元素,这3个方法也就是HTML  document 的3 个方法,分别是getElementById、getElementsByClassName、getElementsByTagName。

      1.getElementById方法

      getElementById方法是最简单的一个,这个方法可以根据HTML元素的id属性值得到HTML元素。在HTML文档中,id属性值是唯一的。

      2、getElementsByClassName方法

      这个方法通过HTML的class属性获得对应的HTML元素集合。由于HTML元素的class属性值并不唯一,因此,使用getElementsByClassName方法可以得到多个相同class属性值的HTML元素。

      3、getElementsByTagName

      getElementsByTagName方法获得的HTML元素的范围最大,他可以根据HTML元素的标签类型来获得一个相同HTML元素的数组。

  • 相关阅读:
    输入'过程'求方差算法的简单优化(免去数组的使用)
    PAT 甲级 1002 A+B for Polynomials
    常见算法时间函数的增长趋势分析
    洛谷 P4888 三去矩阵
    PAT 甲级 1001 A+B Format
    网站云服务器迁移时遇到的坑
    Angular JS中自定义标签 属性绑定的解释
    how to do a mass update in Laravel5 ( 在Laravel 5里面怎么做大量数据更新 )
    javascript 到将来某个时间(2020-5-20)的倒计时
    javascript 数字日期格式转换为中文
  • 原文地址:https://www.cnblogs.com/sdlzspl/p/7457693.html
Copyright © 2020-2023  润新知