DOM对象模型学习与总结-创新互联

     DOM 对象模型

创新互联是一家专业提供爱辉企业网站建设,专注与成都做网站、网站建设、HTML5建站、小程序制作等业务。10年已为爱辉众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

是针对HTML与XML的API，代表和操作文档的内容。

一．简介

D : 代表文档。作用是把编写的网页文档换为一个文档对象。

O：代表对象。Javascript对象有三种类型：用户定义对象（由程序员自行创建的对象），内建对象（内建在javascript语言里的对象，ECMA-262 只定义了两个内置对象，即 Global 和 Math （它们也是本地对象，根据定义，每个内置对象都是本地对象），本地对象就是 ECMA-262 定义的类（引用类型）。它们包括：

Object   Function   Array   String    Boolean   Number    Date   RegExp

Error    EvalError   RangeError   ReferenceError  SyntaxError   TypeError  URIError

宿主对象（由浏览器提供的对象，所有 BOM 和 DOM 对象都是宿主对象）。

   M：代表模型。某种事物的表现形式，DOM代表着加载到浏览器窗口的当前网页，浏览器提供了网页的模型，因此就可以通过javascript去读取这个模型（地图）。

二．Node类型。

     DOM1定义了一个Node接口，该接口将由DOM中的所有节点类型实现。

          一副图来说明文档节点的部分层次结构

 

 Dom树，树形的根部是Document节点，它代表整个文档，代表HTML元素的节点是Element节点，代表文本节点的是Text节点，如上图，下面的节点都是Node的子类。

                  图说明的节点之间的关系：

     

 每个节点都要有一个childNodes属性，其中保存着一个NodeList对象。Nodelist是一种类数组对象，是基于DOM结构动态执行查询的结果。它访问节点，可以通过方括号，也可以使用item()方法。

  刚开始接触以及常用的节点类型：元素节点，文本节点，属性节点。

用一副图来解释这几个节点  <p tittle=”this is a para”>我是文本节点的内容</p>

DOM几个常用方法：

三．选取文档元素

（1）通过ID选取元素：getElementById();该函数是document对象特有的函数，参数只有一个，必须放在单引号，或者双引号里面，返回值是有着该参数的元素节点对应的对象。

（2）通过标签名获取元素：getElementsByTagName()；也是只有一个参数，参数是标签的名字，但是它返回的是一个对象数组(Nodelist对象)，即使整个文档里这个标签只有一个元素，也是返回一个数组，只是这时的数组长度为1,。

（3）通过css类选取元素：getElementsByClassName();也是只接受一个参数，及类名，要指定多了类名时，只要在字符串参数中，用空格分隔开来就行

如element.getElementsByClassName("class2 class1")将选取elements后代元素中同时应用了class1和class2样式的元素（样式名称不区分先后顺序），返回也是一个对象数组（Nodelist对象），对应着文档里的一组特定元素节点。

（4）通过名字选取元素：getElementsByName();也是一个参数，name 的名称，返回一个对象数组（Nodelist对象）。Name属性，只在少数的HTML元素中有效，比如：表单，表单元素，<iframe>，<img>元素。这是因为name属性是为了方便提交表单数据而打造。 并且，getElementsByName()方法，不在Document类中，只是针对HTML文档可用，在XML中却不能用。

（5）、通过CSS选择器选取元素：document.querySelectorAll("selector") 其中，selector为合法的CSS选择器，比如：通过#id，.class,p[tittle=”aaa”] , var test=document.querySelectorAll("#test");通过这样获得对象那个后，再继续操作。等等。返回值也是一个对象数组（Nodelist对象）。

        这些原生的元素选取的方法比jQuery要快很多。

四．获取和设置属性。

       （1）getAttribute()；只有一个参数，打算获得的属性的名字；

       （2）setAttribute（）；允许对属性节点值做出修改。使用方法：object.setAttribute(attribute,value);

           简单使用例子代码如下：

    效果图：

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享标题：DOM对象模型学习与总结-创新互联
文章路径：https://www.cdcxhl.com/article30/ccgcso.html

成都网站建设公司_创新互联，为您提供定制开发、品牌网站设计、网站收录、小程序开发、标签优化、营销型网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联