DOM操作js和jQuery操作元素对比

最新推荐文章于 2022-01-08 21:06:24 发布

清风白龙

最新推荐文章于 2022-01-08 21:06:24 发布

阅读量536

点赞数 1

分类专栏： DOM

本文链接：https://blog.csdn.net/qq_48784569/article/details/108012045

版权

DOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天主要写写关于js的dom操作和jquery操作元素的对比，主要从查改增删几个方面分析。
先看看js的节点信息：

节点名称	nodeName	nodeType	nodeValue
元素节点	标签名(大写)	1	null
属性节点	属性名称	2	属性值
文本节点	#text	3	文本内容
注释节点	#comment	8	注释内容
文档节点	#document	9	null

我们要操作的更多是元素节点：

1.获取节点对象

js：

方法	特点	返回值	兼容性
getElementById	根据id获取元素，唯一的	元素对象	都兼容
getElementsByTagName	根据标签名获取	HTMLCollection	都兼容
getElementsByClassName	根据类名获取	HTMLCollection	IE9+
getElementsByName	根据name属性获取	NodeList	都兼容
querySelector	根据选择器获取，多个只获取第一个	元素对象	IE8+
querySelectorAll	根据id获取元素，唯一的	NodeList	IE8+

NodeList 对象：NodeList是一个节点的集合(既可以包含元素和其他节点)
可以通过for (let i in myNodeList)，遍历的结果除了索引下标，还会固定地有length、item、entries、forEach、keys和values六个元素。
HTMLCollection：HTMLCollection 对象类似一个包含 HTML 元素的数组列表。
可以通过for (let i in myCollection)，遍历的结果除了索引下标，还会固定地有length、item和namedItem三个元素。
相同点：
都是类数组，都可以通过索引获取元素；都有length属性；非数组，无法使用数组的方法valueOf()、pop()、push()或join()
jq：
很简单：$(‘选择器’)

2.根据关系获取元素节点

js：

节点关系名	返回值	兼容性
parentElement	返回当前元素的父元素节点	IE9+(不建议使用)
parentNode	返回当前元素的父节点	都支持(建议使用)
children	返回当前元素的所有子元素节点，是亲儿子，孙子就不算了	IE9+返回元素节点，IE6到IE8返回元素和注释节点
firstElementChild	返回的是第一个元素节点	IE9+
lastElementChild	返回的是最后一个元素节点	IE9+
nextElementSibling	返回后一个兄弟元素节点	IE 不支持
previousElementSibling	返回前一个兄弟元素节点	IE 不支持

parentElement和parentNode区别：一般来说我们就用parentNode，因为它兼容性好，parentElement能做的它都能做到。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <div></div>
    <script>
        let div = document.querySelector('div');
        console.log(div.parentNode.parentNode.parentNode);//#document
        console.log(div.parentElement.parentElement.parentElement);//null
    
    </script>
</body>
</html>

jq：

筛选节点方法名	返回值
parent()	返回亲爸爸，上一级元素
children()	返回亲儿子，类似子代选择器，可以传参进一步筛选
find()	返回所有的后代元素，可以传参进一步筛选
siblings()	返回除自身外所有的兄弟元素
eq()	传参(number)表示这些元素第几个被获取
next()	返回该元素的下一个兄弟元素
prev()	返回该元素的上一个兄弟元素

3.创建元素节点

js：

createElement(“节点元素名称”)
innerHTML(“标签包裹的内容”)
document.write(“标签包裹的内容”)

这三种都可以创建标签，但第三种由于在load事件里添加会覆盖整个页面内容，不建议使用。
主要分析第一种和第二种创建节点的不同。其区别在于创建元素的性能比较：
首先是createElement：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>createElement性能</title>
</head>
<body>
    <script>
        console.time();
        for (var i = 0; i < 1000; i++) {
            var div = document.createElement('div');
            div.style.width = '100px';
            div.style.height = '2px';
            div.style.border = '1px solid red';
            document.body.appendChild(div);
        }
        console.timeEnd();
    </script>
</body>
</html>

结果：

然后我们再看innerHTML拼接的效率：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerHTML拼接性能</title>
</head>
<body>
    <script>
        console.time();
        for(var i = 0; i < 1000; i++) {
            document.body.innerHTML += '<div style="width:100px;height:2px;border:1px solid blue"></div>'
        }
        console.timeEnd();
    </script>
</body>
</html>

结果：
在这里插入图片描述
我们再看用数组方式，一次性用innerHTML追加到页面的效率：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>innerHTML数组性能</title>
</head>
<body>
    <script>
        console.time();
        var arry = [];
        for(var i = 0; i < 1000; i++) {
            arry.push('<div style="width:100px;height:2px;border:1px solid green"></div>');            
        }
        document.body.innerHTML = arry.join('');
        console.timeEnd();
    </script>
</body>
</html>

结果：
在这里插入图片描述
综上，用数组存储要添加的元素节点，然后用innerHTML一次性渲染到页面性能要更加好。
a
jq：
直接 $(‘标签和内容’)；例如：

$('<li>123</li>')

4.在位置上插入元素节点：

js：

ParentNode.appendChild(newNode)：将newNode(新创建的节点)追加到ParentNbode中
ParentNode.insertBefore(a,b)：向ParentNode中插入节点a，插入后a在b(b也是ParentNode内的节点)的前边
node.insertAdjacentHTML(‘参数’, ‘内容’)：
参数有四种：

	"beforebegin"：在该元素前插入
	"beforeend"：在该元素的子元素的最后插入 //重点
	"afterbegin"：在该元素的子元素的前面插入 //重点
	"afterend"：在该元素后插入

内容：可以是创建标签也可以是带标签的字符串，功能强大。
jq：

append()；在该元素的所有孩子最末尾插入
prepend()；在该元素的所有孩子最前面插入

5.删除节点：

js：

parentNode.removeChild(node)：在指定的父节点里面删除指定子节点，并返回被删除节点，相当于剪切
node.remove()：直接销毁自己，无参数和返回值

jq：

remove()；删除元素本身
empty()；删除元素的所有子节点(自身保留)

6.改变节点内容：

js：

node.innerHTML：获取该节点包含的所有标签和文本内容，表达式相当于可以创建节点元素和文本内容，一经创建，以前包含的所有内容将被覆盖(包括标签)
node.innerText：获取该节点包含的所有文本内容，表达式相当于可以添加文本内容，一经创建，以前包含的所有内容将被覆盖(包括标签)

jq：

html()：类似js中innerHTML，不过创建用参数传递
text()：类似js中innerText，不过创建用参数传递

7.克隆节点

js：
Node.cloneNode()：参数默认为false，只克隆标签，不复制文本内容，若参数为true，文本标签都会被克隆
jq：
clone()：参数默认为false，只克隆标签，不复制文本内容，若参数为true，文本标签都会被克隆

好了今天就写到这里了吧，完结撒花！！！

清风白龙

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM操作js和jQuery操作元素对比

今天主要写写关于js的dom操作和jquery操作元素的对比，主要从获增删几个方面分析。先看看js的节点信息：节点名称nodeNamenodeTypenodeValue元素节点标签名(大写)1null属性节点属性名称2属性值文本节点#text3文本内容注释节点#comment8注释内容文档节点#document9null我们要操作的更多是元素节点：1.获取节点对象方法特点返回值兼容性getEl
复制链接

扫一扫

专栏目录