html页面设置document类型,DOM-Document类型
Document类型
JavaScript通过Document类型表示文档。在浏览器中,document对象是HTMLDocument(继承自Document类型)的一个实例,document对象是window对象的一个属性,因此可以将其作为全局对象来访问。Document节点具有下列特征:
nodeType的值为9
nodeName的值为“#document”
nodeValue的值为null
parentNode的值为null
ownerDocument的值为null
其子节点可能是一个DocumentType、Element、ProcessingInstruction或者Comment
1、文档的节点
有两个内置的访问其子节点的快捷方式。第一个就是documentElement属性,该属性始终指向HTML页面中的元素。另一个就是通过childNodes列表访问文档元素,但通过documentElement属性更快捷
1 2
3 4 5 6 7 var html = document.documentElement;8 console.log(html === document.childNOdes[0]); //true9 console.log(html === document.firstChild); //true
document对象还有一个body属性,直接指向
元素。1 var body = document.body;
所有浏览器都支持document.documentElement和document.body属性
通常将标签看成一个与文档其他部分不同的实体,可以通过doctype属性来访问他的信息1 var doctype = document.doctype;
浏览器对document.doctype的支持差别很大
2、文档信息
作为HTMLDocument的一个实例,document对象还有一些标准的Document对象所没有的属性。其中第一个属性就是title,包含着
中的文本,可以修改当前页面的标题并反映在浏览器的窗口中1 //取得文档标题2 var originalTitle = document.title;3 //设置文档标题4 document.title = "New page title";
URL、domain和referrer都和页面的请求有关,URL属性中包含完整的URL(即地址栏中的URL)。domain属性中只包含页面的域名,而referrer属性中则保存着链接到当前页面的那个页面的URL。在没有来源页面的情况下,referrer属性中可能会包含空字符串。
URL和doamin属性是相互关联的。例如,如果document.URL等于http://www.wrox.com/WileyCDA/,那么document.domain就等于www.wrox.com。
在这三个属性中,只有domain属性可以设置。由于安全的方面的限制,如果URL中包含一个子域名,例如p2p.wrox.com,那么就只能将domain设置为"wrox.com"。
3、查找元素
Document类型提供了两个方法:getElementById()和getElementsByTagName()
getElementById(),接受一个参数:要取得元素的ID,如果找不到匹配的元素返回null,如果页面中有多个相同的ID,则返回第一次出现的元素。
getElementsByTagName(),接受一个参数即要取得元素的标签名,而返回的是包含零或多个元素的Nodelist。在HTML文档中,这个方法会返回一个HTMLCollection对象,作为一个“动态”集合,改对象与Nodelist非常类似。1 var images = document.getElementsByTagName('img');
这行代码会将一个HTMLCollection对象保存在images变量中。与Nodelist对象类似,可以使用方括号语法或item()方法来访问HTMLCollection对象中的项。而这个对象中元素的数量可以通过length属性取得。1 console.log(images.length);//输出图像的数量2 console.log(images.item(0).src);//输出第一个图像的src属性3 console.log(images[0].src);//输出第一个图像的src属性
HTMLCollection对象还有一个方法,叫做namedItem(),使用这个方法可以通过元素的name特性取得集合中的项1 2 var myImages = document.namedItem('myImages');
在提供按索引访问项的基础上,HTMLCollention还支持按名称访问项。而且对命名的项也可以使用方括号语法来访问,例如:1 var myimage = images['myImages'];
要想取得文档中的所有元素,可以向getElementsByTagName()中传入"*"。第一项是元素,第二项是
元素,以此类推。
第三个方法,也是只有HTMLCollection类型才有的方法,是getElementsByName()。这个方法会返回带有给定name特性的所有元素。最常是有这个方法的情况是取得单选按钮
4、特殊集合
document.anchors,包含文档中所有带name特性的元素,以此类推。
document.applets,包含文档中所有元素。
document.forms,包含文档中所有的
元素,与document.getElementsByTagName('form')得到的结果相同
document.images,包含文档中所有元素,与document.getElementsByTagName('img')得到的结果相同
document.links,包含文档中所有带href特性的元素。
这个特殊集合始终都可以通过HTMLDocument对象访问到,而且,与HTMLCollection对象类似,集合中的项也会随着当前文档内容的更新而更新。
5.DOM一致性检测
由于DOM分为多个级别,也包含多个部分,因此检测浏览器实现了DOM的哪些部分就十分必要了。document.implementation属性就是为此提供相应信息和功能的对象,与浏览器对DOM的实现直接对应。DOM1级只为document.implementation规定了一个方法,即hansFrature()。这个方法接受两个参数:要检测的DOM功能的名称以及版本号。如果浏览器支持给定的名称和版本的功能,则该方法返回true,例如:1 var hasXmlDom = document.implementation.hasFearure("XML",1.0);
6、文档的写入
有一个document对象的功能已经存在很多年了,那就是将输出流写入到网页中的能力。这个能力体现在下列4个方法中:weite()、writeln()、open()和close()。其中,write()和writeln()方法都接受一个字符串参数,即要写入到输出流中的文本。write()会原样写入,而writeln()则会在字符串末尾添加一个换行符(\n)。例如:
1 2
3 document.write() Example 4 5 6
The current data and time is: 7 10
11 12
此外还可以使用write()和writeln()方法动态的包含外部资源,例如JavaScript文件等。注意:不能像下面的例子那样直接包含字符串"",因为这会导致该字符串被解释为脚本块的结束,它后面的代码将无法执行。
1 2
3 document.write() Example2 4 5 6 "); 8 9 10
即使这个文件看起来没错,但字符串""将被解释为与外部的
1 2
3 document.write() Example2 4 5 6 9 10
前面的例子使用document.write()在页面被呈现的过程中直接向其中输出了内容。如果在文档加载结束后再调用document.write(),那么输出的内容将会重写整个页面。
1 2
3 document.write() Example 4 5 6
This is some context that you won't get to see because it will be overwritten.
7 12 13
等到页面完全加载之后延迟执行函数。函数执行之后,字符串"Hello world!"会重写这个页面内容
方法open()和close()分别用于打开和关闭输出流。如果是在页面加载期间使用write()或writeln()方法,则不需要用到这两个方法。
html页面设置document类型,DOM-Document类型相关推荐
- Javascript之DOM(Document类型)
JavaScript通过document类型表示文档.在浏览器中,document对象是HTMLDocument的一个实例,表示整个HTML页面.document对象是window对象的一个属性. D ...
- EI文献类型(Document Type)
作者在日常投稿EI 的时候常常好奇,为何同样是Ei Compendex检索收录, 还分不同EI文献类型(Document Type),到底都是怎么回事儿呢?为此,本文小编着重科普下EI文献类型,仅供大 ...
- html dom节点类型,浅谈Javascript中的12种DOM节点类型
前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...
- 深入理解DOM节点类型第一篇——12种DOM节点类型概述
前面的话 DOM是javascript操作网页的接口,全称为文档对象模型(Document Object Model).它的作用是将网页转为一个javascript对象,从而可以使用javascrip ...
- HTML DOM教程 14-HTML DOM Document 对象
HTML DOM教程 14-HTML DOM Document 对象 1:Document 对象 Document 对象代表整个 HTML 文档,可用来访问页面中的所有元素. Document 对象是 ...
- XML DOM 节点类型(Node Types)
实例 在下面的例子中,我们将使用 XML 文件 books.xml,以及 JavaScript 函数 loadXMLDoc(). 显示所有元素的节点名称和节点类型 显示所有元素的节点名称和节点值 节点 ...
- JavaScript Document对象DOM
Document对象 DOM 描述 每个载入浏览器的HTML文档都会成为Document对象 Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问 Document 对象是 Win ...
- Javascript之DOM(Element类型)
访问元素的标签名 1 2 3 4 <div id="myDiv">text</div> var div=getElementById("my ...
- JS魔法堂:那些困扰你的DOM集合类型
一.前言 大家先看看下面的js,猜猜结果会怎样吧! 可选答案: ①. 获取id属性值为id的节点元素 ②. 抛namedItem is undefined的异常 var nodes = documen ...
- DOM节点类型及其属性和方法
目录 一.DOM介绍 二.DOM节点 1.节点层级 2.节点类型 3.节点树 三.节点类型的属性和方法 1.Node类型 1.1 属性 nodeType nodeName nodeValue text ...
最新文章
- JAVA通信系列三:Netty入门总结(转)
- Monkey测试2——Monkey测试策略
- asp.net Forums 之HttpHandler和HttpModule
- IDEA直接跳转到方法的实现类快捷键
- 无刷电调_新款好盈XR10 PRO G2电调搭载XRAY T4车架简评
- java netty和dubbo_Dubbo与Netty杂谈
- 重新编译mysqld_exporter0.10
- UE4之vs2019IntelliSense错误
- Bytom矿池接入协议指南
- BZOJ2425: [HAOI2010]计数
- c51单片机编程实例c语言,C51单片机C语言编程基础和实例
- 工业机器人电气系统拆装实训平台
- java三大特征_java三大特性是什么?
- 【Windows 11】终端美化配置(优化)
- promise is not a constructor
- 读书笔记: Cartesian Impedance Control of Redundant and Flexible-Joint Robots, Section 1
- 大数据分析原地踏步 原来是分析工具面临信任问题
- 编程技巧│提高 Javascript 代码效率的技巧
- Java Class
- 程序猿必备的数电知识之(逻辑代数基础后半篇)
热门文章
- SPL spl_autoload_register 初体验 (转)
- mysql之存储引擎的选择
- 微信jssdk,实现多图上传的一点心得
- 重点:怎样正确的使用QThread类(注:包括推荐使用QThread线程的新方法QObject::moveToThread)...
- Git的冲突解决过程
- winform C#的委托事件在winform窗体中传值,也可用于刷新另一窗体(窗体A刷新窗体B)...
- 如何解决Silverlight InitializeError #2103 - Invalid or malformed application: Check manifest
- 刚才遇到了关于C#使用外部DLL函数上的char*的问题。
- was web 服务器性能测试,was web 服务器性能测试
- 使用VIA声卡 运行生化危机5无声音的解决方案 无需卸载旧驱动