你真的知道DOM吗(中)----(Document类型, Element类型)

简介: 你真的知道DOM吗(中)----(Document类型, Element类型)

前言

      DOM(文档对象模型)是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树,允许开发人员添加,移除和修改页面的某一部分。可以说,DOM是前端开发中最重要的一个渲染API,它决定了页面的样式结构的走向。


正文

Document类型

      在浏览器中,document对象是HTMLDocument(继承自Document类型)的一个实例,表达整个HTML页面。而且,document对象是window对象的一个属性,因此可以将其作为全局对象来访问


文档子节点

document.documentElement: 指向HTML页面中的html元素

document.body: 指向HTML页面中的body元素

640.png

HTMLHtmlElement对象和HTMLBodyElement对象继承了HTMLElement接口,HTMLElement可以表示所有的接口


文档信息

      HTMLDocument的实例,相比标准的document对象还有一些所没有的属性。这些属性提供了document对象所表现的网页的一些信息。

  • title属性:包含着title标签中的文本,用于显示在浏览器窗口的标题栏或标签页上
  • URL属性:包含页面完整的URL(即地址栏中显示的URL)
  • domain属性:只包含页面的域名
  • referrer属性:保存着链接到当前页面的那个页面的URL
    640.png
          URL是当前页面地址;referrer是来源地址,即上一个访问页面的url的地址
          这里有个js跨域的问题稍微提一下,JavaScript的脚本必须在同一域名下才可以互相访问,也就是在document.domain相同的时候才可以互相访问,不然就会引起跨域访问失败的问题,所以很容易理解,直接修改document.domain让脚本之间的域名相同来实现通信便是js跨域的一个解决办法。这里我们不细谈这个问题,感兴趣的同学可以关注我后面的文章,会有相关关于跨域更多的介绍

查找元素

      因为这个比较常见了,大家应该都不陌生,所以就不多赘述了,下面给出相关方法的用法以及代码示例,大家可以结合代码示例自己体会理解一下

  • getElementById():通过元素id来查找对应元素,返回一个htmlElement对象
  • getElementsByTagName():通过元素标签名来查找对应元素,返回HTMLCollections对象
  • getElementsByName(): 通过元素name特性来查找对应元素,返回HTMLCollections对象
  • 640.png

文档写入


      document可以将输出流写入到网页中,这个能力体现在下面4个方法中:write(),writeln(),open(),close().

  • document.write():把输出流中的文本写入到网页中
  • document.writeln():在输出流中的字符串文本末尾添加一个换行符’\n’再写入到网页中
  • document.open():擦除当前HTML文档的内容,开始一个新的文档,新文档用write()方法或writeln()编写
  • document.close():关闭一个由document.open()方法打开的输入流

      有个要注意的问题,如果在文档加载结束后即页面被呈现之后再调用document.write().那么输出的内容会重写整个页面。


Element类型

      除了Document类型之外,Element类型就要算是Web编程中最常用的类型了,Element类型用于表现XML和HTML元素,提供了对元素标签字,子节点及特性的访问。要访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性,这两个属性会返回相同的值


640.png


HTML元素


      所有HTML元素都由HTMLElement类型表示,不是直接通过这个类型,也是通过它的子类型来表示。HTMLElement类型直接继承自Element并添加了一些属性。

  • id,元素在文档中的唯一标识符
  • title,有关元素的附加说明信息,一般通过工具提示条显示出来
  • lang,元素内容的语言代码
  • className,与元素的class特性对应,即为元素指定的css类

特性的相关方法

  • getAttribute()方法:获取特性
  • setAttribute()方法:设置特性
  • removeAttribute()方法:移除特性

document.getAttribute()

      有两类特殊的特性,它们虽然有对应的属性名,但属性的值与通过getAttribute()返回的值并不相同。

      第一类特性是style,getAttribute()访问时,返回的style特性值是css文本,而通过属性来访问它则会返回一个对象。

640.png

      第二类特性是像onclick这样的事件处理程序,如果是通过属性访问,返回的是一个js函数,如果是通过getAttribute()访问,则会返回相应代码的字符串

由于存在这些差别,在通过js以编程方式操作DOM时,开发人员经常不使用getAttribute(),而是只使用对象的属性。只有在取得自定义特性值的情况下,才会使用getAttribute()方法

document.setAttribute()

      用于设置特性,通过这个方法设置的特性名会被统一转换为小写形式

      所有特性都是属性,所以直接给属性赋值可以设置特性的值。但是为DOM元素添加一个自定义属性,该属性不会自动成为元素的特性。

640.png

document.removeAttribute()

      这个方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值,而且也会从元素中完全删除特性。

创建元素

      使用document.createElement()方法可以创建新元素,传入一个参数表示要创建的标签名,这个标签名在HTML文档中不区分大小写

var div = document.createElement('div');
• 1

元素的子节点

      元素可以有任意数目的子节点,元素的childNodes属性包含了所有的节点

640.png

       如果是在IE中解析,ul的childNodes有3个子节点,分别是3个li节点,如果是在其他浏览器,应该为3个li节点和4个文本节点(元素之间的空白

640.png

      如果像这样将空白符删除,那么所有的浏览器都会返回相同数目的子节点

小结

      1、document类型表示整个文档,是一组分层节点的根节点

      2、element节点表示文档中的所有HTML或XML元素,可以用来操作这些元素的内容和特性

      小伙伴们今天的学习就到这里了,如果觉得本文对你有帮助的话,欢迎转发,评论,收藏,点赞!!!

目录
相关文章
N..
|
6月前
|
XML JavaScript 数据格式
DOM编程中的Document对象
DOM编程中的Document对象
N..
62 0
|
6月前
|
JavaScript
怎么判断两个文档节点、网页元素(element)是否相同?判断两个DOM节点是否相等、相同的4种方法
怎么判断两个文档节点、网页元素(element)是否相同?判断两个DOM节点是否相等、相同的4种方法
|
6月前
|
XML JavaScript 数据格式
DOM中的节点分为哪几种几类型
DOM中的节点分为哪几种几类型
71 0
|
JavaScript 前端开发 API
DOM编程:Document Object Model
DOM编程:Document Object Model
|
6月前
|
JavaScript 前端开发 开发者
DOM节点类型
DOM节点类型
35 0
|
6月前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:什么是文档碎片(Document Fragment)?有什么作用?
JavaScript DOM 操作:什么是文档碎片(Document Fragment)?有什么作用?
251 0
|
6月前
|
JavaScript 测试技术
html2canvas将document DOM节点转换为图片,并下载到本地
html2canvas将document DOM节点转换为图片,并下载到本地
|
XML JavaScript 前端开发
你真的知道DOM吗(下)----(其他类型,DOM操作技术)
你真的知道DOM吗(下)----(其他类型,DOM操作技术)
48 0
你真的知道DOM吗(下)----(其他类型,DOM操作技术)
|
前端开发 JavaScript UED
前端祖传三件套JavaScript的DOM之事件的各种具体事件类型的键盘/文本
在前端开发中,JavaScript 中的 DOM 事件机制提供了丰富的功能和灵活的方式来处理各种事件。本文将介绍 JavaScript 中常见的键盘/文本事件类型,包括输入事件、按键事件和复制/剪切/粘贴事件。
136 0
|
JavaScript 前端开发 UED
前端祖传三件套JavaScript的DOM之事件的各种具体事件类型的焦点
在前端开发中,JavaScript 中的 DOM 事件机制提供了丰富的功能和灵活的方式来处理各种事件。本文将介绍 JavaScript 中常见的焦点事件类型,包括 focus、blur、focusin 和 focusout。
190 0