JavaScript高级程序成绩（第四版）笔记 DOM-Document类型（一）

最新推荐文章于 2024-06-14 10:11:23 发布

Silent_crab

最新推荐文章于 2024-06-14 10:11:23 发布

阅读量71

点赞数

分类专栏： JavaScript 前端文章标签： javascript dom

本文链接：https://blog.csdn.net/silent_crab/article/details/119778077

版权

前端同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

JavaScript

13 篇文章 0 订阅

订阅专栏

建立两个文档
在这里插入图片描述

Document类型是js中表示文档结点的类型。
document是HTMLDocument的实例
顺便复习一下Object.getPrototypeOf，这个方法可以找到当前实例的原型

console.log(Object.getPrototypeOf(document));

控制台结果
在这里插入图片描述
Document类型的特征：

nodeType 9
nodeName #“document”
nodeValue null
parentNode null
ownerDocument null
子节点可以是DocumentType、Element、ProcessingInstruction或Comment类型

测试了几个

console.log(document.nodeName);
console.log(document.paraentNode);
console.log(document.childNodes);//[<!DOCTYPE html>, html]

在这里插入图片描述

document 可以使用Node的方法和属性，所以怀疑Node是document的原型，于是测试了一下

console.log(document instanceof(Node));//true

测试成功
在网上查资料，找到一张图，验证了结果。
在这里插入图片描述

再测试document里面，每个子节点的类型


for(i=0;i<document.childNodes.length;i++){
    console.log(document.childNodes[i].childNodes);
    console.log(document.childNodes[i].nodeType);
}

控制台结果
在这里插入图片描述
再对照下图表格，即document对象，现在有两个子节点，第一个子节点10，对应DocumentType类型，第二个序号1，对应Element类型

文档子节点
//使用documentElement能更快访问更直接地访问该元素
//使用documentElement和document.childNodes[序号]是同样的效果

html页面情况，加了几个注释document的子节点情况就和刚才不同了，注释也可以作为子节点Comment类型

<!DOCTYPE html>
<!--注释1-->
<!--注释1副本-->

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document学习</title>
</head>
<body>
<!--注释2-->
</body>
<script src="js03Document.js"></script>
</html>
<!--注释3-->

js代码

//使用documentElement能更快访问更直接地访问该元素
//使用documentElement和document.childNodes[0]是同样的效果
let ht = document.documentElement;
let childN=document.childNodes[3];
console.log(ht);
console.log(childN);
//获得对Body的引用
let body = document.body;
//获取会<!doctype>的引用
let doctype = document.doctype;

文档信息
title属性、URL、domain、referrer

//文档信息
//title属性，获得文档标题,也可以修改标题
let docTitle =document.title;
document.title='Newtitle';
console.log(docTitle);//Document学习
console.log(document.title);//Newtitle

//URL domain reference
//地址栏中的URL 包含页面的域名 链接到当前页面的URL
console.log(document.URL);//http://localhost:63342/htmlcsslearning01/javascriptlearning2/js03Document.html?_ijt=mpf04stk2svf92s5pu9e55r28j
console.log(document.domain);//localhost
console.log(document.referrer);//空字符串

Silent_crab

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级程序成绩（第四版）笔记 DOM-Document类型（一）

建立两个文档Document类型是js中表示文档结点的类型。document是HTMLDocument的实例顺便复习一下Object.getPrototypeOf，这个方法可以找到当前实例的原型console.log(Object.getPrototypeOf(document));控制台结果Document类型的特征：nodeType 9nodeName #“document”nodeValue nullparentNode nullownerDocument null子
复制链接

扫一扫