深入前端基础之DOM知识点

微冷的早上
201 阅读5分钟

前言

之前只是简单的学习了下dom元素的操作方法，但是并没有去往下深挖为啥dom知识点里面的一些细节，所以在公司项目开发的时候会有很多迷惑，为什么获取到dom对象的时候还可以再去调用获取元素的方法等等，然后在看一些前端知识的文章常常就是看不懂。所以趁着最近的时间再好好深入dom知识的细节。

dom元素

其实有时候我在想，我们通过getElementById时获取的为什么是一个对象，为什么不是一个元素或者HTML的东西呢。后面我去找了很多文章以及一些文档才大概清楚这流程

首先，我们在getElementById的时候获取的是一个元素，然后通过实例化对应的HTMLDiv或者其他系统提供的构造函数，就转换成我们看到的Dom对象，然后就继承放置在元素上面的一些操作方法。可以通过下图了解有相关的构造函数。

image.png

image.png

getEelemnetById和getElementByName是定义在Document.prototype上面，所以如果是在获取当前dom元素下面是发现不了这两个方法的。

image.png

image.png

image.png

所以可以通过当前dom元素获取它下面的dom元素，当然最特殊的就getEelemnetById和getElementByName，仅仅在Document上，其他获取节点的方法都可以在HTML的原型上可以找到。

比较有意思的是Document上面有两个属性是映射body和head的，它们被放置在Document原型下面，但是如果是通过自身去访问会报错，如果通过自己的实例去访问才可以。

image.png

image.png

节点属性和方法

节点的属性:

  • NodeName:节点名称，只读属性，而元素节点返回的是大写的字符串
  • NodeValue:节点值，这个只有属性节点、文本节点和注释节点才有这个值，而元素节点是访问不到值的。
  • NodeType:节点类型，返回的是数字。元素节点为1，属性节点为2，文本节点为3，注释节点为4，document为9，DocumentFragment为11.
  • Attribute:是属性集合，getAttributeNode()可以获取到属性节点，也可以通过value和nodeValue来获取属性节点的值 节点方法:
  • hasChildNodes:判断节点是否有子节点,返回Boolean
  • hasChildren:判断节点是否有子元素,返回Boolean。和上面不同的是返回的是元素而不是文本节点。

遍历节点树/元素树

遍历树就是找他们的父节点、子节点以及兄弟节点，而元素节点树和节点树是差不多的方法，所以就放到一起去写了。

有关父节点的操作

  • appendChild: 这个方法是放在Node的原型上的 不仅可以增加节点还可以剪切节点。参数必须是节点或者dom元素。
  • removeChild:移除父节点下面的子节点，返回被移除的子节点。但是这个并没有销毁内存的dom对象，需要使用remove这个方法才是移除并销毁子节点。
  • replaceChild：替换子节点，第一个参数为替换的节点，第二个参数为被替换的节点。
  • childNode：返回子节点的数组，在IE5是兼容的，但是在非标准浏览器是不会返回非法嵌套的节点。可以通过判断节点的NodeType来筛选元素节点。
  • children：返回子元素列表。IE9一下不兼容这个方法，可以封装childNode也可以实现这个方法。
  • firstChild:返回第一个子节点，lastChild：返回最后一个子节点。
  • firstElementChild:返回第一个子元素节点，lastElementChild:返回最后一个子元素节点。IE9以下不支持
  • insertBefore:第一个参数是插入的节点，第二个是被插入的节点。在父节点的子节点前面插入一个节点。

有关子节点的操作

  • parentNode：返回父节点，最上面的父元素是document。IE5以下不兼容。
  • parentElement:返回父元素节点，最上面的父元素是HTML，IE9以下不兼容。

兄弟节点的操作

  • nextSilbling: 返回下一个兄弟节点 、nextSilblingElement:返回下一个兄弟元素节点。
  • previousSibling:返回上一个兄弟节点 、previousSiblingElement:返回上一个兄弟元素。

Dom操作

获取Dom元素

  • getElementsByName：通过标签上面的name属性来获取dom元素，但是IE8以下有name的属性才可以使用，当然如果自己指定name的话也是可以通过这个方法获取dom元素。返回的是dom元素数组
  • getElementsByTagName:这个是通过标签名来获得dom元素，返回的是dom元素数组。IE4以下不兼容。
  • getElementsByClassName:通过类名获取dom元素，也是返回的是一个数组。IE8以下没有该方法。
  • querySelector: HTML5正式引入的一个api，可以通过类似css选择器的方法来获取元素，返回的是满足条件的第一个元素。IE7可以使用该方法。
  • querySelectorAll: 和上面一样，但是这个是获得所有满足条件的类数组。
  • getElementById:通过id来获取元素，但是IE8的时候id不区分大小写，然后还可以通过name获取dom元素，返回的是一个dom元素，IE5以下不兼容这个方法。 在上面的方法中，querySelector、querySelectorAll有两个很严重的缺点，就是第一个他们的性能很低，第二个就是他们的结果都是不实时的，储存的值类似一个片段而不是一个节点组合，所以在很多时候如果删除节点后再去获取的时候会发现和原来没删除的结果是一样的。

创建dom元素

  • createElement：创建一个dom元素。

其他操作

  • innerHTML: 插入一个元素节点，会覆盖里面的内容。
  • innerText：在文本节点插入一个字符串值。
avatar
文章
阅读
粉丝