Lesson5：JavaScript(WebAPI)

<body>
    <div>
        <span>hello1</span>
        <span>hello2</span>
    </div>
    <script>
        let div = document.querySelector('div');
        // 获取div的内部内容
        console.log(div.innerText)
        // 修改div的内部内容
        div.innerText = 'world<span>hello</span>'
    </script>
</body>

可以看到，通过innerText无法获取到div内部的html结构，只能得到文本内容。

修改页面的时候也会把span标签当成文本进行设置。

5.1.2 innerHTML

设置或获取HTML语法表示的元素的后代。

<body>
   <div class="one">嘻嘻嘻</div>
   <div class="two">
       <ul>
           <li>11</li>
           <li>22</li>
           <li>33</li>
           
       </ul>
   </div>
   <script>
       let div1 = document.querySelector('.one');
       let div2 = document.querySelector('.two');
       console.log(div1.innerHTML);
       console.log(div2.innerHTML);
       div1.innerHTML = '<h1>我是嘻嘻嘻2</h1>';
       div2.innerHTML += '<h3>我是新加到div2上的</h3>';
   </script>
</body>

可以看到innerHTML不光能获取到页面的html结构，同时也能修改结构。并且获取到的内容保留会空格和换行。

5.2 获取/修改元素属性

可以通过对象的属性来直接修改，就能直接影响到页面的显示效果。

点击按钮，每按一下，切换按钮的状态。

<body>
    <input type="button" value="按钮按下">
    <script>
        let button = document.querySelector('input');
        button.onclick = function(){
            if(button.value == "按钮按下"){
                button.value = "按钮弹起";
            }else if(button.value == "按钮弹起"){
                button.value = "按钮按下";
            }
        }
    </script>
</body>

5.3 获取修改表单(input标签)元素属性

表单(主要是指input标签)的属性都可以通过DOM来修改
value: input的值.
disabled: 禁用
checked: 复选框会使用
selected: 下拉框会使用
type: input的类型(文本,密码,按钮,文件等)

练习1：密码和文本切换

<body>
    <input type="text"  id="text1">
    <input type="button" value="切换" id="button">
    
    <script>
        let text = document.querySelector('#text1');
        let button = document.querySelector('#button');
        button.onclick = function(){
            if(text.type == 'text'){
                text.type = 'password';
            }else if(text.type == 'password'){
                text.type = 'text';
            }
        }
    </script>
</body>

练习2：点击计数

<body>
    <input type="text" id="num" value="0">
    <input type="button" value="加1" id="but-add">
    <input type="button" value="清空" id="but-clc">
    <script>
        let text = document.querySelector('#num');
        let butadd = document.querySelector('#but-add');
        let butclc = document.querySelector('#but-clc');
        butadd.onclick = function(){
            text.value++;
        }
        butclc.onclick = function(){
            text.value = 0;
        }
    </script>
</body>

5.4 获取修改样式属性

css中指定元素的属性，都可以通过JS来修改。

5.4.1 行内样式操作

<body>
    <!-- 行内样式是指：style以属性的方式写在元素内部 -->
    <div style="font-size: 30px;">yesLove</div>
    <script>
        let div = document.querySelector('div');
        // style是div这个元素的属性
        // style本身也是一个对象，里面存放了当前元素的行内样式,每个css属性都是style对象的一部分
        // css的对象叫font-size。由于在JS里面不能使用-作为变量名，此处需要转为驼峰，所以在JS中获取的时候使用fontSize
        // div.style.fontSize 是一个字符串，先转成数组类型
        let fontsize = parseInt(div.style.fontSize);
        div.onclick = function(){
            fontsize = fontsize + 5;
            // 单位不能少
            div.style.fontSize = fontsize + '5px';
        }
    </script>
</body>

5.4.2 类名样式操作

element.className = '类名';

适用于要修改的样式很多的情况。因为class是JS的保留字，无法作为属性名，所以名字叫做className

很多时候样式可能比较复杂.涉及到很多个属性来进行操作。

使用style 的方式设置，就得一个一个属性进行设置就比较麻烦。

通过CSS里的类就可以达到一次赋值,设置多个CSS属性这样的效果。只要把CSS类名设置上去，此时这个类名里面的属性就会被应用到当前的元素上。

<body>
    <div class="light">
        <ul>
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
        </ul>
    </div>
    <style>
        div {
            width: 300px;
            height: 300px;
        }
        .light {
            background-color: rgb(230, 201, 201);
            color: black;
        }
        .night {
            background-color: gray;
            color: greenyellow;
        }
    </style>
    <script>
        let div = document.querySelector('div');
        div.onclick = function(){
            if(div.className == 'light'){
                div.className = 'night';
            }else if(div.className == 'night'){
                div.className = 'light';
            }
        }
    </script>
</body>

六、操作节点

6.1 新增节点

6.1.1 创建元素节点（createElement）

虽然创建出新的div，但是div并没有显示在页面上。因为新创建的节点并没有加到DOM树中。

6.1.2 插入节点到dom树中

①使用appendChild将节点插入到指定节点的最后一个孩子的后面

②使用insertBefore将节点插入到指定节点之前

注意：如果针对一个节点插入两次，则只有最后一次生效，相当于把元素移动了。

6.2 删除节点(removeChild)

被删除节点只是从dom树被删除了,但是仍然在内存中，可以随时加入到dom树的其他位置.
如果上例中的child节点不是element节点的子节点，该方法会抛出异常.

七、猜数字实例练习

<body>
    <input type="button" value="重新开始一局游戏" id="reset" >
    <br>
    <div>
        <span>请输入要猜的数字：</span>
        <span><input type="text" id="guessNum"></span>
        <span><input type="button" value="猜" id="guess"></span>
    </div>
    <div>
        <span>已经猜的次数</span>
        <span id="guessCount"></span>
    </div>
    <div>
        <span>结果：</span>
        <span id="result"></span>
    </div>
    <script>
        // 把需要用的JS的DOM对象都准备好
        let resetButton = document.querySelector('#reset');
        let inputNum = document.querySelector('#guessNum');
        let guessButton = document.querySelector('#guess');
        let spanCount = document.querySelector('#guessCount');
        let spanResult = document.querySelector('#result');

        // 生成一个随机数
        let toGuess = Math.floor(Math.random()*100)+1 ; //math.random()生成[0,1) *100 =>[0,100) =>取整+1 [1,100]
        console.log(toGuess);
        let count = 0;
        
        // 判断
        guessButton.onclick = function(){
            // 输入的是String类型，需要进行类型转换
            let guess = parseInt(inputNum.value);
            if(guess < toGuess){
                spanResult.innerHTML= '猜小了';
                spanResult.style.color = 'red';
            }else if(guess > toGuess){
                spanResult.innerHTML = '猜大了';
                spanResult.style.color = 'blue';
            }else if(guess == toGuess){
                spanResult.innerHTML = '猜对了';
                spanResult.style.color = 'green';
                return;
            }
            count++;
            spanCount.innerHTML = count;
        }
        resetButton.onclick = function(){
            inputNum.value = '';
            spanCount.innerHTML = '';
            spanResult.innerHTML = '';
            toGuess = Math.floor(Math.random()*100)+1 ;
        }
    </script>
</body>

刘减减

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
Lesson5：JavaScript(WebAPI)

主要介绍了JavaScript的WebAPI部分。学习DOM API，我们可以实现操作页面结构的功能。在操作页面中的对象之前，先通querySelector选中对象，选中对象后，可以使用innerHTML和innerText获取、修改元素的内容，可以修改元素的属性，可以修改表单元素属性，可以修改行内样式和类名样式，最后还可以实现新增节点和删除节点。新增节点分两步，createElement创建节点，appendChild和insertBefore插入节点；删除节点使用removeChild。
复制链接

扫一扫