【JavaScript-节点操作】什么是节点,节点操作怎么用,操作节点能干吗?

简介: 【JavaScript-节点操作】什么是节点,节点操作怎么用,操作节点能干吗?

节点概述


一般地 ,节点至少拥有nodeType (节点类型)、nodeName (节点名称)和nodeValue (节点值)这三个 基本属性。利用节点层级关系来获取元素,大多数利用父子兄关系来获取元素


元素节点nodeType 为1 属性节点nodeType 为2 文本节点nodeType 为3 (文本节点包含文字、空格、换行等)


优点:不繁琐,逻辑性较强


缺点:兼容性差


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



1.父节点


parentNode属性可返回某节点的父节点,注意是最近的一个父节点 如果指定的节点没有父节点则返回null

<div class="box">
        <span class="banners">百亿补贴</span>
    </div>
    <script>
        // 一般获取元素
        var banners = document.querySelector('.banners');
        var box = document.querySelector('.box');
        // 父节点:parentNode
        // 利用节点获取元素
        console.log(banners.parentNode);
        // 注:得到的是离元素最近的父节点
    </script>
</body>


2.子节点


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



如和只获得元素节点

方法1:



方法2:parentNode. children是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返 回,虽然childern是一个非标准的,但是再开发中经常使用,也得到了认可,所以可以尽情使用



该集合仍然为即时更新的集合。


3.兄弟节点


1.nextSibling

nextSibling:下一个兄弟节点,包括文本节点和元素节点



这里的换行属于文本节点,所以显示的是text



2.previousSibling

previousSibling:上一个兄弟节点,包括文本节点和元素节点



依旧是换行的文本节点,因为previousSibling和nextSibling找到的是最近的一个节点,不进行文本节点和元素节点的区分


3.nextElementsibling

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




4.previousElementSibling

previousElementSibling如果没有上一个兄弟元素节点则返回null



没有上一个兄弟元素节点所以返回值是null



4.创建节点


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



node. insertBefore ()方法将一个节点添加到父节点的指定子节点前面。




5.留言发布案例


思路:使用textarea,button,li,在表单域内发表留言,点击按钮,将添加一个li,并且把表单域的value传到li,下面是具体的源码。

<!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>
    <style>
        li {
            list-style: none;
            width: 200px;
            background-color: rgb(176, 231, 250);
        }
        textarea {
            resize: none;
            width: 300px;
            height: 150px;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10">123</textarea>
    <button>发布</button>
    <ul>
    </ul>
    <script>
        // 获取元素
        var but = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 注册事件
        but.onclick = function () {
            if (text.value == '') {
                alert('您还没有输入呢?')
                return false;
            } else {
                // 创建元素
                var li = document.createElement('li');
                li.innerHTML = text.value;
                // 添加元素
                ul.insertBefore(li, ul.children[0]);
            }
        }
    </script>
</body>
</html>
目录
相关文章
|
5月前
|
前端开发 JavaScript 数据处理
在JavaScript中,异步函数是指那些不会立即执行完毕,而是会在未来的某个时间点(比如某个操作完成后,或者某个事件触发后)才完成其执行的函数
【6月更文挑战第15天】JavaScript中的异步函数用于处理非同步任务,如网络请求或定时操作。它们使用回调、Promise或async/await。
52 7
|
2月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
20 5
|
2月前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
27 2
|
4月前
|
JavaScript 前端开发 索引
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
JavaScript编码之路 【JavaScript之操作数组、字符串方法汇总】(三)
42 1
|
4月前
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
46 1
|
5月前
|
JavaScript vr&ar 数据库
技术笔记:Js获取当前日期时间及其它操作
技术笔记:Js获取当前日期时间及其它操作
132 1
|
5月前
|
存储 前端开发 JavaScript
回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。
【6月更文挑战第27天】回调函数是JavaScript中处理异步编程的常见模式,常用于事件驱动和I/O操作。它作为参数传递给其他函数,在特定条件满足或任务完成后被调用。例如,`asyncOperation`函数接受回调函数`handleResult`,模拟异步操作后,调用`handleResult`传递结果。这样,当异步任务完成时,`handleResult`负责处理结果。
38 1
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
5月前
|
存储 JavaScript 前端开发
JavaScript中的数组是核心数据结构,用于存储和操作序列数据
【6月更文挑战第22天】JavaScript中的数组是核心数据结构,用于存储和操作序列数据。创建数组可以使用字面量`[]`或`new Array()`。访问元素通过索引,如`myArray[0]`,修改同样如此。常见方法包括:`push()`添加元素至末尾,`pop()`移除末尾元素,`shift()`移除首元素,`unshift()`添加到开头,`join()`连接为字符串,`slice()`提取子数组,`splice()`进行删除、替换,`indexOf()`查找元素位置,`sort()`排序数组。还有其他如`reverse()`、`concat()`等方法。
130 2
|
5月前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
71 2