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()方法。
刚开始接触以及常用的节点类型:元素节点,文本节点,属性节点。
用一副图来解释这几个节点
我是文本节点的内容
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元素中有效,比如:表单,表单元素,
(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许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。