JavaScript DOM–节点操作

节点

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

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

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

节点层级

父级节点

node.parentNode

返回离自己最近的那个父亲
没有父亲，就返回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

返回子节点的集合
返回的节点包含了所有的子节点，包括元素节点，文本节点

子元素节点

node.children

返回的是一个只读节点

<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

找到返回第一个子节点，找不到返回null

最后一个节点

parentNode.lastChild

找到返回最后一个节点，找不到返回null

第一个元素节点

parentNode.firstElementChild

找到返回第一个元素节点，找不到返回null

最后一个元素节点

parentNode.lastElementChild

找到返回最后一个元素节点，找不到返回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>

案例-删除评论留言

克隆节点

返回节点的一个副本
参数为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() 效率一般

区别

document.write() 是直接将内容写入页面，整个页面执行完全部重新绘
innerHTML 是将内容插入dom 节点不会重新绘
innerHTML 创建多个元素效率高
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–节点操作的更多相关文章

JavaScript DOM节点操作总结
节点类型节点类型主要有三种:元素节点,属性节点和文本节点. 而对DOM的主要也就是围绕元素节点和属性节点的增删改查.下面就分别从对元素节点的操作和对属性节点的操作来介绍. 元素节点查在对DOM进 ...
前端JavaScript之DOM节点操作
1.HTML DOM是啥 Document Object Model:定义了访问和操作HTML文档的标准方法,把HTML文档呈现为带有元素,属性和文本的树状结构 2.解析过程 HTML加载完毕,渲染引 ...
深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点前面的话一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
(转载)html dom节点操作(获取/修改/添加或删除)
DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下 HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...
JavaScript DOM 基础操作
JavaScript DOM 基础操作一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...
04-老马jQuery教程-DOM节点操作及位置和大小
1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...
第一百六十七节，jQuery，DOM 节点操作，DOM 节点模型操作
jQuery,DOM 节点操作,DOM 节点模型操作学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...
Dom节点操作总结
Dom 一:Dom的概念 Dom的简介: 全称为 document object model 文档对象模型,是操作文档的一整套方法 - 文档 - html,document时一个对象,是dom ...
JavaScript DOM 常用操作
1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript ...

随机推荐

7.python虚拟环境详解
1.为什么创建虚拟环境? 和其他大多数现代编程语言一样,Python对包和模块的下载.存储以及管理有其自己的一套方法,Python的包一般都存在几个特定的地方,大部分系统包会存在sys.prefix指 ...
Android中动态改变Listview中字体的颜色
效果如下: 账目显示用的是Listview,要实现的功能为使其根据所在Item是“收入”还是“支出”来把数字设置成绿色或红色方法是自定义适配器,并重写其中getView()函数,实现如下: //自定 ...
MySQL基础（3） | 函数
MySQL基础(3) | 函数前言 MySQL只有标量值函数的概念,没有SqlServer那种表值函数. 语法创建 create function f_add( a int, b int ) re ...
servlet中使用request.getHeader("referer")获取页面从哪跳转过来的
问题 servlet中使用request.getHeader("referer")获取页面从哪跳转过来的,利用这个方法可以判断网页是否正常登录.我做了一个javaweb小项目,其中 ...
java 测试 (junit+ junit 断言 + postman)
实际开发中,除了开发,我想测试也是必不可少的一环吧.从简单的@Test .main 方法测试到页面测试 ,断言,postman. bug是无处不在,随时发生的事,高效率的调试.检测可以节省大量的开 ...
消息驱动微服务：Spring Cloud Stream
最近在学习Spring Cloud的知识,现将消息驱动微服务:Spring Cloud Stream 的相关知识笔记整理如下.[采用 oneNote格式排版]
css背景颜色、背景图片，以及列表的多种样式
背景样式 • background-color 设置元素的背景颜色.• background-image 把图像设置为背景.• background-position 设置背景图像的起始位置.• ba ...
hdu6162
这题一开始把我看愣了.难道是线段树套树状数组?空间根本开不下好不好!!! 后来想到维护区间极值,从而排除不必要情况,降低复杂度. 无需修改,码量顿减…… 注意,同一组数据放一行,注意行末空格. #in ...
JN_0016：查找端口占用
Windows查看端口占用一. 查看所有进程占用的端口在开始-运行-cmd,输入:netstat –ano 可以查看所有进程二.查看占用指定端口的程序当你在用tomcat发布程序时,经常会 ...
安装TensorFlow失败
ERROR: Could not find a version that satisfies the requirement tensorflow==2.1.0 (from versions: non ...

JavaScript DOM–节点操作

节点

节点层级

父级节点

子节点

兄弟节点

操作节点

添加节点

删除节点

克隆节点

创建节点

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

随机推荐

热门专题