节点

节点至少拥有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. Mac下appium-doctor提示错误汇总

    一.            提示 [Error: Could not detect Mac OS X Version from sw_vers output: '10.12'] 解决方法: 1.终端执 ...

  2. 消息队列（三）Apache ActiveMQ

    在Ubuntu上安装ActiveMQ 系统初始化 $ sudo apt update $ sudo apt dist-upgrade $ sudo apt autoremove $ sudo apt ...

  3. 《手把手教你构建自己的 Linux 系统》学习笔记（7）

    目录 tee 命令的缺陷是什么?如何解决这个缺陷? /etc/ld.so.conf 文件的作用是什么? 动态链接和静态链接有什么不同? 动态编译 静态编译 共享库为什么会有版本?共享库的版本升级原理是 ...

  4. 重写了下Ajax请求Webservice，顺便复习一下Javascript的闭包概念

    var AjaxRequest = function(){ //返回处理结果的回调函数 this.agentCallBack = {}; //javascript 调用domino代理的方法. thi ...

  5. mysql 连接查询 转换group_concat, find_in_set

    1.a表 2.b表 3.连接(a_u_id 对应b表的b_id) select a.a_id,a.a_u_id,group_concat(b.b_name) from a_tb a left join ...

  6. mysql基于二进制文件的主从复制

    1.设置主服务器配置         必须在主服务器上启用二进制日志,因为二进制日志是将更改从主服务器复制到从服务器的基础,如果未启用log-bin,则无法进行复制         复制组内的每个服务 ...

  7. 为什么要进行初始化（C语言）

    答案:是为了清除被释放的内存中保存的以前程序中留下的垃圾数据.

  8. python 访问sql server数据库

    访问数据库 cnxn = pyodbc.connect("Driver={SQL Server};Server=localhost;Database=用户名;uid=sa;pwd=密码&qu ...

  9. 吴裕雄--天生自然 PYTHON数据分析：所有美国股票和etf的历史日价格和成交量分析

    # This Python 3 environment comes with many helpful analytics libraries installed # It is defined by ...

  10. spawn id exp6 not open

    原因 脚本没有被执行 解决方案 手动执行该条命令参看报错的原因