HTML DOM是针对HTML文档的标准模型。它定义了所有HTML元素的对象和属性,以及访问它们的方法。也就是说,HTML DOM是关于如何获取、修改、添加和删除HTML元素的标准。
一、 HTML DOM的属性和方法
1、HTML DOM的属性有以下几种:
(1)获取和设置节点(元素)的文本值(内容)的innerHTML属性;
(2)获取和设置节点的父节点的parentNode属性;
(3)获取和设置节点的子节点的childNodes属性;
(4)获取和设置节点的属性节点的attributes属性。
(5)规定节点的名称的nodeName属性;
(6)规定节点的值的nodeValue属性;
(7)获取节点的类型的nodeType属性。
注意:
(1)nodeName、nodeValue和nodeType等属性都是只读的;
(2)元素节点的nodeName与标签名相同,它的nodeValue是undefined或者null,它的nodeType是1;
(3)属性节点的nodeName与属性名相同,它的nodeValue是属性值,它的nodeType是2;
(4)文本节点的nodeName是#text,它的nodeValue是它本身,它的nodeType是3;
(5)文档节点的nodeName是#document,它的nodeType是9;
(6)注释节点的nodeType是8;
(7)nodeName始终包含HTML元素的大写字母标签名。
2、document的方法有以下几种:
(1)获取文档中包含带有指定类名的所有元素的节点列表的getElementsByClassName()方法。
(2)获取带有指定id的元素的getElementsById()方法。
(3)获取文档中包含带有指定标签名称的所有元素的节点列表(集合/节点数组)的getElementsByTagName()方法。
(4)把新的子节点添加到指定节点的appendChild()方法。
(5)删除子节点的removeChild()方法。
(6)替换子节点的replaceChild()方法。
(7)在指定的子节点前面插入新的子节点的insertBefore()方法。
(8)获取指定的属性值的getAttribute()方法。
(9)把指定的属性设置或修改为指定的值的setAttribute()方法。
(10)创建属性节点的createAttribute()方法。
(11)创建元素节点的createElement()方法。
(12)创建文本节点的createTextNode()方法。
二、HTML DOM document对象
1、每一个载入了浏览器的HTML文档都是Document对象,而Document对象让我们可以从脚本中对HTML页面中的所有元素进行访问。注意:Document对象是Window对象的一部分,我们可以通过window.document属性对其进行访问。
2、document对象的集合具有以下几种:
(1)提供对文档中所有HTML元素的访问的all[]集合;
(2)获取文档中所有Anchor对象的引用的anchors[]集合;
(3)获取文档中所有Applet对象的引用的applets集合;
(4)获取文档中所有Form对象的引用的forms[]集合;
(5)获取文档中所有Image对象的引用的images[]集合;
(6)获取文档中所有Area和Link对象的引用的links[]集合;
3、document对象的属性具有以下几种:
(1)提供对元素的直接访问的body属性。它对于定义了框架集的文档是引用最外层的的。
(2)获取或设置与当前文档相关的所有cookie的cookie属性。
(3)获取下载当前文档的服务器域名的domain属性。
(4)获取文档被最后修改的日期和时间的lastModified属性。
(5)获取载入当前文档的文档的URL的referrer属性。
(6)获取当前文档的标题的title属性。
(7)获取当前文档的URL的URL属性。
注意:
(1)cookie属性是一个可读写的字符串,我们可以通过使用它对当前文档的cookie进行创建、读取、修改和删除操作。
(2)domain属性是一个只读的字符串,它包含了载入当前文档的Web服务器的主机名。并且可以解决因同源安全策略带来的不同文档的属性共享问题。
(3)如果referrer属性不是通过超级链接访问当前文档的,则为null。它允许客户端通过
JavaScript访问HTTP引用头部。
(4)URL属性在一般情况下,它的值是与Window对象的location.href属性相同的。但是它在
URL重定向发生的时候,保存的是文档的实际URL,而location.href属性保存的是请求的URL。
4、document对象的方法具有以下几种:
(1)获取带有指定名称的对象集合的getElementsByName()方法。
(2)获取对拥有指定id的第一个对象的引用的getElementsById()方法。
(3)获取带有指定标签名的对象集合的getElementsByTagName()方法。
(4)向文档写入HTML表达式或JavaScript代码的write()方法。它只接受单个字符串作为参
数,但可以有多个参数(exp1,exp2,exp3,…),所有参数将按照顺序被追加到文档中。
(5)等同于write()方法,但要在每个表达式之后写一个换行符的writeln()方法。
(6)打开一个用来收集来自任何document.write()或document.writeln()方法的输出的流的
open()方法。
(7)关闭用document.open()方法打开的输出流,并显示选定的数据的close()方法。
注意:
(1)write()方法在文档载入和解析的时候,允许一个脚本向文档中插入动态生成的内容。
(2)我们通常按照两种方式使用write()方法:一是在使用该方法在文档中输出HTML;二是在调用该方法的窗口之外的窗口、框架中产生新文档。在第二种方式中,必须使用close()方法来关闭文档。
(3)getElementsByName()方法是查询元素的name属性,而一个文档中的name属性不是唯一
的,因此它返回的是一个数组。
(4)getElementsByTagName()方法返回元素的顺序是元素在文档中的顺序。我们要知道,传递
给getElementsByTagName()方法的字符串是可以不区分大小写的。
(5)当我们调用open()方法打开一个新文档并且用write()方法设置文档内容后,必须用close()
方法关闭文档,并迫使其内容显示出来。我们要注意,属于被覆盖的文档的一部分的脚本或事件
句柄不能调用open()方法,因为脚本或事件句柄自身也会被覆盖。
(6)close()方法会关闭用document.open()方法打开的文档流,并强制地显示出所有缓存的输
出内容。当我们使用write()方法动态的输出一个文档时,必须要调用close()方法,以确保所
有文档内容都能显示出来。当我们调用了close()方法后,就不可以再次调用write()方法,因
为这样会隐式的调用open()方法来擦除当前文档并打开一个新的文档。
认识HTML DOM
最新推荐文章于 2022-07-26 23:23:24 发布