JavaScript Document类型

最新推荐文章于 2024-02-02 10:42:50 发布

mannuandeyangguang

最新推荐文章于 2024-02-02 10:42:50 发布

阅读量789

点赞数

分类专栏：前端开发文章标签： javascript

本文链接：https://blog.csdn.net/wujunlei1595848/article/details/90645680

版权

前端开发专栏收录该内容

73 篇文章 1 订阅

订阅专栏

文档的子节点

使用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();

mannuandeyangguang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript Document类型

文档的子节点使用documentElement属性快捷访问页面的<html>元素；使用body属性可以快捷的访问页面的<body>元素; doctype属性可在部分浏览器下访问文档的类型声明；各个浏览器对于文档声明的支持方式存在较大差异：IE8-:文档类型声明被解释为一个注释，当做comment节点，document.doctype返回值为null；大部分浏览器：...
复制链接

扫一扫