节点

节点至少拥有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. Resnet——深度残差网络（一）

    我们都知道随着神经网络深度的加深,训练过程中会很容易产生误差的积累,从而出现梯度爆炸和梯度消散的问题,这是由于随着网络层数的增多,在网络中反向传播的梯度会随着连乘变得不稳定(特别大或特别小),出现最多 ...

  2. ADO.NET事务封装

    在数据库工具类编写的过程中,对事务的处理操作想避免各个原子操作的事务对象赋值重复操作,想对外暴露的方法为如下形式 public bool ExecuteTransition(Action Transi ...

  3. MATLAB实例：二元高斯分布图

    MATLAB实例:二元高斯分布图 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 1. MATLAB程序 %% demo Multivariate No ...

  4. 通过CSS3属性值的变化实现动画效果+触发这些动画产生交互

    css3过渡 transition 兼容性:IE10+ transition: none | all | property 默认为none all 表示所有属性过渡 property 指定属性值,如c ...

  5. vue(四)--属性绑定

    v-bind通过v-bind进行属性绑定v-bind:href, 可以简写成 :href <body> <div id="app"> <a v-bin ...

  6. openssl CVE-2016-2107 漏洞检测

    最近在安装python3 时升级openssl 版本,在摸索openssl 升级过程中才发现centos6 默认安装的openssl 1.0.1e 版本是有一个严重的漏洞的(Padding oracl ...

  7. VSCode（主进程）

    Overview(总览) SETUP(设定) Overview(总览) Linux(略) macOS(略) Windows 使用WSL,您可以在Windows上安装和运行Linux发行版.这使您能够在 ...

  8. MySQL char与varchar 的区别

    一.差异 1.占用存储空间上 char 初始化时占固定空间,varchar依据插入内容大小使用空间. 2.char最大字符长度255个(约0.1KB),varchar则是65535(约192KB). ...

  9. Tensor--tensorflow的数据类型

    在tensorflow2.0版本之前,1.x版本的tensorflow的基本数据类型有计算图(Computation Graph)和张量(Tensor)两种,但tensorflow2.0之后的版本取消 ...

  10. C#从委托、lambda表达式到linq总结

    前言 本文总结学习C#必须知道的基础知识,委托.监视者模式.常用lambda表达式.linq查询,自定义扩展方法,他们之间有什么关系呢?匿名委托是如何演变成lambda表达式,lambda再如何导出l ...