JavaScript-Web APIs、DOM

目录1. Web APIs和JS基础的关联性1）JS的组成2）API和Web API2. DOM1）DOM树2）获取网页元素根据ID获取根据标签名获取通过HTML5新增的方法获取特殊元素获取（body、html）3）事件基础常见的鼠标事件4）操作元素1）改变元素的内容2）常用元素的属性操作3）表单元素的属性操作4）样式属性操作5）排他思想5）节点操作1. Web APIs和JS基础的关联性1）JS

qq_52822043

538人浏览 · 2022-03-21 21:44:54

qq_52822043 · 2022-03-21 21:44:54 发布

1. Web APIs和JS基础的关联性

1）JS的组成

2）API和Web API

API（Application Programing Interface）：应用程序编程接口，是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

API就是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能

Web API：是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。

Web API主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果
Web API一般都有输入和输出（函数的传参和返回值），很多都是方法（函数）

2. DOM

文档对象模型（Document Object Model）：简称DOM，是W3C推荐的处理可拓展标记语言（HTML或XML）的标准编程接口。通过这些DOM接口可以改变网页的内容、结构和样式。

1）DOM树

DOM把以下内容都看作是对象

2）获取网页元素

根据ID获取
getElementById('id名')方法获取带有ID的元素对象

<body>
    <div id="time">2022-03-01</div>
    <script>
        //1.文档是从上往下加载的，所以得先有标签，script写到标签的下面
        //2.通过id获得元素的方法，参数id是大小写敏感的字符串
        //3.返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        //4.打印返回的元素对象，可以更好地查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

结果为：

根据标签名获取
getELementsByTagName('标签名')方法可以返回带有指定标签名的对象的集合

还可以获取父元素内部所有指定标签名的子元素：

父元素必须是单个对象（元素对象），获取的时候不包括父元素自己

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <ol id="ol">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ol>
    <script>
        //1.返回的是获取的元素对象的集合，以伪数组的形式存储
        var list = document.getElementsByTagName('li');
        console.log(list);
        // console.log(list[0]);
        //2.可以通过遍历伪数组，来获取得到的元素对象
        for(var i = 0; i < list.length; i++) {
            console.log(list[i]);
        }
        //3.如果页面中只有一个元素，返回的还是伪数组的形式
        //4.如果页面中没有这个元素，返回的是空的伪数组的形式

        //5.element.getELementsByTagName('标签名'),element->父元素必须是指定的单个元素
        // var ol = document.getElementsByTagName('ol');
        // console.log(ol[0].getElementsByTagName('li'));
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>
</body>

结果为：

通过HTML5新增的方法获取

<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <ul id="nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        //1.getElementsByClassName('类名'):根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        //2.querySelector('选择器'):返回指定选择器的第一个元素对象，选择器需要根据类或者id加符号
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var firstNav = document.querySelector('#nav');
        console.log(firstNav);
        var firstLi = document.querySelector('li');
        console.log(firstLi);
        //3.querySelectorAll('选择器'):返回指定选择器的所有元素对象
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
    </script>
</body>

结果为：

特殊元素获取（body、html）

<body>
    <script>
        //1.获取body对象元素
        var bodyElement = document.body;
        console.log(bodyElement);
        //2.获取html对象元素
        var htmlElement = document.documentElement;
        console.log(htmlElement);
    </script>

</body>

结果为：

3）事件基础

事件：触发-响应机制

事件由三部分组成：

事件源：事件被触发的对象
事件类型：如何触发，具体是什么事件
事件处理程序：通过一个函数复制的方式来完成

执行事件的步骤：

获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数复制形式）

常见的鼠标事件

<body>
    <!-- 执行事件的过程 -->
    <button>登录</button>
    <script>
        //1.获取事件源
        var btn = document.querySelector('button');
        //2.绑定事件，注册事件
        //btn.onclick
        //3.添加事件处理程序
        btn.onclick = function() {
            alert('登录成功！')
        }
    </script>
</body>

结果：只要点击登录按钮，就会显示"登录成功！ "

4）操作元素

1）改变元素的内容

<body>
    <button>显示今天的日期</button>
    <div>显示时间</div>
    <script>
        //1.获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        //2.注册事件->点击按钮时，自动显示系统的时间
        btn.onclick = function() {
            //改变了div元素里面的内容
            div.innerText = getDate();
        }
        function getDate() {
            var date = new Date();
            var year = date.getFullYear();
            //月份从0开始，所以+1
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            //星期得到的是数字
            var day = date.getDay();
            return '今天是' + year + '年' + month + '月' + dates + '日' + days[day];
        }
        
    </script>
</body>

结果为：

<body>
    <div></div>
    <p>
        123
        <span>abc</span>
    </p>
    <script>
        //1.innerText不识别HTML标签，并且会自动去除空格和换行
        var div = document.querySelector('div');
        // div.innerText = '<strong>文本</strong>';
        //2.innerHTML识别HTML标签，是会保留空格和换行的
        div.innerHTML = '<strong>文本</strong>';
        //3.都是可读写的，可以获取元素里面的内容
        var p = document.querySelector('p');
        console.log(p.innerText);
        console.log(p.innerHTML);
    </script>
</body>

结果为：

2）常用元素的属性操作

<body>
    <img src="images/s.gif" alt="">
    <div>上午好</div>
    <script>
        //1.获取元素对象
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        //2.得到当前小时
        var date = new Date();
        var h = date.getHours();
        //3.判断时间->操作元素的属性
        if (h < 12) {
            img.src = 'images/s.gif';
            div.innerHTML = '上午好';
        }
        else if (h < 18) {
            img.src = 'images/x.gif';
            div.innerHTML = '下午好';
        }
        else {
            img.src = 'images/w.gif';
            div.innerHTML = '晚上好';
        }
    </script>
</body>

结果为：

3）表单元素的属性操作

<body>
    <button>登录</button>
    <input type="text" value="请输入">
    <script>
        //1.获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        //2.注册事件，处理程序
        btn.onclick = function() {
            //表单里面的值，是通过value来修改的
            input.value = '登录按钮被点击';
            //当按钮被点击之后，禁用这个按钮，this指向的是时间函数的调用者btn
            this.disabled = true;
        }
    </script>
</body>

结果为：

4）样式属性操作

JS里面的样式采取驼峰命名法，eg.fontSize, backgroundColor
JS修改style样式操作，产生的是行内样式，CSS权重比较高
如果样式修改较多，可以采取操作类名方式更改元素样式
class是个保留字，因此使用className来操作元素类名属性
className会直接更改元素的类名，会覆盖原先的类名

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        //1.获取元素
        var div = document.querySelector('div');
        //2.注册事件 处理程序
        div.onclick = function() {
            this.style.width = '300px';
            this.style.backgroundColor = '#222';
        }
    </script>
</body>

结果为：

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
        .change {
            width: 300px;
            height: 300px;
            background-color: purple;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="first"></div>
    <script>
        //1.获取元素
        var div = document.querySelector('div');
        //2.注册事件 处理程序
        div.onclick = function() {
        // className会直接更改元素的类名，会覆盖原先的类名
        //如果想要保留原先的类名，可以在className加上原先的类名 
            this.className = 'first change';
        }
    </script>
</body>

结果为：

5）排他思想

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

所有元素全部清除样式
给当前元素设置样式

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        //1.获取元素
        var btns = document.getElementsByTagName('button');
        //2.注册事件 处理程序
        for(var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                //排他思想
                //1)所有元素全部清除样式
                for(var j = 0; j < btns.length; j++) {
                    btns[j].style.backgroundColor = '';
                }
                //2)给当前元素设置样式
                this.style.backgroundColor = 'skyblue';
            }
        }

    </script>
</body>

结果为：