JS基础学习小记（二）

DOM:

1.文档对象模型（Document Object Model）标准编程接口

2.一个页面就是一个文档，DOM中使用document表示。页面中的所有标签都是元素，DOM中使用element表示。

网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。DOM把以上内容都看做是对象。

 

• 根据id获取 document.getElementById()  返回的是元素对象

    <div id="time">2020-6-8</div>
    <script>
        var tm = document.getElementById('time');
       
         console.log(tm);
        //输出：<div id="time">2020-6-8</div>
    </script>

• 根据标签名获取 document.getElementByTagName() 返回的带有指定标签名的对象集合

    <ul>
        <li>hhhhhh1</li>
        <li>hhhhhh2</li>
        <li>hhhhhh3</li>
        <li>hhhhhh4</li>
        <li>hhhhhh5</li>
    </ul>
    <ul id="nav">
        <li>hsd</li>
        <li>hsd</li>

    </ul>
    <script>
        var lis = document.getElementsByTagName('li');
        //以伪数组的形式 [li,li,li,li]这样的形式存储
        console.log(lis.[0]);
        //输出第一个li  输出形式:<li>hhhhhh1</li>

        var navLis = document.getElementById('nav').getElmentByTagName('li');
        //先选中元素，再选择其中的li标签
    </script>

•  根据类名获取document.getElementByClassName('类名');返回一个对象集合
•  根据指定选择器document.querySelector('选择器'); 返回第一个元素对象
•  根据指定选择器document.querySelector('选择器'); 返回第一个元素对象

    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <script>
        var boxs = document.getElementsByClassName('box');
        //存储两个对象  输出形式： [div.box,div.box]

        var firstBox = document.querySelector('.box');  //  .是匹配class的
        //输出形式：     <div class="box">盒子1</div>

        var nav = document.querySelector('#nav'); //  #是匹配id的

    </script>

• innerText 和 innerHtml  读写元素中的内容 区别：Text不能识别html标签 Html可以，比如可以加粗文字<strong>保留空格和换行

<div id="title">编程语言</div>
<table border="1" id="table">
    <tr>
        <td id="td1">java</td>
        <td>java天下第一</td>
    </tr>
    <tr>
        <td>c++</td>
        <td>c++天下第一</td>
    </tr>
    <tr>
        <td >c#</td>
        <td id="td3">c#天下第一</td>
    </tr>
</table>
<button id="btn1">标头</button>
<button id="btn2">第一行，第一格</button>
<button id="btn3">第三行，第二格</button>
<script>
    var btn1 = document.getElementById('btn1');
    btn1.onclick = function () {
        var title = document.getElementById('title');
        alert(title.innerHTML);
    }

    var btn2 = document.getElementById('btn2');
    btn2.onclick = function () {
        var tr1 = document.getElementById('td1');
        alert(tr1.innerHTML);
    }

    var btn3 = document.getElementById('btn3');
    btn3.onclick = function () {
        var tr3 = document.getElementById('td3');
        alert(tr3.innerHTML);
    }
</script>

//用对象.innerHtml来显示元素内容

• 排他思想——用循环给每个按钮绑定点击事件，只想要某个按钮实现某种样式。

所有元素全部清除样式，给当前元素设置样式，顺序不能颠倒，先干掉其他再留下自己

    <button>按钮</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        var btns = document.getElementsByTagName('button');
        //btns得到的是伪数组，里面的每一个元素 btns[i]
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                for (var j = 0; j < btns.length; j++) {
                //清除所有按钮样式
                    btns[i].style.backgroundColor = '';
                }
                //单独设施当前按钮样式
                this.style.backgroundColor = 'pink';
            }
        }
    </script>