1. 节点的概念

• 什么是节点

  文档树所有包含的东西都可以称作节点；最关注的节点是元素节点（就是我们平时所说的标签）（head body title hr td tr。。）

• 常用的节点分类

  • 元素节点--标签
  • 文本节点--标签的内容
  • 属性节点--标签的属性
  • 注释节点--注释

• 查找节点是相对的操作

  如果你拿html的子节点,就是html当中所有的节点但是不包含后代节点，只是子节点
  后代和子代要分清
  祖先和父要分清

2. 子节点和子元素节点（父节点和父元素）

2.1 子节点和子元素节点

• childNodes 拿到的是某个元素的子节点：包括子元素节点和文本子节点，如果有注释还有注释节点；

• children 拿到的是某个元素的子元素节点

• 子节点:childNodes (儿子节点):

  • 高级浏览器: 元素,文本(文本,空格,换行),注释
  • 低版本浏览器: 元素,文本(不包括空格和换行),注释

• 子元素节点： children(儿子元素):

  • 高级浏览器:元素
  • 低版本浏览器：元素，注释

2.2 节点类型

       nodeType     nodeName    nodeValue
文本节点     3         #text         文本内容
元素节点     1         元素名大写     null
注释节点     8         #comment     注释内容

2.3 父节点和父元素节点

//父节点和父元素节点
//也是两个属性，这两个属性拿到的都是父元素节点
console.log(box.parentNode);//拿到div元素节点的父节点
console.log(box.parentElement);//拿到div元素节点的父元素节点

3. 获取节点的其他方式

3.1 父子元素

var ul = document.getElementById('uu');
（1）获取所有的子节点 (childNodes)
var all_node_list = ul.childNodes;
console.log(all_node_list);
（2）获取所有的子元素节点 (children)
var all_ele_node_list = ul.children;
console.log(all_ele_node_list);
（3）获取第一个子节点 ( firstChild)
var first_node = ul.firstChild;
console.log(first_node);
（4）获取第一个子元素节点 高级浏览器能识别 ( firstElementChild )

    如果是低级浏览器则会返回undefined
var first_ele_node = ul.firstElementChild;
console.log(first_ele_node);
（5）获取最后一个子节点 ( lastChild )
var last_node = ul.lastChild;
console.log(last_node);

（6）获取最后一个子元素节点 高级浏览器能识别 ( lastElementChild )
    如果是低级浏览器则会返回undefined
var last_ele_node = ul.lastElementChild;
console.log(last_ele_node);

3.2 兄弟元素

var li = document.getElementById('l2');
（1）上一个兄弟节点
console.log(li.previousSibling);
（2）上一个兄弟元素节点
    只有高级浏览器才可以使用 低级浏览器会返回undefined
console.log(li.previousElementSibling);
（3）下一个兄弟节点
console.log(li.nextSibling);
（4）下一个兄弟元素节点
    只有高级浏览器才可以使用 低级浏览器会返回undefined
console.log(li.nextElementSibling);

4. 创建节点

4.1 创建节点-方法1-document-write

第一种动态添加节点，元素的方式，以后不用，因为会覆盖原本有的元素

4.2 创建节点-方法2-innerHTML

说明：几个特殊元素的获取方式
1、html document.documentElement
2、body document.body
3、head document.head

//直接写=会发生覆盖，因为它是把body里面的 内容修改为'<h1>我是标题</h1>'
//如果不想修改，必须使用+=才能添加元素   
document.body.innerHTML += '<h1>我是标题</h1>';
document.body.innerHTML = document.body.innerHTML + '<h1>我是标题</h1>'

4.3 创建节点-方法3-createElement

//1、创建一个你想添加的元素   dom对象，但是创建好的这个对象并不在页面上
var h1Node = document.createElement('h1');
//2、把创建好的h1标签写内容
h1Node.innerHTML = '我是标题';
//3、经历完前两步，h1标签就已经准备好了，然后页面上想要看到，必须把h1添加给页面上已经存在的元素
document.body.appendChild(h1Node);//追加的意思就是末尾加

5. 创建列表添加

5.1 列表遍历-方法1

<script>
    var arr = ['貂蝉','西施','王昭君','杨玉环'];

    // innerHTML
    var str = '<ul>';
    for(var i = 0; i < arr.length; i++){
        var str2 = '<li>' + arr[i] + '</li>';
        str += str2;
    }
    str += '</ul>';
    console.log(str);
    document.body.innerHTML += str;
</script>

5.2 列表遍历-方法2

<script>
    var arr = ['魔力红','魔力海','魔力青','魔力兽'];

    var ul = document.createElement('ul');

    for(var i = 0; i < arr.length; i++){
        var li = document.createElement('li');

        li.innerHTML = arr[i];

        ul.append(li);
    }
    console.log(ul);
    document.body.append(ul);
</script>

6. 节点的增删改

6.1 添加

• 节点-增-从末尾增 ( appendChild )

<script>
    var ul = document.querySelector('ul');

    var li = document.createElement('li');

    li.innerHTML = '攀枝花的芒果'

    // ul.append(li);
    ul.appendChild(li);
</script>

• 节点-增-从某个位置增 ( insertBefore(newEle, oldEle) )

<script>
    var ul = document.querySelector('ul');

    // 新增的li
    var liNew = document.createElement('li');
    liNew.innerHTML = '草莓';

    // 旧的li
    var liOld = document.querySelector('li:nth-child(1)');

    ul.insertBefore(liNew,liOld);
</script>

6.2 改

• 节点-改 ( replaceChild(newEle, oldEle) )

<script>
    var ul = document.querySelector('ul');
    var liNew = document.createElement('li');
    liNew.innerHTML = '金刚川';

    var liOld = document.querySelector('li:nth-child(1)');

    // replace方法不可以直接使用 
    // replaceChild
    // 参数的顺序
    ul.replaceChild(liNew,liOld);
</script>

6.3 删除

• 节点-删

<script>
    // 官网提供的删除方式 比较墨迹
    // var ul = document.querySelector('ul');
    // var li = document.querySelector('li:nth-child(3)');
    // ul.removeChild(li);

    var li = document.querySelector('li:nth-child(3)');
    li.remove();
</script>

字符串方法( trim( ) ) - 去除空格

trim只能去除前面和后面的空白

-案例练习---输入框添加歌曲列表

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>案例练习</title>
</head>

<body>
    <input type="text" placeholder="请输入歌曲">

    <ul></ul>

    <script>
        var inp = document.querySelector('input');
        var ul = document.querySelector('ul');

        inp.onkeyup = function (event) {
            if (event.keyCode == 13) {
                // 获取文本框中的value
                var name = inp.value;
                // if里面是boolean表达式  
                // 只有为true的时候才会执行代码
                // Boolean('')的结果是false
                if (name.trim()) {
                    var li = document.createElement('li');
                    li.innerHTML = name.trim();

                    ul.append(li);

                    li.onmouseenter = function(){
                        this.style.backgroundColor = 'yellowgreen';
                    }

                    li.onmouseleave = function(){
                        this.style.backgroundColor = '';
                    }

                    // 注意要清除文本框中的内容  而不是清除name值
                    inp.value = '';
                    // 以下的方法并不是最优解  
                    // 原因是因为每添加一个对象  都会重新遍历所有的li

                    // var li_list = document.querySelectorAll('li');
                    // console.log(li_list.length);

                    // for (var i = 0; i < li_list.length; i++) {
                    //     li_list[i].onmouseenter = function () {
                    //         this.style.backgroundColor = 'skyblue';
                    //     }

                    //     li_list[i].onmouseleave = function () {
                    //         this.style.backgroundColor = '';
                    //     }
                    // }
                } else {
                    alert('请输入歌曲名字');
                }
            }
        }
    </script>
</body>

</html>