WEB入门浅谈05

JavaScript

DOM API

创建/删除元素

创建元素的过程可以理解为在DOM树上添加新节点
1、创建新的节点document.createElement('li');引号内就是要新建的标签名
2、寻找合适的位置，把这个节点添加到这棵树上ul.appendChild(li);

    <ul></ul>
    <button onclick="addLi('qqq')">增加</button>
    <script>
        addLi('lit');
        addLi('qqq');
        function addLi(content) {
            //创建出一个li标签
            let li = document.createElement('li');
            li.innerHTML = content;
            let ul = document.querySelector('ul');
            ul.appendChild(li);
        }
    </script>

删除元素
1、选中父元素
2、选中要删除的元素
3、删除removeChild()

    <ul>
        <li>过去的陈旧还在坚守</li>
        <li>内心已腐朽</li>
        <li>摇摇欲坠不停退后</li>
        <li>毁灭即拯救</li>
    </ul>
    <button onclick="rem()"></button>
    <script>
        function rem() {
            let ul = document.querySelector("ul");
            let li = document.querySelector('li');
            ul.removeChild(li);
        }
    </script>

DOM API 是非常多的，这里只介绍几个基础的。

到这里就可以来几个案例练练手~

页面案例

案例1：留言板

案例2：猜价格游戏

补充

innerHTML 这个属性只能获取到一般元素的内容，获取不到一些特殊元素的内容，比如 input 这种标签，innerHTML获取不到里面的内容，此时可以通过 value 属性进行获取
如：

let rets = document.querySelector('input');
console.log(rets.value);

let inputs = document.querySelectorAll('input');
let name = inputs[0].value;
let message = inputs[1].value;

如果要把input 标签里的内容清空，则可以：

inputs[0].value = '';
inputs[1].value = '';

---

JS中生成随机数

let num = Math.floor(Math.random()*100)+1;

---

刷新页面通过下面的代码进行，页面将回到初始状态

location.reload();