Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
一、文档子节点
1、在document中有一个属性body,它保存的是body的引用(比通过childNodes列表访问的更快,更直接)
Var body = document.body;
2、Doucument.doucumentElement保存的是html根标签
Var html = document.documentElenmet;
3、Document.all 代表页面中的所有元素
var all = document.all;
(var all = document.getElementsByTagName(“*”))效果一样。
它返回一个数组
4、根据元素的class属性查询一组元素节点对象
GetElementsByClassNmae() 可以根据class属性值获取一组元素节点对象(类数组)
但是该方法 不支持IE8及以下浏览器。
5、documen.querySelector()
需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象
虽然IE8中没有getElementByTagName() 但是可以使用querySelector,他可以支持IE8.
使用该方法总会返回一个唯一的一个元素,如果满足条件的元素有多个,那么它会返回第一个。
6、documen.querySelectorAll()
该方法和querySelector()用法类似,不同的是他会将符合条件的元素封装到一个数组中。
即使符合条件的元素只有一个,他也会返回数组。
二、文档信息
1.document.title
可以取得当前界面的标题,也可以修改当前界面的标题并反映给浏览器的标题栏中。
console.log(document.title) //查看标题
document.title = "aqing" //修改标题
2.属性 URL、domain、referrer 都和网页请求有关。
URL属性包含完整的URL
domain属性中只包含了页面的域名。
referrer属性中保存着连接到当前页面的哪个页面的URL,在没有来源页面的情况下,referrer属性中可能会包含空字符串
三、查找元素
1.getElementById()
通过id属性来获取一个元素节点的对象
2.getElementsByTagName()
可以根据标签名来获取一组元素节点对象
这个方法会给我们返回一个类数组对象,所有查询到的元素都会在封装到对象
即使查询到的元素只有一个,也会封装到数组中返回。
3.getElementsByName()
通过name属性来获取一组元素节点对象。
这个方法会给我们返回一个类数组对象,所有查询到的元素都会在封装到对象。
即使查询到的元素只有一个,也会封装到数组中返回。
四、特殊集合
1、document.anchors
包含文档中所有带name特性的 a 元素
2、document.forms
包含文档中所有的元素,与documen.getElementByTagName(“form”)结果相同。
3、document.images
包含文档中所有的元素,与documen.getElementByTagName(“img”)结果相同。
4、document.links
包含文档中所带href特性的 a 元素
集合中的项也会随着当前文档内容的更新而更新
五、DOM一致性检测
hasFeature()
这个方法有两个参数:要检测的DOM功能的名称及版本号。如果浏览器支持给定的名称和版本的功能,则该方法会返回 true 。
console.log(document.implementation.hasFeature("XML", "1.0"));
六、文档写入
1、write()方法
定义和用法
write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。
可列出多个参数(exp1,exp2,exp3,…) ,它们将按顺序被追加到文档中。
语法
document.write(exp1,exp2,exp3,…)
说明
虽然根据 DOM 标准,该方法只接受单个字符串作为参数。不过根据经验,write() 可接受任何多个参数。
我们通常按照两种的方式使用 write() 方法:一是在使用该方在文档中输出 HTML,另一种是在调用该方法的的窗口之外的窗口、框架中产生新文档。在第二种情况中,请务必使用 close() 方法来关闭文档。
2、writeln() 方法
定义和用法
writeln() 方法与 write() 方法作用相同,外加可在每个表达式后写一个换行符。
3、open()方法
定义和用法
open() 方法可打开一个新文档,并擦除当前文档的内容。
语法
document.open(mimetype,replace)
参数 | 描述 |
---|---|
mimetype | 可选。规定正在写的文档的类型。默认值是 “text/html”。 |
replace | 可选。当此参数设置后,可引起新文档从父文档继承历史条目。 |
说明
该方法将擦除当前 HTML 文档的内容,开始一个新的文档,新文档用 write() 方法或 writeln() 方法编写。
提示和注释
重要事项:调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后,必须记住用 close 方法关闭文档,并迫使其内容显示出来。
注释:属于被覆盖的文档的一部分的脚本或事件句柄不能调用该方法,因为脚本或事件句柄自身也会被覆盖。
4、close() 方法
定义和用法
close() 方法可关闭一个由 document.open 方法打开的输出流,并显示选定的数据。
语法
document.close()
说明
该方法将关闭 open() 方法打开的文档流,并强制地显示出所有缓存的输出内容。如果您使用 write() 方法动态地输出一个文档,必须记住当你这么做的时候要调用 close() 方法,以确保所有文档内容都能显示。
一旦调用了 close(),就不应该再次调用 write(),因为这会隐式地调用 open() 来擦除当前文档并开始一个新的文档。
愿你的坚持终有收获。