原生 DOM 的操作回顾

fengjiangjun
791 阅读4分钟

毕业生求职中，有坑联系~

【github】 【个人简历】

引言

现在有很多 MVVM 框架，已经极大的改变了前端的开发模式，比如 React、Vue，我们只需要操作数据，视图就能自动随着数据的改变而改变，无需我们操作 DOM，虽然如此，但是作为一个前端开发工程师，我们还是有必要深刻掌握基本的 DOM 操作的，也许我们未来的某个时间，我们也能写一个类似框架也说不定呢？但是前提一定是我们必须掌握这种基本操作。

接下来，我带领大家重新温习一下基本 DOM 操作。

创建

常用的节点类型有如下几种：元素节点、属性节点、文本节点、注释节点。

话不多说，接下来带带大家温习一下基本操作方法。

  • 元素节点

创建一个div。

var div = document.createElement('div');
cnosole.log(div);
  • 属性节点

属性节点包含两类，一类是DOM元素的基本属性，还有一类是自定义属性。

基本属性既可以通过如下方式设置，也可以通过 createAttribute 方式设置。

document.body.id = 'container';

注意：自定义属性是一定要使用 createAttribute 方式来创建的。

比如创建一个自定义属性 custom 。

var dataAttribute = document.createAttribute('custom');
cnosole.log(dataAttribute);
  • 文本节点

创建一个内容为“大家好”的文本节点

var textNode = document.createTextNode('大家好');
console.log(textNode);
  • 注释节点

创建一个内容为“这一个标签”的注释节点

var comment = document.createComment('这是一个标签');
console.log(comment);

查找

  • id 属性查找

查找拥有指定id的第一个元素节点。

例如我们查找一个id属性值为“id”的元素。

var id  = documentElementById('id');
console.log(id);
  • class属性查找

查找所有带有class指定属性值的元素。

例如我们查找class属性值为“class”的元素。

var className = document.getElementsByClassName('class');
console.log(className);
  • 标签名查找

查找所有指定标签名的元素，例如我们查找标签名为div的元素。

var tag = document.getElementsByTagName('div');
console.log(tag);
  • name属性查找

查找所有指定name属性值的元素，例如我们查找name属性值为name的元素。

var name = document.getElementsByName('name');
console.log(name);

  • css 选择器查找

    • 查找第一个指定css选择器的元素。

      例如我们查找css选择器为#id的元素。

        var selector = document.querySelector('#id');
    console.log( selector);

    • 查找所有指定css选择器的元素。

      例如我们查找css选择器为#id的元素。

        var selectors = document.querySelectorAll('#id');
    console.log(selectors);

替换

  • 替换元素

创建一个新节点替换父元素已有的节点。

例如我们把id属性值span的span标签替换成p标签。

var newElement = document.createElement('p');
var span = document.getElementById('span');
//查找被替换元素的父元素。
var parent = span.parentNode;
//替换旧元素为新元素，返回值是被替换掉的旧元素。
var replace = parent.replaceChild(newElement, span);

删除

  • 删除元素节点

    删除父元素中的一个子节点。

    例如我们删除 body 元素下 id 属性值为 id 的元素。

    var div = document.getElementById('id');
document.body.removeChild(div);

    也可以直接删除，谁调用删除谁。

    var div = document.getElementById('id');
div.remove();

  • 删除属性节点

    删除属性节点，无返回值。

    例如我们删除 id 属性值为 id 的元素中 class 属性。

    var div = document.getElementById('id');
div.removeAttribute('class');

    删除属性节点，有返回值。例如我们删除 id 属性值为 id 的元素中 class 属性。

    var div = document.getElementById('id');
var attribute = div.getAttributeNode('class');
div.removeAttributeNode(attribute);

插入

  • 在父节点的最后一个子节点后面插入新的节点

    例如我们创建一个新节点插入到 body 节点中。

    var newNode = document.createElement('div');
document.body.appendChild(newNode);

  • 在指定元素节点之前插入一个新元素节点。

    例如我们在 id 属性值为 id 的元素前面添加一个新元素。

    var newNode = document.createElement('div');
var div = document.getElementById('id');
document.body.insertBefore(newNode, div);

  • 在指定元素中添加一个属性节点，如果元素中已有该属性改变属性值。例如我们在 id 属性值为 id 的元素中添加一个属性名为 class 的属性节点。

    var div = document.getElementById('id')
div.setAttribute('class', 'white');//第一个参数属性名，第二个参数属性值。

结语

以上就是 DOM 操作的常用方法，希望本文能让大家重新了解基本的 DOM 操作。

之后，我会带来一系列的文章，来讲解 React 是如何利用这些 DOM 操作进行视图更新的。

avatar
文章
阅读
粉丝