节点

节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

  • 元素节点 nodeType  为1
  • 属性节点 nodeType  为2
  • 文本节点 nodeType  为3 （文本节点包含文字，空格和换行）

一般我们开发操作的是元素节点

节点层级

父级节点
node.parentNode
  1. 返回离自己最近的那个父亲
  2. 没有父亲，就返回null

<body>

<div class="demo">

        <div class="box">

            <span class="erweima">×</span>

        </div>

</div>

<script>

    var erweima = document.querySelector('.erweima');

    console.log(erweima.parentNode); // 父节点

</script>

</body>

示例代码

子节点
  • 所有节点
node.childNodes
  1. 返回子节点的集合
  2. 返回的节点包含了所有的子节点，包括元素节点，文本节点
  • 子元素节点
node.children
  1. 返回的是一个只读节点

<body>

<ul>

    <li>我是li</li>

    <li>我是li</li>

    <li>我是li</li>

    <li>我是li</li>

</ul>

<script>

    var ul = document.querySelector('ul');

    // childNodes

    console.log(ul.childNodes); // NodeList(9) [text, li, text, li, text, li, text, li, text]

    console.log(ul.childNodes[0].nodeType);  // 3

    //  children

    console.log(ul.children);  // HTMLCollection(4) [li, li, li, li]

</script>

</body>

示例代码

  • 第一个子节点
parentNode.firstChild
  1. 找到返回第一个子节点，找不到返回null
  • 最后一个节点
parentNode.lastChild
  1. 找到返回最后一个节点，找不到返回null
  • 第一个元素节点
parentNode.firstElementChild
  1. 找到返回第一个元素节点，找不到返回null
  • 最后一个元素节点
parentNode.lastElementChild
  1. 找到返回最后一个元素节点，找不到返回null
兄弟节点
  • 下一个兄弟节点

找不到返回null

node.nextSibling
  • 上一个兄弟节点

找不到返回null

node.previousSibling
  • 下一个兄弟元素节点(兼容性问题)

找不到返回null

node.nextElementSibling
  • 上一个兄弟元素节点(兼容性问题)

找不到返回null

node.previousElementSibling

<body>

    <div>我是div</div>

    <span>我是span</span>

<script>

   var div = document.querySelector('div');

   // 1. nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等

    console.log(div.nextSibling);  // #text

    // 2. nextElementSibling 得到下一个兄弟元素节点

    console.log(div.nextElementSibling);

</script>

</body>

示例代码

操作节点

添加节点
  • 添加到节点列表末尾
node.appendChild(child)
  • 添加到指定节点前面
node.insertBefore(child, 指定元素)

<body>

<ul>

    <li>123</li>

</ul>

<script>

    var ul = document.querySelector('ul');

    // 创建节点

    var li = document.createElement('li');

    li.innerHTML = '<li>appendChild</li>';

    // 添加节点 appendChild

    ul.appendChild(li);

    // 插入节点

    var lili = document.createElement('li');

    lili.innerHTML = '<li>insertBefore</li>';

    ul.insertBefore(lili, ul.children[0])

</script>

</body>

示例代码

<!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>

        * {

            margin: 0;

            padding: 0;

        }

        li {

            list-style-type: none;

        }

        a {

            text-decoration: none;

            font-size: 14px;

        }

        .nav {

            margin: 100px;

        }

        .nav>li {

            position: relative;

            float: left;

            width: 80px;

            height: 41px;

            text-align: center;

        }

        .nav li a {

            display: block;

            width: 100%;

            height: 100%;

            line-height: 41px;

            color: #333;

        }

        .nav>li>a:hover {

            background-color: #eee;

        }

        .nav ul {

            display: none;

            position: absolute;

            top: 41px;

            left: 0;

            width: 100%;

            border-left: 1px solid #FECC5B;

            border-right: 1px solid #FECC5B;

        }

        .nav ul li {

            border-bottom: 1px solid #FECC5B;

        }

        .nav ul li a:hover {

            background-color: #FFF5DA;

        }

    </style>

</head>

<body>

    <ul class="nav">

        <li>

            <a href="#">微博</a>

            <ul>

                <li>

                    <a href="">私信</a>

                </li>

                <li>

                    <a href="">评论</a>

                </li>

                <li>

                    <a href="">@我</a>

                </li>

            </ul>

        </li>

        <li>

            <a href="#">微博</a>

            <ul>

                <li>

                    <a href="">私信</a>

                </li>

                <li>

                    <a href="">评论</a>

                </li>

                <li>

                    <a href="">@我</a>

                </li>

            </ul>

        </li>

        <li>

            <a href="#">微博</a>

            <ul>

                <li>

                    <a href="">私信</a>

                </li>

                <li>

                    <a href="">评论</a>

                </li>

                <li>

                    <a href="">@我</a>

                </li>

            </ul>

        </li>

        <li>

            <a href="#">微博</a>

            <ul>

                <li>

                    <a href="">私信</a>

                </li>

                <li>

                    <a href="">评论</a>

                </li>

                <li>

                    <a href="">@我</a>

                </li>

            </ul>

        </li>

    </ul>

    <script>

        var nav = document.querySelector('.nav');

        var lis = nav.children;

        for (var i = 0; i < lis.length; i++) {

            lis[i].onmouseover = function () {

                this.children[1].style.display = 'block';

            };

            lis[i].onmouseout = function () {

                this.children[1].style.display = 'none';

            }

        }

    </script>

</body>

</html>

案例-微博下拉框

<!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>

        * {

            margin: 0;

            padding: 0;

        }

        body {

            padding: 100px;

        }

        textarea {

            width: 200px;

            height: 100px;

            border: 1px solid pink;

            outline: none;

            resize: none;

        }

        ul {

            margin-top: 50px;

        }

        li {

            width: 300px;

            padding: 5px;

            background-color: rgb(245, 209, 243);

            color: red;

            font-size: 14px;

            margin: 15px 0;

        }

    </style>

</head>

<body>

    <textarea name="" id=""></textarea>

    <button>发布</button>

    <ul>

    </ul>

    <script>

       // 获取元素

        var button = document.querySelector('button');

        var text = document.querySelector('textarea');

        var ul = document.querySelector('ul');

        // 注册事件

        button.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>

案例-留言板

删除节点

删除一个子节点，返回删除的节点

node.removeChild()

<body>

    <button>删除</button>

    <ul>

        <li>熊大</li>

        <li>熊二</li>

        <li>光头强</li>

    </ul>

    <script>

        // 获取元素

        var button = document.querySelector('button');

        var ul = document.querySelector('ul');

        button.onclick = function () {

            if (ul.children.length == 0){

                this.disabled = true  // 禁止按钮

            } else {

                // 删除第一个

                ul.removeChild(ul.children[0])

            }

        }

    </script>

</body>

示例代码

<!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>

</head>

<body>

    <textarea name="" id=""></textarea>

    <button>发布</button>

    <ul>

    </ul>

    <script>

        // 获取元素

        var text = document.querySelector('textarea');

        var button = document.querySelector('button');

        var ul = document.querySelector('ul');

        // 注册事件

        button.onclick = function () {

            if (text.value == '') {

                alert('输入内容');

                return false

            } else {

                // 添加元素和删除按钮

                var li = document.createElement('li');

                li.innerHTML = text.value += "<a href='javascript:;'>删除</a>";

                ul.insertBefore(li, ul.children[0]);

                // 给删除按钮a添加删除事件

                var as = document.querySelectorAll('a');

                for (var i=0; i<as.length; i++) {

                    as[i].onclick = function () {

                        ul.removeChild(this.parentNode); // 相对a而已，删除它的父亲

                    }

                }

            }

            text.value = ''  // 清楚文本框内容

        }

    </script>

</body>

</html>

案例-删除评论留言

克隆节点
  1. 返回节点的一个副本
  2. 参数为true为深拷贝

<body>

     <ul>

        <li>1111</li>

        <li>2</li>

        <li>3</li>

    </ul>

    <script>

        var ul = document.querySelector('ul');

       // 拷贝

        console.log(ul.cloneNode());  // <ul></ul>  浅拷贝

        console.log(ul.cloneNode(true));  // 深拷贝

        // 拷贝子节点

        console.log(ul.children[0].cloneNode()); // <li></li>  浅拷贝

        console.log(ul.children[0].cloneNode(true)); // 深拷贝

    </script>

</body>

示例代码

创建节点
  • document.write()                  效率低
  • ele.innerHTML                     效率高
  • document.createElement()  效率一般

区别

  1. document.write() 是直接将内容写入页面，整个页面执行完全部重新绘
  2. innerHTML 是将内容插入dom 节点 不会重新绘
  3. innerHTML  创建多个元素效率高
  4. createElement 创建多个元素效率低，但是结构清晰

<body>

     <button>创建</button>

     <div></div>

     <span></span>

    <script>

        var btn = document.querySelector('button');

        // 1. write

        btn.onclick = function () {

            document.write('<div>123</div>')

        };

        // 2.innerHTML

        var div = document.querySelector('div');

        for (var i=0; i<= 100; i++) {

            div.innerHTML += '<a href="#">百度</a>'

        }

        // 3 createElement

        var span = document.querySelector('span');

        for (var i=0; i<=100; i++) {

            var a = document.createElement('a');

            span.appendChild(a);

        }

    </script>

</body>

示例代码

JavaScript DOM–节点操作的更多相关文章

  1. JavaScript DOM节点操作总结

    节点类型 节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点 查 在对DOM进 ...

  2. 前端JavaScript之DOM节点操作

    1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...

  3. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  4. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  5. JavaScript DOM 基础操作

    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

  6. 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...

  7. 第一百六十七节，jQuery，DOM 节点操作，DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  8. Dom节点操作总结

    Dom   一:Dom的概念 Dom的简介:  全称为 document object model  文档对象模型,是操作文档的一整套方法 - 文档 - html,document时一个对象,是dom ...

  9. JavaScript DOM 常用操作

    1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript ...

随机推荐

  1. Foxmail for windows 客户端设置和 IMAP、POP3/SMTP 的设置

    Foxmail支持微信扫码.手机验证码.账号密码三种方式新建腾讯企业邮箱. 注意:目前仅foxmail 7.2.11版本支持微信扫码和手机验证码新建腾讯企业邮箱,可以foxmail官网https:// ...

  2. 阿里云服务器Web Deploy配置和使用Visual Studio进行Web项目发布部署遇到的坑

    阿里云的服务器一直闲着,烧着银子,当初花几千大洋开通,本想弄信息化的项目为所帮扶的贫困户脱贫助手,不想势单力薄,一直没有找到好的项目.最近大家都在众志成城抗击新肺疫情,于是又想能不能尽点自己的力量,于 ...

  3. 修改 div 的滚动条的样式

    修改 div 的滚动条的样式 需要用到浏览器专属的伪元素,没有万能的办法,支持的浏览器不是很多. 假设有一个(你已经)设好宽高.定好位的 div, <div class="group- ...

  4. Python3标准库：heapq堆排序算法

    1. heapq堆排序算法 堆(heap)是一个树形数据结构,其中子节点与父节点有一种有序关系.二叉堆(binary heap)可以使用一个有组织的列表或数组表示,其中元素N的子元素位于2*N+1和2 ...

  5. Django基础一Web框架的本质

    我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端,基于请求做出响应,客户都先请求,服务端做出对应的响应,按照http协议的请求协议发送请求, ...

  6. 最新2019Pycharm安装教程，亲测！最新2019pycharm安装！如何安装Pycharm2019版本！如何安装2019Pycharm永久教程！2019Pycharm永久安装！

    Pycharm安装 在这插一个小话题哈,Pycharm只是一个编译器,并不能代替Python,如果要使用Python,还是需要安装Python的哈 1.Pycharm下载安装 Pycharm下载 Py ...

  7. MVC5+EF6入门完整教程7：排序过滤分页

    https://www.cnblogs.com/miro/p/4134241.html 前置准备 – 应用之前样式,增加测试数据 界面样式修改前: 下面对Views --> Account -- ...

  8. phpcmsv9 后台统计编辑发稿数量

    直切正题: 每个人,每个栏目,发稿数量统计 SELECT a.realname AS 姓名, c.catname AS 栏目名称, count(1) AS 发稿量FROM v9_news bz, v9 ...

  9. t-SNE and PCA

    1.t-SNE 知乎 t-分布领域嵌入算法 虽然主打非线性高维数据降维,但是很少用,因为 比较适合应用于可视化,测试模型的效果 保证在低维上数据的分布与原始特征空间分布的相似性高 因此用来查看分类器的 ...

  10. 曼孚科技：AI算法领域常用的39个术语（下）

    算法是人工智能(AI)核心领域之一. 本文整理了算法领域常用的39个术语,希望可以帮助大家更好地理解这门学科. 本文为下半部分,上半部分见本账号上一篇文章. 19.迁移学习(Transfer Lear ...