js——Document类型（三)

时间 2019-11-12

标签 document 类型栏目 JavaScript 繁體版

原文原文链接

DOM中的Document类型

Js经过Document表示文档类型。javascript
document对象是HTMLDocument的实例，HTMLDocument继承自Document类型。html

document对象是window对象的一个属性。java
Document与Node的关系：node

Js中因此节点类型都继承自Node类型，节点类型都享有共同的·基本属性和方法chrome
Document节点具备如下特征：浏览器
1. nodeType的值为9
2. nodeName的值为“#document"
3. nodeValue、parentNode、ownerDocument的值为null
4. 其子节点多是一个DocumentType,Element,或ProcessingInstrucion,Comment

1.文档子节点

Document子节点多是一个DocumentType,Element,或ProcessingInstrucion,Commentdom

（1）Document节点访问Element子节点的方式有两种：this

documentElement属性，该属性始终指向HTML页面的url

经过childNodes列表也能够访问文档元素code

var html=document.documentElement;
alert(html);//[object HTMLHtmlElement]
alert(document.childNodes[1]);//[object HTMLHtmlElement]
alert(html===document.childNodes[1]);//true

doucment还有body属性，指向元素。

window.onload=function(){
            document.body.style.backgroundColor = "yellow";//须要事件触发
        }

（2）Document节点访问DocumentType子节点的方式:

一般将<!DOCTYPE>标签当作一个与文档不一样的实体

document.childNodes[0]

document.doctype属性

alert(document.childNodes[0]);//[object DocumentType]
alert(document.childNodes[0]===document.doctype);//true

浏览器对document.doctype属性的支持不一致

（3）对于标签外的注释，不一样的浏览器处理的方式多是不一样的

<!--这里是注释-->
<html>
<body>
....
</body>
</html>
<!--这里是注释-->

这个页面看起来一个有两个子节点：注释，元素，注释。可是在浏览器中有不一样处理方式。有的可能忽略注释，有的可能只为第一个注释创造节点，有的会将这两种注释都当作节点。

2.文档信息

document做为HTMLDocument的实例，有一些Document没有的属性

title属性：获取内的标题</p>
```
document.title="new page title"
```
URL属性：包含页面完整的url
domain属性：包含页面的域名，只有domain可设置，但不能将其设置为URL不包含的域

referrer属性：保存着连接到当前页面的那个页面的url,在没有来源页面的状况下，referrer可能会包含空字符串。

var url=document.URL;
alert(url);
var domain=document.domain;//只有domain可设置
alert(domain);
var referrer=document.referrer;
alert(referrer);

3.查找元素

（1）getElementById(元素的id)

若是不存带相应id的参数则会返回null，若是有多个元素带相同的id，则返回文档中第一次出现的元素

(2) getElementByTagName():接收一个参数，即要获取的元素标签名，返回的就是包含0或多个元素的NodeList。在html文档中，会返回一个与NodeList类似的”动态“集合HTMLCollection。

HTMLCollection对象有一些方法和属性：

length属性
item()方法：访问对象中的项，传入索引值，和[ ]用法相似

namedItem()方法：经过元素的name特征取得项，传入name特征名

<img src="1.jpg" name="myPic">
...
var images= getElementByTagName("img");
var myPic=images.namedItem("myPic");

要获取文档全部的元素，能够向getElementByTagName()中传入“*”，这样返回HTMLCollection就包含整个页面的全部元素，并按出现的前后顺序排序。

（3）getElementByName()：该方法只有HTMLDocument才有，这个方法会返回全部给定name特性的元素。

4.特殊集合

这些都是HTMLCollection对象为访问文档经常使用部分提供的快捷方式

document.anchors:文档中全部带name特性的标签

document.images:文档中全部img标签

document.links:文档中全部带href特性的标签

5.DOM一致性检测

因为DOM有多个级别和部分，因此须要检测浏览器实现了DOM的哪些部分。

document.implementation属性为此提供了相应的信息和功能对象。

document.implementation.hasFeature():接收两个参数，要检测的DOM功能名称和版本号。若是浏览器支持就返回true.
```
alert(document.implementation.hasFeature("CSS","1.0"));//chrome中true
```

hasFeature的缺点：

实现这能够自行决定是否与DOM规范部分保持一致。因此除了hasFeature检测外，还可使用能力检测。

6.文档写入

将输出流写入网页中，有四种方法：write(),writeln(),open()和close()。每个都接收一个字符串参数，即要写入输出流的文本。

<body>
<p>this time is:</p>
<script type="text/javascript">
    document.write("<b>"+(new Date()).toString()+"</b>");
</script>
</body>

writeln()方法会比write()方法的后面多加“\n"。

若是在文档加载结束后调用document.write，那么输出内容将重写整个页面

<body>
<p>this time is:</p>
<script type="text/javascript">
    
window.onload=function(){
document.write("<b>"+(new Date()).toString()+"</b>");
    }
    
</script>

</body>

open()和close()分别用于打开和关闭网页输出流。

function createNewDoc()
  {
  var newDoc=document.open("text/html","replace");
  var txt="<html><body>Learning about the DOM is FUN!</body></html>";
  newDoc.write(txt);
  newDoc.close();
  }

1. Document类
2. JS window与document
3. js window.onload && $(document).ready()
4. DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型
5. js的类型转化三两事儿
6. js基础（三）数据类型转换
7. 33 个 js 核心概念（三）：值类型与引用类型
8. js Set类型
9. js类型
10. js数据类型分类
更多相关文章...
• C# 数据类型 - C#教程
• C# 类型转换 - C#教程
• Kotlin学习（二）基本类型
• RxJava操作符（三）Filtering