JavaScript中DOM知识汇总

文章共967个字 读完大约需要3分钟

DOM简介

DOM:Document Object Model

DOM学术名是“文档对象模型”,这个高端上档次的名称并不适合我们理解,简单来说,个人认为DOM其实是描述整个HTML页面中关系节点的图谱。在《JavaScript DOM编程艺术第二版》中,有对DOM的详细解释,有兴趣的可以去看下,这里我简单总结一下。

DOM中的“D”代表Document是文档的缩写,创建一个网页并把它加载到浏览器中,DOM就会产生,它把你编写的网页文档转化为一个文档对象。

DOM中的“O”代表Object是对象的缩写。在整个JavaScript中,对象分为用户定义对象,内建对象和宿主对象。

  • 1.用户自定义对象:由程序员创建的对象
  • 2.内建对象:JavaScript中自带的对象,如:Date,Array…
  • 3.宿主对象:由浏览器推荐的对象。

DOM中的“M”代表Model是模型的缩写,关于模型比较抽象,把它理解为族谱或者文档树可能会更加容易接受,如在网页中有这样一份文档,它的模型可以用如下图片来表示:
一个简单的HTML文档

DOM中常见的三种节点

其实族谱和文档树还可以用专业的术语来描述,我们把上图的关系网称之为“节点树”,关于节点,我们需要知道,在DOM常用的三种节点:

  • 元素节点:element node
    • 针对上面一份文档,元素节点就是其中的<body> <p> <ul> <li>…元素标签
  • 文本节点:text node
    • 文本节点就是其中的文字,也可以简单理解为显示在网页上的文字内容。
  • 属性节点:attribute node
    • <ul>标签有一个类名class的属性,我们称之为属性节点。

DOM中获取属性的方法

  • 1.document.getElementById(“Id”):通过元素的ID获取元素对象。
    • 1). 如果页面的ID重复了,将获取第一个元素
    • 2). 在IE6,7中,会把表单元素的name属性值当做ID来使用。
    • 3). 在IE6,7中,不区分ID的大小写。
    • 4). 获取范围(上下文)只能是document.

PS: 不要让表单元素的name和其他元素的id重复,不要用ID的大小写来区分不同的元素。

  • 2.document.getElementsByTagName(“标签名”):通过标签名来获取一组元素(类数组)。
  • 3.context.getElementsByName:通过元素name属性值来的值获取一组元素(类数组)。

PS: 在IE浏览器下,只能对表单元素有作用。

  • 4.context.getElementsByClassName(“类名”):不兼容,在ie6,7,8中会报错
  • 5.document.documentElement:获取html元素

    1
    2
    3
    4
    // 获取当前屏幕宽度。
    const curWidth= document.documentElement.clientWidth||document.body.clientWidth
    // 获取当前屏幕高度。
    const curHeight= document.documentElement.clientHeight||document.body.clientHeight
  • 6.document.querySelector();获取一个.

    1. document.querySelectorAll():获取多个、类数组集合.

DOM节点关系:

  • childNodes:获取元素所有的子节点。
  • children:获取元素的所有元素子节点。
  • parentNode:获取父亲节点。
  • previousSibling:获取上一个哥哥节点。
  • nextSibling:获取下一个弟弟节点。
  • firstChild:获取所有子节点中的第一个。
  • lastChild:获取所有子节点中的最后一个。

DOM中基本节点操作

  • 1.创建节点:createElement,createAttribute,createTextNode
  • 2.插入节点:appendChild,insertBefore还有一个没有DOM中不存在但是常用的insertAfter方法。
  • 3.替换节点:replaceChild
  • 4.复制节点:cloneNode
  • 5.删除节点:removeNode

DOM中对属性的基本操作:

  • 1.获取属性:getAttribute
  • 2.设置属性:setAttribute
  • 3.删除属性:removeAttribute

图解DOM

DOM大乱炖
备注:图片引用互联网,如有侵犯您的权利请联系博主,会在第一时间删除。

结语

JavaScript是由EMCAScript(核心)DOM(文档对象模型)BOM(浏览器对象模型)组成的,学好DOM对于JavaScript的学习至关重要。

推荐文章

-->