节点

节点至少拥有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. web自动化之三大等待

    这个假期有些长,长到忘记了要学习,要找工作,好吧,在我每天无休止的追着偶像剧时,我确实没有负罪感,在听了小祥大佬的分享后,我连睡午觉都被吓醒.大佬跟我同一个班,在大厂工作,每天还抽时间学习,作业也没落 ...

  2. 浅谈 vue-loader---合格前端

    什么是 vue-loader? vue-loader 是一个 webpack 的 loader,它允许你以一种名为单文件组件的格式撰写 Vue 组件. 如何使用? 1. 安装 npm install  ...

  3. MySQL基础（7） | 触发器

    MySQL基础(7) | 触发器 基本语法 创建 CREATE TRIGGER trigger_name trigger_time trigger_event ON table_name FOR EA ...

  4. 【python基础语法】模块和包管理，文件的操作（第8天课堂笔记）

    ''' 模块和包管理 模块和包的定义: 模块:模块是一个Python文件,以.py结尾,包含了Python对象定义和Python语句 包:Python中的包就是一个包含__init__.py文件的目录 ...

  5. jQuery---jquery.color.js和jquery.lazyload.js的使用

    jquery.color.js的使用 了解即可 <!--1. 引入jquery的js文件--> <script src="jquery-1.12.4.js"> ...

  6. HAProxy 使用小记

    PS:写在开头,虽然HAProxy优点很多,但是现在网上可参考的HAProxy文档真的少之又少,so,我把最近在项目中使用的心得整理下,供大家参考,如有侵权或错误之处,还请联系更正,谢谢! 好了,下面 ...

  7. Android_Service的一些零散知识点_1

    service与线程不甚相同,service是Android提供的可供一个允许常驻后台的组件. 可通过StartService()启动Service和BindService()启动Service St ...

  8. ARM微处理器中支持字节、半字、字三种数据类型，地址的低两位为0是啥意思？

    问题: ARM微处理器中支持字节.半字.字三种数据类型,其中,字需要4字节对齐(地址的低两位为0).半字需要2字节对齐(地址的最低位为0).我想问的是括号中的内容是什么意思呢?请牛人帮忙解释一下!谢谢 ...

  9. C语言->关于文件数据的录入和输出调用的函数总结

    数据输入输出对象之间的关系图: 函数使用说明: 1.一个字符的输入\输出,对象是键盘(缓存和屏幕) 1.1.getchar(a),putchar(a); 1.2.scanf(“%d”,&i), ...

  10. oracle备份与还原数据

    一.表数据备份与还原 creat table  备份表   select * from  原表  where insert  into  原表  select  *  from  备份表 二.利用备份 ...