【JavaScript】DOM基础

原创 2016年08月29日 08:25:47

一、介绍

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

        DOM中的三个字母:

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

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

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

    

    其他概念:

        1、节点:

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

                


 

             节点种类:

              


 

二、功能

        1、查找元素

              


        1getElementById()

           获取ID:

                     windows.onload=function(){

                                     document.getElementById('box');

                         };

          判断是否支持getElementById:

                   if(document.getElementById){

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

                   }

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

                document.getElementById('box').tagName;

           


 


         2getElementByTagName()方法

              


          


       3getElementByName()方法

             


 

         4getAttribute()方法

             


          5setAttribute()方法

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

                


 

         

三、DOM节点

        1node节点属性

              节点可分为元素节点,属性节点,文本节点,这些节点又有三个非常有用的属性,nodeNamenodeTypenodeValue.

            


          2、层次节点属性

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

 

            


 

      1childNodes属性

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

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

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

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

               获取元素子节点:  nodeName 

              获取标签名称:tagName;

              文本子节点:nodeValue

           

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

              


        2firstChild lastChild

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

 

        3ownerDocument属性

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

     

四、节点操作

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

          


 

        

 小结:

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

 

             

版权声明:本文为博主原创文章,未经博主允许不得转载。

JavaScript学习篇之——DOM学习

DOM是什么 DOM称为文档对象模型,是HTML文档和XML文档等文档的应用程序接口,。它提供了一种结构化的文档表示方式,从而使你可以修改它的内容以及最终的表达方式,进而将网页和脚本货编程语言连接...
  • zwk626542417
  • zwk626542417
  • 2013年11月26日 18:48
  • 2460

[学习笔记]JavaScript之DOM基础

DOM概述 DOM定义 DOM(文档对象模型,Document Object Model)是W3C组织开发的一套便于操作XML和HTML的JavaScript方法,其将XML和HTML抽象成文...
  • jacobvv
  • jacobvv
  • 2015年01月18日 22:20
  • 1292

Javascript实现飞机大战小游戏

源码地址:https://github.com/markLijun/planeWar
  • mark_lijun
  • mark_lijun
  • 2014年10月03日 20:04
  • 1328

JavaScript基础和DOM API函数

  • 2007年07月02日 15:13
  • 27KB
  • 下载

JavaScript基础和DOM API函数

  • 2007年07月10日 13:35
  • 71KB
  • 下载

javascript基础(DOM查询)(二十六)

1.DOM查询: Untitled Document /* * 定义一个函数,专门用来为指定id的元素绑定单击响应函数 * 参数: ...
  • u010853130
  • u010853130
  • 2017年02月08日 16:18
  • 111

Javascript基础(7)DOM简介

1.HTML DOM的属性: a. innerHTML 获取元素内容的最简单方法 b. nodeValue 获取或规定规定节点的值 ( 元素节点的 nodeValue ...
  • puppyand123
  • puppyand123
  • 2015年08月15日 11:22
  • 192

JavaScript DOM编程基础精华03(动态设置,层的操作,性能问题)

代码是否需要放置到onload中  //如果js代码需要操作页面上的元素,则将该代码放到onload里面。         //因为当页面加载完毕之后页面上才会有相关的元素         //如...
  • XHQT520
  • XHQT520
  • 2016年02月09日 16:48
  • 293

JavaScript学习7:DOM基础

DOM的全称为DocumentObject Model,即文档对象模型,是针对HTML和XML文档的API。它描绘了一个具有层次结构的节点树,运行开发人员添加、移除和修改页面的某一部分。DOM是由Ne...
  • u010929604
  • u010929604
  • 2015年05月31日 11:59
  • 1405

javascript基础:DOM1简介

一、DOM介绍 DOM(Document Object Model)即文档对象模型 ,主要是用来操作整个网页页面上的文档的。 DOM 中的三个字母: D(文档)可以理解为整个 W...
  • gongwutianya
  • gongwutianya
  • 2016年07月02日 17:46
  • 304
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【JavaScript】DOM基础
举报原因:
原因补充:

(最多只允许输入30个字)