文档的子节点

使用documentElement属性快捷访问页面的元素；
使用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>

各个浏览器对于元素外的注释的解析方式不同，比如

<!--第一条注释-->
<!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()

mannuan

Search

Categories

Document类型