原生JS操作DOM的方法

最新推荐文章于 2022-11-23 14:27:08 发布

一只刚入门的YX

最新推荐文章于 2022-11-23 14:27:08 发布

阅读量1.3k

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/weixin_47735939/article/details/112828239

版权

本文详细介绍了原生JavaScript操作DOM的各种方法，包括创建元素、处理节点关系、元素选择、属性操作、事件处理以及获取计算后的元素值。重点讨论了如createElement、appendChild、removeChild、replaceChild等操作，并提到了querySelector、querySelectorAll等选择器方法，同时讲解了事件绑定与阻止默认行为，以及获取元素定位的相关计算值。

摘要由CSDN通过智能技术生成

前言

现在框架应用比较广泛，封装了DOM操作操作，但是DOM是前端‘攻城狮’的基础，必备的知识，只会VUE不懂得DOM操作前端‘攻城狮’，不会太长久

DOM

JavaScript操作网页的接口，全称为“文档对象模型(Document Object Model)。 有这几个概念：文档、元素、节点
整个文档是一个文档节点
每个标签是一个元素节点
包含在元素中的文本是文本节点
元素上的属性是属性节点
文档中的注释是注释节点

DOM树结构

DOM树是结构，树是由DOM元素和属性节点组成的，DOM的本质是把html结构化成js可以识别的树模型；
有了树模型，就有了层级结构，层级结构是指元素和元素之间的关系父子，兄弟。

下图为html结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

如上代码DOM结构就像一棵倒着生长的树木，
什么？？看不出来？？好我们来张图看看
在这里插入图片描述
现在看着像不像一棵倒着的生长的树

DOM操作

所有的DOM操作无非就是增删改查，下面我们来说说原生JS的增删改查
1.创建元素
创建元素：document.createElement()

使用document.createElement()可以创建新元素。这个方法只接受一个参数，即要创建元素的标签名。这个标签名在HTML文档中不区分大小写，在XHTML中区分大小写。

var div = document.createElement("div");

使用createElement()方法创建新元素的同时，也为新元素设置了ownerDocument属性，可以操作元素的特性。

div.id = “myDiv”;
div.className = “div1”;
此时，新元素尚未被添加到文档树中，因此设置各种特性均不会影响浏览器的显示。要添加到文档树，可用appendChild()、insertBefore()、replaceChild()。（稍后讲到）

document.body.appendChild(div);

当把元素添加到文档树中后，这个元素做的任何修改都会实时地反应到浏览器中。

在IE中可以为createElement()方法传入完整的元素标签和属性。(只在IE中兼容)

var div = document.createElement("<div id=\"mydiv\" class=\"div1\"></div>");

不能再标签里加其他元素节点或者文本节点，如下的方式和上面的得出的节点一样

var div = document.createElement("<div id=\"mydiv\" class=\"div1\">12212</div>");

创建文本节点：document.createTextNode

使用document.createTextNode()来创建文本节点，这个方法接受一个参数：要插入节点的文本。与设置已有文本节点的值一样，作为参数的文本将按照HTML或XML的格式进行编码。

document.createTextNode("121212");

可以添加多个文本节点。假如两个文本节点时相邻的同胞节点，那么两个文本节点会连起来，中间不会有空格。

2.节点关系
（IE9以前不将换行和空格看做文本节点，其他浏览器会）

文本关系如下：

<div id="div1">
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
</div>

父节点：parentNode

parentNode是指定节点的父节点.一个元素节点的父节点可能是一个元素(Element )节点,也可能是一个文档(Document )节点,或者是个文档碎片(DocumentFragment)节点.
每一个节点都有一个parentNode属性。

对于下面的节点类型: Attr, Document, DocumentFragment, Entity, Notation,其parentNode属性返回null。如果当前节点刚刚被建立,还没有被插入到DOM树中,则该节点的parentNode属性也返回null。

<script type="text/javascript">
    var child2 = document.getElementById("div2");
    var parent = child2.parentNode;
</script>

子节点：childNodes

childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合（live collection）。
即时更新就是对节点元素的任意修改都会立即反映到结果里。

<script type="text/javascript">
    var child2 = document.getElementById("div2");
    var parent = child2.parentNode;
    var allChilds = parent.childNodes;
    console.log(allChilds.length) // IE下是3，其他浏览器是7
    
    var nodeAdd = document.createElement("div");
    var textAdd = document.createTextNode("这是添加的文本节点");
    nodeAdd.appendChild(textAdd);
    parent.appendChild(nodeAdd);
    console.log(allChilds.length);// IE下是4，其他浏览器是8
</script>

兄弟节点：nextSibling，previousSibling

nextSibling返回某节点的下一个兄弟节点，previousSibling返回某节点的上一个兄弟节点，没有的话返回null。
注意：可能因为元素换行的原因返回的是text节点。

<script type="text/javascript">
    var child3 = document.getElementById("div3");
    var next = child3.nextSibling;
    var previous = child3.previousSibling;
    console.log(next); // IE下返回div4，其他返回text
    console.log(previous)  // IE下返回div2，其他返回text
</script>

第一个或最后一个子节点：firstChild、lastChild

firstChild返回node的子节点中的第一个节点的引用，没有返回null
lastChild返回node的子节点中的最后一个节点的引用，没有返回null

<script type="text/javascript">
    var child3 = document.getElementById("div3");
    var parent = child3.parentNode

最低0.47元/天解锁文章

一只刚入门的YX

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫