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

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

节点名称nodeNamenodeTypenodeValue
元素节点标签名(大写)1null
属性节点属性名称2属性值
文本节点#text3文本内容
注释节点#comment8注释内容
文档节点#document9null

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

1.获取节点对象

js:

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

NodeList 对象:NodeList是一个节点的集合(既可以包含元素和其他节点)
可以通过for (let i in myNodeList),遍历的结果除了索引下标,还会固定地有length、item、entries、forEachkeys和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:

  1. createElement(“节点元素名称”)
  2. innerHTML(“标签包裹的内容”)
  3. 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:

  1. ParentNode.appendChild(newNode):将newNode(新创建的节点)追加到ParentNbode中
  2. ParentNode.insertBefore(a,b):向ParentNode中插入节点a,插入后a在b(b也是ParentNode内的节点)的前边
  3. node.insertAdjacentHTML(‘参数’, ‘内容’)
    参数有四种:
	"beforebegin":在该元素前插入
	"beforeend":在该元素的子元素的最后插入 //重点
	"afterbegin":在该元素的子元素的前面插入 //重点
	"afterend":在该元素后插入

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

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

5.删除节点:

js:

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

jq:

  1. remove();删除元素本身
  2. empty();删除元素的所有子节点(自身保留)

6.改变节点内容:

js:

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

jq:

  1. html():类似js中innerHTML,不过创建用参数传递
  2. text():类似js中innerText,不过创建用参数传递

7.克隆节点

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

好了今天就写到这里了吧,完结撒花!!!

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值