JavaScript节点操作

节点概述

网页中的所有内容都是节点(标签、属性、文本、注释),在DOM中,节点使用node来表示。

HTML DOM树中的所有节点均可通过JavaScript进行访问,所有HTML元素(节点)均可被修改,也可以创建或删除。

一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性

  • 元素节点nodeType为1

  • 属性节点nodeType为2

  • 文本节点nodeType为3(文本节点包含文字、空格、换行等)

我们在实际开发中,节点操作主要操作的是元素节点

节点层级

利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄层级关系

父级节点

node.parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        // 得到的是离元素最近的父级节点(亲爸爸)如果找不到父节点就返回为null
        erweima.parentNode;
  • parentNode属性可返回某节点的父节点,注意是最近的一个父节点
  • 如果指定的节点没有父节点则返回null

子节点

1.parentNode.childNodes

   console.log(ul.childNodes);

parentNode.childNodes返回包含指定节点的子节点的集合,该集合为即时更新的集合。

注意:返回值里面包含了所有的子节点,包括元素节点,文本节点等。

如果只想要获得里面的元素节点,需要专门处理。所以我们一般不提倡使用childNodes

 2.parentNode.children(重点)

   console.log(ul.children);

parentNode.children是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返回

3.parentNode.firstChild

   console.log(ol.firstChild);

firstChild返回第一个子节点,找不到则返回,包含所有的节点

4.parentNode.lastChild

   console.log(ol.lastChild);

lastChild返回最后一个子节点,找不到则返回,包含所有的节点

5.parentNode.firstElementChild

console.log(ol.firstElementChild);

firstElementChild返回第一个子元素节点,找不到则返回null。

6.parentNode.lastElementChild

   console.log(ol.lastElementChild);

lastElementChild返回最后一个子元素节点,找不到则返回null。

注意:这两个方法有兼容性问题,IE9以上才支持

实际开发的写法 既没有兼容性问题又返回

    console.log(ol.children[0]);
    console.log(ol.children[ol.children.length - 1]);

兄弟节点

1.node.nextSibling

   console.log(div.nextSibling);

返回当前元素的下一个兄弟节点,找不到则返回null。 包含所有的节点

2.node.previousSibling

   console.log(div.previousSibling);

返回当前元素上一个兄弟节点,找不到则返回null,包含所有的节点

3.node.nextElementSibling

   console.log(div.nextElementSibling);

返回当前元素下一个兄弟节点,找不到则返回null

4.node.previousElementSibling

   console.log(div.previousElementSibling);

返回当前元素上一个兄弟节点,找不到则返回null

有兼容性问题,IE9以上才支持

        function getNextElementSibling(element) {
            var el = element;
            while (el = el.nextsibling) {
                if (el.nodeType === 1) {
                    return el;
                }
            }
            return null;
        }

节点操作之创建和添加节点

document.createElement(‘tagName’)

document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在,是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。

1.node.appendChild(child)

node.appendChild()方法将一个节点添加到指定父节点列表末尾,类似于css里面的after伪元素

2.node.insertBefore(child,指定元素)

node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素

        // 创建节点元素
        var li = document.createElement('li');
        // 添加节点node.appendChild(child) node 父级 child是子级 后面追加元素 类似于数组中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3.添加节点node.insertBefore(child,指定元素);
        var lili = document.createElement('li')
        ul.insertBefore(lili,ul.children[0]);

 删除节点

node.removeChild(child)

node.removeChild()方法从DOM中删除一个子节点,返回删除的节点

       ul.removeChild(ul,children[0])

阻止链接跳转添加JavaScript:void(0);或者JavaScript:;

复制节点(克隆节点)

node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点

        var ul = document.querySelector('ul')

        var lili = ul.children[0].cloneNode();

        var lili = ul.children[0].cloneNode(true);

        ul.appendChild(lili);

注意:

1.如果括号参数为空或者为false,则是浅拷贝,即只克隆复制节点本省,不克隆里面的子节点。

2.如果括号参数为true,则是深度拷贝,会复制节点本身以及里面所有的子节点。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值