JS节点操作

节点操作

获取元素通常使用两种方式
1.利用DOM提供的方法获取元素(逻辑性不强，繁琐)
2.利用节点层级关系获取元素(逻辑性强，兼容稍差)
节点概述

• 网页中所有内容都是节点(标签，属性，文本，注释等)，在DOM中，节点使用node表示

• HTML DOM树中的所有节点均通过js进行访问，所有HTML元素(节点)均可被修改，也可以创建或者删除

• 一般地，节点至少拥有nodeType(节点类型),nodeName(节点名称)和nodeValue(节点值)，这三个基本属性

  元素节点 nodeType 为 1
  属性节点 nodeType 为 2
  文本节点 nodeType 为 3 (文本节点包括文字，空格，换行等)

  实际开发中，节点操作主要操作的是元素节点

父节点

	<div class="box">
        <span class="erweima"></span>
    </div>
    <script>
        // 1. 父节点 parentNode
        var erweima = document.querySelector('.erweima');
        // var box = document.querySelector('.box');
        // 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回 null
        console.log(erweima.parentNode);
    </script>

子节点和兄弟节点

	<div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
    </ol>
    <script>
        // DOM提供的方法 (API) 获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelector('li');
        // 1.子节点 childNodes 所有的子节点 包含元素节点，文本节点等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        // 2.children 获取所有的子元素节点 也是我们实际开发常用的
        console.log(ul.children);

        var ol = document.querySelector('ol');
        // 1.firstChild 第一个子节点不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2.firstElementChild 返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3.实际开发的写法，既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);
        console.log(ol.children[ol.children.length - 1]);
    </script>
    <script>
        var div = document.querySelector('div');
        // 1.nextSibling 下一个兄弟节点 包含元素节点或者 文本节点等等
        console.log(div.nextSibling);
        console.log(div.previousSibling);
        // 2.nextElementSibling 得到下一个兄弟元素节点
        console.log(div.nextElementSibling);
        console.log(div.previousElementSibling);
    </script>

创建节点和删除节点

	<button class="shanchu">删除</button>
    <ul class="ul">
        <li class="li">123</li>
        <li>贝贝</li>
        <li>方树</li>
        <li>人民保安</li>
    </ul>

		// 1.创建元素节点
        var li = document.createElement('li');
        // 2.添加元素节点 node.appendeChild(child) node父级 child 是子级 后面追加元素 类似于数组中的push
        var ul = document.querySelector('.ul');
        ul.appendChild(li);
        // 3.添加元素节点 node.insertBefore(child,指定元素); 前面追加元素
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4.我们想要页面添加一个元素： 1.创建元素 2.添加元素
        // 5.删除节点操作 先获取元素
        var btn1 = document.querySelector('.shanchu');
        // 删除元素 node.removeChild(child)
        // ul.removeChild(ul.children[0]);
        // 3.点击按钮依次删除里面的孩子
        btn1.onclick = function () {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }

克隆节点

	<ul class="ul2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    
	 	var ul2 = document.querySelector('.ul2');
        // 1. node.cloneNode(); 括号为空或者里面是false  浅拷贝 只复制标签不复制里面的内容
        // 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
        var lili1 = ul2.children[0].cloneNode(true);
        ul2.appendChild(lili1);

简单留言板案例

	<textarea name="" id="" cols="30" rows="10"></textarea>
    <button class="button">发布</button>
    <ul class="ul1"></ul>

		// 1.获取元素
        var btn = document.querySelector('.button');
        var ul1 = document.querySelector('.ul1');
        var wenben = document.querySelector('textarea');
        // 2.注册事件
        btn.onclick = function () {
            if (wenben.value == '') {
                alert('文本框为空不能发布留言');
            } else {
                // (1)创建元素
                var li1 = document.createElement('li');
                // 现有li才能赋值
                // 阻止链接跳转需要添加javascript:void(0);或者javascript:;
                li1.innerHTML = wenben.value + "<a href='javascript:;'>删除</a>";
                // (2)添加元素
                // ul1.appendChild(li1);
                ul1.insertBefore(li1, ul1.children[0]);
                // (3)删除元素 删除的当前链接的li 它的父亲
                var as = document.querySelectorAll('a');
                for(var i = 0;i<as.length;i++){
                    as[i].onclick = function(){
                        // node.removeChild(child); 删除的是li 当前a所在的li this.parentNode
                        ul1.removeChild(this.parentNode);
                    }
                }
            }
        }