webAPI中的排他思想、自定义属性操作、节点操作（配大量案例练习）

一、排他操作

1.排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

1.所有的元素全部清除样式

2.给当前的元素设置样式

注意顺序能不能颠倒，首先清除全部样式，再设置自己当前的样式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01排他思想</title>
</head>
<body>
    <button class="btn">按钮1</button>
    <button class="btn">按钮2</button>
    <button class="btn">按钮3</button>
    <button class="btn">按钮4</button>
    <button class="btn">按钮5</button>

    <script>
        //1.获取到所有的元素
        var btns = document.getElementsByClassName('btn');
        //console.log(btns);
        //2.遍历  btns是一个数组（有length和根据索引获取元素，但是不具备数据中push等方法）
        for(var i = 0; i < btns.length; i++){
            //给所有的button都注册点击事件
            btns[i].onclick = function(){
                //alert('ok');
                //1)清除所有按钮的样式(重新再遍历一遍所有的btns)
                for(var j = 0; j < btns.length; j++){
                    btns[j].style.backgroundColor = '';
                }
                //2)添加样式
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>
</html>

2.案例

案例一

百度换肤

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02百度换肤</title>
    <style>
        *{margin: 0; padding: 0;}
        body{
            background: url(images/1.jpg) no-repeat center top;
        }
        li{
            list-style: none;
        }
        .baidu{
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }
        .baidu li{
            float: left;
        }
        .baidu img{
            width: 100px;
        }
        .baidu:hover{
            cursor: pointer; /*手的形状*/
        }
    </style>
</head>
<body>
    <ul class="baidu" id="baidu">
        <li><img src="images/1.jpg" alt=""></li>
        <li><img src="images/2.jpg" alt=""></li>
        <li><img src="images/3.jpg" alt=""></li>
        <li><img src="images/4.jpg" alt=""></li>
    </ul>
    <script>
        //1.获取元素
        //1-1 获取到ul (通过id获取，就是只获取了一个对象)
        var ulObj = document.getElementById('baidu');
        //1-2 通过ul对象，找ul中的img
        var imgs = ulObj.getElementsByTagName('img')
        //console.log(imgs);
        //2.循环imgs
        for(var i = 0; i < imgs.length; i++){
            //给每一个都注册事件
            imgs[i].onclick = function(){
                //console.log(this.src);
                document.body.style.backgroundImage = 'url('+this.src+')'
            }
        }
    </script>
</body>
</html>

案例二：隔行变色

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03隔行变色</title>
    <style>
        *{margin: 0; padding: 0;}
        table{
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        tbody tr{
            height: 30px;
        }
        tbody tr td{
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        .bg {
            background-color: #999;
        }
    </style>
</head>
<body>
    <table id="mytable">
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最近公布净产值</th>
                <th>净产值增长率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>0121213</td>
                <td>农银金穗3个月订气开放债券</td>
                <td>1.09</td>
                <td>1.09</td>
            </tr>
            <tr>
                <td>0121213</td>
                <td>农银金穗3个月订气开放债券</td>
                <td>1.09</td>
                <td>1.09</td>
            </tr>
            <tr>
                <td>0121213</td>
                <td>农银金穗3个月订气开放债券</td>
                <td>1.09</td>
                <td>1.09</td>
            </tr>
            <tr>
                <td>0121213</td>
                <td>农银金穗3个月订气开放债券</td>
                <td>1.09</td>
                <td>1.09</td>
            </tr>
            <tr>
                <td>0121213</td>
                <td>农银金穗3个月订气开放债券</td>
                <td>1.09</td>
                <td>1.09</td>
            </tr>
            <tr>
                <td>0121213</td>
                <td>农银金穗3个月订气开放债券</td>
                <td>1.09</td>
                <td>1.09</td>
            </tr>
            <tr>
                <td>0121213</td>
                <td>农银金穗3个月订气开放债券</td>
                <td>1.09</td>
                <td>1.09</td>
            </tr>
            <tr>
                <td>0121213</td>
                <td>农银金穗3个月订气开放债券</td>
                <td>1.09</td>
                <td>1.09</td>
            </tr>
        </tbody>
    </table>

    <script>
        //1.获取到所有的tr（每一个tr就是一行）
        var mytable = document.getElementById('mytable');
        var trs = mytable.getElementsByTagName('tr');
        //console.log(trs);
        //2.遍历tr
        for(var i = 0; i < trs.length; i++){
            //隔行变色
            // if(i != 0 && i % 2 ==0){ //偶数
            //     trs[i].style.backgroundColor ='pink'
            // }
            if(i== 0){
                continue
            }
            //鼠标放在tr上，有一个背景颜色,给每个tr都注册一个鼠标放上去的事件
            trs[i].onmouseover = function(){
                this.className = 'bg';
            }
            //鼠标移开，移除背景样式
            trs[i].onmouseout = function(){
                this.className = ''
            }

        }
    </script>
</body>
</html>

案例三：全选全不选

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04全选和全部选</title>
    <style>
        *{margin: 0; padding: 0;}
        .wrap {
            width: 300px;
            margin: 100px auto;
        }
        table {
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }
        th,td{
            border: 1px solid #d0d0d0;
            color: #404040;
            padding: 10px;
        }
        th{
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        td{
            font: 14px "微软雅黑";
        }
        tbody tr{
            background-color: #f0f0f0;
        }
        tbody tr:hover{
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
    <table class="wrap">
        <thead>
            <tr>
                <th><input type="checkbox" id="j_chAll" /></th>
                <th>商品</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="other"/></td>
                <td>Iphone16</td>
                <td>8000</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="other"/></td>
                <td>华为mate70</td>
                <td>9000</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="other"/></td>
                <td>小米17</td>
                <td>5000</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="other"/></td>
                <td>vivo</td>
                <td>4000</td>
            </tr>
        </tbody>
    </table>
    <script>
        //1.获取元素
        //1-1 全选复选框
        var all = document.getElementById('j_chAll');
        //1-2 所有的其它复选框
        var others = document.getElementsByClassName('other');
        //通过复选框对象.checked可以获取到复选框的状态，true是勾选状态，false取消勾选的状态
        //通过复选框对象.checked = true/false 可以设置复选框的状态
       
        
        //给全选和全部选复选框注册点击事件
        all.onclick = function(){
            var flag = all.checked; //复选框的状态
            console.log(flag);
            //2.遍历所有的其它复选框
            for(var i = 0; i < others.length; i++){
                others[i].checked = flag; //设置复选框的状态
            }
        }



        // //看看all复选框，点击的时候发生了什么
        // var flag = all.checked;
        // console.log(flag);
        // all.onclick = function(){
        //     var flag = all.checked;
        //     console.log(flag);
        // }
    </script>
</body>
</html>

升级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05全选和全部选升级</title>
    <style>
        *{margin: 0; padding: 0;}
        .wrap {
            width: 300px;
            margin: 100px auto;
        }
        table {
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }
        th,td{
            border: 1px solid #d0d0d0;
            color: #404040;
            padding: 10px;
        }
        th{
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        td{
            font: 14px "微软雅黑";
        }
        tbody tr{
            background-color: #f0f0f0;
        }
        tbody tr:hover{
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
</head>
<body>
    <table class="wrap">
        <thead>
            <tr>
                <th><input type="checkbox" id="j_chAll" /></th>
                <th>商品</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="other"/></td>
                <td>Iphone16</td>
                <td>8000</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="other"/></td>
                <td>华为mate70</td>
                <td>9000</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="other"/></td>
                <td>小米17</td>
                <td>5000</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="other"/></td>
                <td>vivo</td>
                <td>4000</td>
            </tr>
        </tbody>
    </table>
    <script>
        //1.获取元素
        //1-1 全选复选框
        var all = document.getElementById('j_chAll');
        //1-2 所有的其它复选框
        var others = document.getElementsByClassName('other');
        //通过复选框对象.checked可以获取到复选框的状态，true是勾选状态，false取消勾选的状态
        //通过复选框对象.checked = true/false 可以设置复选框的状态
       
        
        //给全选和全部选复选框注册点击事件
        all.onclick = function(){
            var flag = all.checked; //复选框的状态
            console.log(flag);
            //2.遍历所有的其它复选框
            for(var i = 0; i < others.length; i++){
                others[i].checked = flag; //设置复选框的状态
            }
        }

        //2.遍历所有的其它复选框
        for(var i = 0; i < others.length; i++){
            others[i].onclick = function(){
                var ch = checkCheckbox(others); //会返回一个truefalse
                //console.log(ch);
                all.checked = ch;//给全选或全部选复选框设置值
            }
        }


        //检查其它的复选框的状态，如果全选就返回true，只要有一个不选就返回false
        function checkCheckbox(chks){
            var ch = true;
            // 遍历
            for(var i = 0; i < chks.length; i++){
                //检查每一个的状态
                if(chks[i].checked == false){
                    ch = false;
                    break
                }
            }
            return ch;
        }


        // //看看all复选框，点击的时候发生了什么
        // var flag = all.checked;
        // console.log(flag);
        // all.onclick = function(){
        //     var flag = all.checked;
        //     console.log(flag);
        // }
    </script>
</body>
</html>

二、自定义属性操作

1.获取属性值

有两种方式：

element.属性，就可以获取到该元素属性的值
element.getAttribute(‘属性’)

区别：

element.属性，获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’)；主要是获取自定义属性（我们程序自定义的属性）

2.设置属性的值

有两种方式：

element.属性 = 值
element.setAttribute(‘属性名’,'属性值);

区别：

element.属性 = 值设置内置属性的值
element.setAttribute(‘属性名’,'属性值); 主要设置自定义属性的值

3.移除属性

element.removeAttribute(‘属性’);

4.案例

案例一：讲课案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06.获取属性值</title>
</head>
<body>
    <div id="demo" index="1" class="nav">123</div>

    <script>
        //1.获取到div对象。根据id获取是获取到一个对象
        var div = document.getElementById('demo');
        console.log(div.id);    //获取div对象中id属性的值
        console.log(div.getAttribute('id')); //获取div这个对象中id这个属性的值
        console.log(div.index);    //***获取失败，对象.属性名只能获取本身自有属性，不能获取自定义属性
        console.log(div.getAttribute('index')); //获取div这个对象中index这个属性的值

        //2.设置对象的属性值值
        //2-1 element.属性 = '值'
        div.id = 'test'
        console.log(div.id);
        div.className = 'navs'
        console.log(div.className);

        //2-2 element.setAttribute('属性名','值').主要针对的是自定义属性
        div.setAttribute('index',222)
        console.log(div.getAttribute('index'));
        div.setAttribute('class','abded')
        console.log(div.className);

        //3.移除自定义属性    removeAttribute('属性名')
        div.removeAttribute('index')
        div.removeAttribute('class');
    </script>
</body>
</html>

案例二：tab栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07tab</title>
    <style>
        *{margin: 0; padding: 0;}
        ul li{
            list-style: none;
        }
        .tab{
            width: 978px;
            margin: 100px auto;
        }
        .tab_list{
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        .tab_list li{
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0px 20px;
            text-align: center;
            cursor: pointer;
        }
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        .item {
            display: none;
        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab_list" id="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>

        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障内容：京东商城向您保证所售商品均为正品行货，京东自营商品开具机打发票或电子发票。
            </div>
            <div class="item">
                手机收到了。特别特别棒，货比三家才买的，店主人很好，回答问题很有耐心，也很详细，有需要还会再来的
            </div>
            <div class="item">
                手机社区：心中疑惑就问问买过此商品的同学吧~我要提问
            </div>
        </div>

    </div>


    <script>
        //1.获取元素
        var tab_list = document.getElementById('tab_list');
        var lis = tab_list.getElementsByTagName('li');
        var items = document.getElementsByClassName('item');
        //console.log(lis);
        //2.利用for循环给li绑定点击事件
        for(var i = 0; i < lis.length; i++){
            //给每个li设置一个索引号
            lis[i].setAttribute('index',i);
            //注册事件
            lis[i].onclick = function(){
                //2-1 li点击有红色样式
                //其它要干掉
                for(var j = 0; j < lis.length; j++){
                    lis[j].className = '';
                }
                //给当前点击的红色样式
                this.className = 'current'


                //2-2 点击li下面显示的内容模块变化
                var index = this.getAttribute('index');
                console.log(index);
                //其它的要隐藏
                for(var k = 0; k < items.length; k++){
                    items[k].style.display = 'none'
                }
                items[index].style.display = 'block'
            }
        }
    </script>
</body>
</html>

5.H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存在页面中而不用保存在数据库中

自定义一属性获取是通过getAttribute(‘属性名’) 获取

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

h5给我们新增了自定义属性

设置自定义属性
h5规定自定义属性data- 开头作为属性名并赋值
如：
设置：element.setAttribute(‘data-index’,1);

获取自定义属性
兼容属性获取：element.getAttribute(‘data-index’);
h5新增了获取方式：element.dataset.index 或者 element.dataset(‘index’)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>08.H5自定义属性</title>
</head>
<body>
    <div id="my" getTime="20" data-index="2" data-list-name="admin"></div>

    <script>
        //1.获取元素
        var div = document.getElementById('my');

        console.log(div.getAttribute('getTime'));

        //设置一个h5属性
        div.setAttribute('data-time',20);
        console.log(div.getAttribute('data-time'));

        //h5新增的自定义属性的方法(  只能是data-  开头)
        //dataset：是一个集合里面存放了所有以data开头的自定义属性
        console.log(div.dataset);
        console.log(div.dataset.index); //2
        console.log(div.dataset['index']); //2

        //如果自定义属性里面有多个链接的单词，我们获得时候采用驼峰写法
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>
</body>
</html>

三、节点操作

1.节点概述

节点：网页中所有的内容都是节点（标签、属性、文本、注释等等），在DOM中，节点使用node表示

html DOM 树种所有的节点都可以通过javaScript来进行访问，所有的HTML元素（节点）均可被修改，也可以创建或删除

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>09节点概述</title>
</head>
<body>
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>

    <div id="box">
        <span class="erweima">我是二维码</span>
    </div>
    <script>
        var box = document.getElementById('box');
        console.dir(box);
    </script>
</body>
</html>

在这里插入图片描述

元素节点 nodeType 为 1
元素节点 nodeType 为 2
元素节点 nodeType 为 3 (文本节点内包含文字、空格、换行等等)

我们实际开发种，节点操作主要是操作元素节点

2.父节点

node.parentNode

属性可以返回某节点的父节点，注意是最近的一个父节点

如果指定的节点没有父节点，返回null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10父节点</title>
</head>
<body>
    <div>我是div</div>
    <span>我是span</span>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>

    <div id="box">
        <span class="erweima" id="erweima">我是二维码</span>
    </div>
    <script>
        //获取到二维码对象
        var erweima = document.getElementById('erweima');
        //node.parentNode 得到的是离元素最近的父节点，如果找不到父节点就返回null
        console.dir(erweima.parentNode);  //div#box
    </script>
</body>
</html>

3.子节点

所有的子节点：

parentNode.childNodes

返回的是包含指定节点的子节点的集合，该集合即时更新的集合

**注意：**返回值里面包含了所有的子节点，包括元素节点、文本节点等

如果只需要获取到里面的元素节点，则需要专门的处理，所以我们一般不提倡使用childNodes

parentNode.children

是一个只读属性，返回的是所有的子元素节点，它只返回子元素节点，其它节点不返回（终点掌握这个）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11子节点</title>
</head>
<body>
    <div>我是div</div>
    <span>我是span</span>
    <ul id="ul">
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>

    <div id="box">
        <span class="erweima" id="erweima">我是二维码</span>
    </div>
    <script>
        //获取ul
        var ul = document.getElementById('ul');
        //获取ul中所有的li
        //var lis = ul.getElementsByTagName('li');
        var lis = ul.children
        console.log(lis);

        //1.字节点
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType); //3
        console.log(ul.childNodes[1].nodeType); //1

        console.log(ul.children);
    </script>
</body>
</html>

3.1 获取子节点

第一个节点和最后一个

parentNode.firstNode ;返回第一个子节点，找不到就返回null，通过也页包含所有的节点

parentNode.firstElementNode: 返回一个子元素节点，找不到就是null

parentNode.lastChild :最后一个子节点

parentNode.lastElementChild: 返回最后一个子元素节点，找不到就是null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13.新浪下拉菜单</title>
    <style>
        *{margin: 0; padding: 0;}
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
            font-size: 14px;
        }
        #nav{
            margin: 100px;
        }
        #nav>li{
            position: relative;
            float: left;
            width: 80px;
            height: 40px;
            text-align: center;
        }
        #nav li a{
            display: block;
            width: 100%;
            height: 100%;
            line-height: 40px;
            color: #333;
        }
        #nav ul{
            display: none;
        }
        #nav>li>a:hover{
            background-color: #eee;
        }
        #nav ul li a:hover{
            background-color: #fff5da;
        }
    </style>
</head>
<body>
    <ul id="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>
        //1.获取元素
        var nav = document.getElementById('nav');
        //2.获取li
        var lis = nav.children;
        console.log(lis);
        //3.循环注册事件
        for(var i = 0;i < lis.length; i++){
            lis[i].onmouseover = function(){
                //this.children[1] 表示当前这个li种的ul
                this.children[1].style.display = 'block'
            }
            lis[i].onmouseout = function(){
                this.children[1].style.display = 'none'
            }
        }
    </script>
</body>
</html>

3.2 兄弟节点

下一个兄弟 : nextElementSibling

上一个兄弟 : previousElementSibling

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>我是h2</h2>
    <div id="div">我是div</div>
    <span>我是span</span>

    <script>
        var div = document.getElementById('div');
        //1.nextSibling   下一个兄弟节点，包含了元素节点或者是文本节点等等  (了解)
        console.log(div.nextSibling); //下一个
        console.log(div.previousSibling); //上一个

        //2.nextElementSibling 下一个兄弟  previousElementSibling 上一个兄弟  [掌握]
        div.nextElementSibling.style.backgroundColor='pink'
        console.log(div.nextElementSibling); //下一个
        console.log(div.previousElementSibling); //上一个
        div.previousElementSibling.style.backgroundColor = 'red'

    </script>
</body>
</html>

4.创建添加节点

创建节点：docuemnt.createElement(tagName’);
java添加节点：node.appendChild(child);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="ul">
        <li>123</li>
    </ul>
    <script>
        //1.创建节点
        var li = document.createElement('li');
        //2.添加节点到父节点
        var ul = document.getElementById('ul');
        //加入到父节点里子元素的最后
        ul.appendChild(li);
        //ul.children[1].innerHTML = '456'

        //添加节点
        var li2 = document.createElement('li');
        //用insertBefore(参数一是创建的新元素，参数二添加的位置)
        ul.insertBefore(li2,ul.children[0]); //将新的节点，加入到ul的第一个孩子的位置
        console.log(li);
    </script>
</body>
</html>

5.案例

发布留言

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>16.留言板</title>
    <style>
        *{margin: 0; padding: 0;}
        body{
            padding: 100px;
        }
        textarea{
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;  /*不让修改大小*/
        }
        ul{
            width: 300px;
            padding: 5px;
            background-color: rgb(245,209,243);
            color: #fff;
            font-size: 14px;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <textarea name="" id="comment"></textarea>
    <br/>
    <button id="btn">发布</button>
    <ul id="ul">
    </ul>

    <script>
        //1.获取元素
        var btn = document.getElementById('btn');
        var comment = document.getElementById('comment');
        var ul = document.getElementById('ul');
        //2.注册事件
        btn.onclick = function(){
            //判断是否有输入内容
            if(comment.value == ''){
                alert('请输入内容');
                return false;
            } else {
                //2-1 创建元素
                var li = document.createElement('li');
                //设置内容
                li.innerHTML = comment.value
                //2-2 添加元素
                //ul.appendChild(li); //添加到后面
                ul.insertBefore(li,ul.children[0]);
                //添加完成后清除输入框种的内容
                comment.value = ''
            }
        }
    </script>
</body>
</html>