Dom Api之节点操作

程序员文章站 2022-04-01 12:19:23

Dom中,标签元素、属性、标签文本、注释等都可以属于节点,分别称为元素节点、属性节点、文本节点、注释节点,下面看一下和节点操作相关的api:搭建基本界面:

Dom中,标签元素、属性、标签文本、注释等都属于节点,分别称为元素节点、属性节点、文本节点、注释节点,下面看一下和节点操作相关的api:

搭建基本界面:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>node</title>
    <style>
        .content-box {
            width: 450px;
            height: 700px;
            background-color: pink;
            margin: 0 auto;
            text-align: center;
            overflow: hidden;
        }
        
        .c-title {
            text-align: center;
        }
        
        .item {
            display: inline-block;
            margin-top: 20px;
            text-align: left;
        }
        
        .content .c-item {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="content-box">
        <div class="content" name="c-name">
            <!-- 这是一条么得感情的注释 -->
            <div class="item">
                <h3 class="c-title">虞美人·春花秋月何时了</h3>
                <div class="c-item">春花秋月何时了，往事知多少？</div>
                <div class="c-item">小楼昨夜又东风，故国不堪回首月明中！</div>
                <div class="c-item">雕栏玉砌应犹在，只是朱颜改。</div>
                <div class="c-item">问君能有几多愁？恰似一江春水向东流。</div>
            </div>
        </div>
    </div>
</body>

</html>

1.元素节点.

let content = document.querySelector('.content');
console.dir(content);

我们平时获取到的标签元素,就是元素节点,这里有3个关键属性:nodeType、nodeName、nodeValue.元素节点的nodeType是1.

Dom Api之节点操作

2.属性节点.

//获取content盒子
let content = document.querySelector('.content');
// 获取class属性节点
let classAttrNode = content.getAttributeNode('class');
console.dir(classAttrNode);
//获取name属性节点
let nameAttrNode = content.getAttributeNode('name');
console.dir(nameAttrNode);

属性节点可以通过元素节点调用getAttributeNode(属性名称)来获取到,它对应的nodeType为2.自带属性和自定义属性都可以获取到.

Dom Api之节点操作

3.文本节点和注释节点.

//获取content盒子
let content = document.querySelector('.content');
//打印content所有子节点
console.log(content.childNodes);

我们可以通过元素节点的childNodes来获取元素下的子节点,包括元素节点、文本节点、注释节点:

Dom Api之节点操作

文本节点对应的nodeType是3,上面对应的是我们代码中的缩进空格:

Dom Api之节点操作

注释节点对应的nodeType是8.

4.获取父节点.

获取父节点有两种方法,元素节点.parentNode和元素节点.parentElement两种,前面的是获取父节点,后一个是获取父元素节点:

//获取content盒子
let content = document.querySelector('.content');
//打印content的父节点和父元素节点
console.dir(content.parentNode);
console.dir(content.parentElement);

//打印html的父节点和父元素节点
console.dir(document.documentElement.parentNode);
console.dir(document.documentElement.parentElement);

对于content元素来说,它的父节点就是元素节点,所以它的parentNode和parentElement相同;

对于html标签来讲,它的父节点是document节点,不是元素节点,nodeType为9,所以它的父元素节点为null.

Dom Api之节点操作

5.获取子节点.

//获取content盒子
let content = document.querySelector('.content');
//打印content的子节点和子元素节点
console.log(content.childNodes);
console.log(content.children);
//获取content的第一个子节点和第一个子元素节点
console.dir(content.firstChild);
console.dir(content.firstElementChild);
//获取content的最后一个子节点和最后一个子元素节点
console.dir(content.lastChild);
console.dir(content.lastElementChild);

Dom Api之节点操作

对于获取节点和元素节点分别有对应的api,childNodes获取的是子节点,children获取的是子元素节点,所以这里获取的是div盒子;同样,firstChild和lastChild获取的是节点,而firstElementChild和lastElementChild获取的只是元素节点.

5.获取兄弟节点.

//获取content盒子
let content = document.querySelector('.content');
//获取content的第一个子节点
let firstNode = content.firstChild;
//firstNode的下一个兄弟节点
console.dir(firstNode.nextSibling);
//firstNode的上一个兄弟节点
console.dir(firstNode.previousSibling);

Dom Api之节点操作

由于第一个子节点没有上一个节点啦,所以这里previousSibling为null.

6.创建节点.

//获取content盒子
let content = document.querySelector('.content');
//获取content的第一个子节点
let firstNode = content.firstChild;
//创建一个div标签
let newDiv = document.createElement('div');
//创建一个文本节点
let newTextNode = document.createTextNode('new div');
//把文本节点添加到newDiv中
newDiv.appendChild(newTextNode);
//把newDiv添加到firstNode之前
content.insertBefore(newDiv, firstNode);

Dom Api之节点操作

createElement是创建元素节点;createTextNode是创建文本节点.
创建完毕后需要把它添加到指定节点下,appendChild会把新节点添加到所有的子节点后面;insertBefore(newNode, childNode)会把新节点放到指定子节点之前.

7.删除节点.

//获取content盒子
let content = document.querySelector('.content');
//获取content的第一个子节点
let firstNode = content.firstChild;
//创建一个button
let btn = document.createElement('button');
//创建一个文本节点
let newTextNode = document.createTextNode('delete btn');
//把文本节点添加到button中
btn.appendChild(newTextNode);
//把button添加到firstNode之前
content.insertBefore(btn, firstNode);
//点击按钮,把按钮自己删掉
btn.onclick = () => {
    content.removeChild(btn);
}

通过父节点.removeChild(childNode) 可以删除父节点下指定的子节点:

Dom Api之节点操作

8.克隆节点.

//获取content盒子
let content = document.querySelector('.content');
//获取content的第一个子元素节点 item
let itemEle = content.firstElementChild;
//创建一个button
let btn = document.createElement('button');
//创建一个文本节点
let newTextNode = document.createTextNode('clone btn');
//把文本节点添加到button中
btn.appendChild(newTextNode);
//把button添加到firstNode之前
content.insertBefore(btn, itemEle);
//点击按钮,拷贝item并放到content子标签后面
let num = 0;
btn.onclick = () => {
    let newItem = null;
    if (num == 0) {
        newItem = itemEle.cloneNode();
    } else if (num == 1) {
        newItem = itemEle.cloneNode(true);
    } else return;
    num++;
    content.appendChild(newItem);
}

克隆节点通过被克隆的节点.cloneNode()来实现,可以传递一个bool参数,不传默认为false,当为false时,只克隆第一层标签,它的子节点不被克隆;当为true时,克隆它和它下边的所有子节点.

Dom Api之节点操作

第一次点击clone btn,只克隆了div标签,没有内容;第二次则克隆了全部内容.

本文地址：https://blog.csdn.net/Wenliuyong/article/details/107376318

Dom Api之节点操作

微信小程序学习笔记之登录API与获取用户信息操作图文详解

原生js实现针对Dom节点的CRUD操作示例

原生JS的DOM操作之插入元素（代码教程）

Dom操作之兼容技巧分享

JQuery Ajax 异步操作之动态添加节点功能

HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍

JavaScript操作HTML DOM节点的基础教程

JavaScript学习笔记之DOM基础操作实例小结

基本DOM节点操作

学习JS中的DOM节点以及操作