文档的子节点
- 使用documentElement属性快捷访问页面的<html>元素;
- 使用body属性可以快捷的访问页面的<body>元素;
- doctype属性可在部分浏览器下访问文档的类型声明;各个浏览器对于文档声明的支持方式存在较大差异:IE8-:文档类型声明被解释为一个注释,当做comment节点,document.doctype返回值为null;大部分浏览器:文档类型声明作为文档的第一个子节点,是一个DocumentType节点,可以通过document.doctype, document.childNodes[0], document.firstChild访问
<!DOCTYPE html> <html> <head></head> <body> </body> <script> console.log(document.doctype); // 输出: <!DOCTYPE html> console.log(document.childNodes[0]); // 输出: <!DOCTYPE html> console.log(document.firstChild); // 输出: <!DOCTYPE html> </script> </html>
-
各个浏览器对于<html>元素外的注释的解析方式不同,比如
<!--第一条注释--> <!DOCTYPE html> <html> <body> </body> <script> console.log(document.childNodes.length); // chrome输出: 3 </script> </html> <!--第二条注释-->
部分浏览器会为两个注释都建立注释节点,部分浏览器会忽略第二条,只为第一条创建注释节点,大部分浏览器现在回完全忽略第二条注释,比如这里的chrome。
文档信息
- title属性用于便捷读写title标签;
- URL属性只读,referrer属性只读;
- domain属性可读可写,但不能设置为当前URL中不包含的域,通过设置domain属性相同可实现框架间不同子域页面的JavaScript通信;
- document.domain只能往上级域名方向设置,设置为非上级域名会报错,不能设置为顶级域名; 使用document.domain实现跨父子域
查找元素
- getElementById()的注意事项;
- getElementByTagName() 方法返回的是HTMLCollection对象;
<!DOCTYPE html> <html> <body> <div>123</div> </body> <script> console.log(document.getElementsByTagName("div") instanceof HTMLCollection); // 输出:true </script> </html>
- HTMLCollection对象类似NodeList对象;
- HTMLCollection对象可以使用namedItem()方法通过元素的name取得特定的项,或者更简单的,直接方括号+name访问特定元素;
<!DOCTYPE html> <html> <body> <div name="123">123</div> </body> <script> var _div = document.getElementsByTagName("div"); console.log(_div.namedItem("123")); console.log(_div["123"]); </script> </html>
-
getElementsByTagName("*")可以获得文档中所有的元素[旧版本IE将注释(comment)实现为元素(Element),在IE中使用getElementsByTagName()查询会返回注释节点]
-
getElementsByName()常用于取得表单元素;
-
getElementByClassName()在IE8及以下不支持。
特殊集合
其他作为document对象属性的HTMLCollection对象:
document.anchors;
document.forms;
document.images;
document.links;
DOM一致性检测
浏览器实现DOM的范围有多有少,document对象属性docment.implementation是提供相应的信息和功能的对象,该对象在DOM1级的规范下规定了一个方法:hasFeature(),接受两个参数:要检测的DOM功能的名称和版本号,返回值为布尔值;
var hasXmlDom = document.implementation.hasFeature('XML', '1.0');
限制:只是检测支不支持(部分)DOM功能(并且浏览器厂商自己说了算),不一定遵守规范
文档写入
四个方法:write(str), writeln(str), open(), close()
- writeln()与write()的不同是会在字符串的末尾添加一个换行符"\n";
- write()和writeln()用于动态地包含外部脚本时,需要对</script>做转移处理,否则会导致字符串被解释为脚本块执行,后面的代码块无法执行;正确写法如下:
<script> document.write('<script type=\"text\/javascript\" src=\"file.js\"\">' + '<\/script>'); </script>
-
在文档加载结束后调用document.write()输出的内容会重写整个页面;
-
open()和close()分别用于打开和关闭网页的输出流;
-
最佳实践:避免使用document.write();