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
  可以取得当前界面的标题,也可以修改当前界面的标题并反映给浏览器的标题栏中。

1
2
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 。

1
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() 来擦除当前文档并开始一个新的文档。



愿你的坚持终有收获。