JavaScript 浅谈DOM节点层次：Document类型

最新推荐文章于 2022-04-16 19:15:00 发布

MaiOvv

最新推荐文章于 2022-04-16 19:15:00 发布

阅读量618

点赞数 1

分类专栏： JavaScript 文章标签： HTML JavaScript Dom document

本文链接：https://blog.csdn.net/weixin_43960657/article/details/88993978

版权

JavaScript 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

浅谈DOM节点层次——Document类型

一、基本概念

1、Document类型

JavaScript通过Document这一节点类型来表示文档。Document类型可以表示HTML页面或者其他基于XML的文档。Document接口描述了任何类型文档的公共属性和方法。

2、HTMLDocument

HTMLDocument继承自Document类型，且根据HTML文档类型，定义了HTML专用的属性和方法，是Document接口的一个拓展。

3、doucument对象

document对象是HTMLDocument的一个实例，表示整个HTML页面的JS显示形式

document对象也是window对象的一个属性（即window.document属性），所以可以认为，doucument是一个全局对象。

4、Document节点特征

nodeType == 9 ; nodeName == "#document" ;

nodeValue == null; ownerDocument == null; parentNode == null ;

Document类型的构造函数和原型只能在部分浏览器中访问（除IE），而HTMLDocument则全部浏览器都可访问。

二、文档的子节点

两种访问子节点的快捷方式：

1、doucumentElement属性——始终指向<html>元素

var html = document.documentElement;

2、childNodes列表访问文档元素

var html = document.childNode[0];//取得对html的引用

var html = document.firstChild;  //结果同上

3、body属性——直接指向<body>元素

var body = document.body; //取得对body块的引用

4、其他：

1）document.doctype属性能够取得对<!DOCTYPE>的引用，因为浏览器对此属性的支持不一致所以用处受限。

2）浏览器在处理位于<html>标签外的注释也各不相同，所以外部的注释也没什么用处。

3）文档类型是只读的，且只有一个元素子节点

三、文档信息

document对象有一些Document对象所没有的属性，而这些属性提供了网页的一些信息，如

1、title属性——取得页面标题

var originalTitle = document.title;  //获取文档标题

document.title = "New page title.";  //设置文档标题

2、URL属性——包含页面完整的URL

百度URL：http://www.baidu.com

var url = document.URL;    //取得完整的URL

3、domain属性——包含页面的域名

百度域名：www.baidu.com

var domain = document.domain; //取得域名

1）如果一个URL包含一个子域名，可将其document.domain设置为相同值，则这两个页面就能互访对方的JS对象了。

2）若域名设置成松散的(baidu.com)，就不能再设置成紧绷的（www.baidu.com），会报错！

4、referrer属性——链接到当前页面的那个页面的URL

referrer翻译：推荐人、介绍人

var referrer = document.referrer;    //取得来源页面的URL

四、查找元素

1、getElementById( )方法——通过ID查找元素

若文档中有多个ID名相同的元素，则此方法只返回第一个出现此ID名的元素

var div = document.getElementById("ID名");  //ID名要严格匹配

2、getElementsByTagName( )方法——通过标签名查找元素

返回的是0或多个元素的NodeList,而在HTML文档中，则返回一个HTMLCollection对象，可以使用[ ]或item( )方法来访问,或者通过name特性取得集合的项。

注：DOM中，一切系统给我们生成的成组的东西基本上都是类数组

var images = document.getElementByTagName("img");  //取得所有img标签元素
var imageFirst = document.getElementByTagName("img")[0];//取得第一个img标签
var allElement = document.getElementByTagName("*") //取得文档中所有标签

alert(images.length);     //有几个图像元素
alert(images[0].src);     //第一个图像的src
alert(images.item(1).src);//第二个图像的src

var myImage = images.namedItem("myImage");//获得name=myImage的元素集合
var myImage = images["myImage"];          //同上

注：向[ ]中输入数值索引，就会调用item( );输入字符串索引，就会调用nameitem( );

3、getElementsByClass( )方法——通过class名查找元素（IE8以下没有）

4、getElementsByName( )方法——通过name查找元素

此方法也会返回一个HTMLCollection对象，最常用的是通过此方法取得单选按钮。

var radios = document.getElementsByName("color");//返回所有名为color的元素

5、用CSS的方法选择(IE8以下没有)

querySelector("div>span" )；选出一个

querySelectorAll( )；选出一组

注：但这两种方法是静态的，即只选择此时的，而不是随着增减动态的，所以不用这种方法。

五、特殊集合

以下集合为访问文档常用的部分提供了快捷键，他们都是HTMLCollection对象

1、document.anchors——所有带name特性的<a>元素

2、document.links ——所有带link特性的<a>元素

3、document.forms ——所有<form>元素

4、document.images ——所有<img>元素

六、DOM一致性检测

检测浏览器实现了DOM的哪些部分:document.implementation.hasFeature("要测的DOM功能名" , "版本号")

var hasXmlDom = doxument.implementation.hasFeature("XML","1.0")

七、文档写入

将输出流写入网页

1、write( )方法——接收一个字符串参数，不换行

2、writeln( )方法——接收一个字符串参数，在末尾换行

document.write("<strong>"+"你好吗"+"</strong>");//输出 你好吗

3、open( )方法和close( )方法——打开和关闭输出流

MaiOvv

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 浅谈DOM节点层次：Document类型

浅谈DOM节点层次——Document类型一、基本概念1、Document类型 JavaScript通过Document这一节点类型来表示文档。Document类型可以表示HTML页面或者其他基于XML的文档。Document接口描述了任何类型文档的公共属性和方法。2、HTMLDocument HTMLDocument继承自Document类型，且根据HTML文档...
复制链接

扫一扫