前端学习笔记11：WebAPI编程

HZWANG30

已于 2023-11-09 16:22:58 修改

阅读量166

点赞数

分类专栏：前端自学笔记文章标签：前端学习笔记

于 2023-11-09 10:07:13 首次发布

本文链接：https://blog.csdn.net/qq_44986029/article/details/131701199

版权

前端自学笔记专栏收录该内容

11 篇文章 1 订阅

订阅专栏

文章目录

1、JS的组成

在这里插入图片描述

2、相关概念

API（Application Programming Interface，应用程序编程接口），是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而无需访问源代码，或者理解内部工作机制的细节。
Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM、DOM），主要针对浏览器做交互效果。
DOM:（Document Object Model）是W3C组织推荐的处理HTML或XML的标准编程接口。

3、DOM

DOM将网页看做一个文档，将页面的标签作为元素表示；标签以及其属性、文本、注释等作为节点。
在这里插入图片描述

DOM获取元素

①根据ID获取，通过document.getElementById(“id号”)
参数id是大小写敏感的字符串、返回的是一个元素对象；
console.dir 打印返回的元素对象，更好的查看里边的元素和方法

<div id="time">2023-7-16</div>
<script>
    var time = document.getElementById("time");
    console.log(time);  //返回  <div id="time">2023-7-16</div>
    console.dir(time);   //返回元素对象 div#time
    console.log(typeof time);  //返回 object
</script>

②根据标签名获取，通过**document.getElementsByTagName(“标签名”)**可以返回带有指定标签名的对象的集合；或者通过 **element.getElementsByTagName(“标签名”)**获取某个标签中的某类标签的集合；

<ul>
    <li>知否知否，应是等你好久11</li>
    <li>知否知否，应是等你好久2</li>
    <li>知否知否，应是等你好久12</li>
    <li>知否知否，应是等你好久3</li>

</ul>
<ul id="nav">
    <li>生僻字</li>
    <li>生僻字</li>
    <li>生僻字</li>
    <li>生僻字</li>
</ul>
<script>
    var lis = document.getElementsByTagName('li');
    console.log(lis);  //一共获取到8个li标签
    console.log(lis[0]);   //返回第一个标签
    
    var nav = document.getElementById("nav");  //获得id为nav的标签
    var list = nav.getElementsByTagName('li'); //获得id为nav标签下的li标签
    console.log(list); //返回四个li标签
</script>

③根据类名获取，通过document.getElementsByClassName(“类名”) 返回元素集合；
④获取指定选择器的第一个元素对象 querySelector(标签选择器)；通过querySelector(‘选择器’)返回指定选择器第一个元素对象；

<div class="box">盒子1</div>
<div class="box">盒子2</div>
var first_boxs = document.querySelector('.box'); //返回 盒子1

⑤获取指定选择器的所有元素对象集合 document.querySelectorAll(标签选择器)
⑥获取body和html
获取body document.body
获取html document.documentElement;
⑦获得元素的属性
先通过var ys = document.querySelector(‘标签选择器’)获取元素
再通过ys.属性名或**ys.getAttribute(‘属性名’)**获取元素属性
二者区别：ys.属性名通常用于获取元素自带属性；ys.getAttribute(‘属性名’)通常用于元素自定义属性（通过index设置）
⑧修改元素的属性
方法一：ys.属性名直接赋值
方法二：ys.setAttribute(‘属性名’,‘属性值’)
⑨移除属性
div.removeAttribute(“属性名”)

4、事件

事件组成：

事件源（事件被触发的对象）、事件类型（如何触发什么事件）、事件处理程序（通过一个函数赋值完成）

<button id="btn">唐伯虎</button>
<script>
    var btn = document.getElementById('btn');
    btn.onclick = function() {
        alert('点秋香');
    }
</script>

常见鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

操作元素

①改变元素内容element.innerText
②改变元素内容element.innerHTML
二者区别：
innerText 不会识别HTML标签，并且除去内容的换行和空格;
innerHTML可以识别HTML标签，保留空格和换行
传统方法：

<button id="ldh">刘德华</button>
<button id="zxy">张学友</button><br>
<img src="images/ldh.jpg" alt="" title="刘德华">
<script>
    var ldh = document.getElementById('ldh')
    var zxy = document.getElementById('zxy')
    var img = document.querySelector('img')
    zxy.onclick = function() {
        img.src = 'images/zxy.jpg'
        img.title = '张学友'
    }
    ldh.onclick = function() {
        img.src = 'images/ldh.jpg'
    }
</script>

新方法：addEventListener，可以对一个事件源可以添加多个侦听器
事件源.addEventListener(type, listener, useCapture)
type：事件类型
listener：事件响应函数function

操作表单元素

可以操作的表单属性：
type value checked selected disabled

<div class="box">
    <label for="">
        <img src="images/close.png" alt="">
    </label>
    <input type="password">
    <script>
        var flag = 0
        var label = document.querySelector('img')
        var pwd = document.querySelector('input')
        label.onclick = function() {
            if (flag === 0) {
                label.src = 'images/open.png'
                pwd.type = "text"
                flag = 1
            } else {
                label.src = 'images/close.png'
                pwd.type = "password"
                flag = 0
            }
        }
    </script>
</div>

操作元素，修改元素的样式

方法一：
①获取元素 var ys = document.querySelector(‘标签选择器’)
②在注册事件中，ys.style.样式 = “属性”
方法二：
①将想要修改的样式写成一个类的样式

.change {
    background-color: purple;
    color: #fff;
    font-size: 25px;
    margin-top: 100px;
}

②触发事件之后，给需要改变属性的元素设置这个类
ys.className = ‘change’；
需要注意的是：会将原来的类名覆盖掉，可以在设置类名的时候保留原先的类

操作元素总结

在这里插入图片描述

节点操作（利用节点关系获取）

节点：
nodeType(节点类型) 1表示元素节点 2表示属性节点 3表示文本节点
nodeName(节点名称)
nodeValue(节点值)
①获取某个元素最近的父节点，元素.parentNode。如果找不到父节点就返回null
②获取某个元素的所有子节点，元素.childNodes。包含元素节点和文本节点
③获取某个元素的子元素节点，不包括文本节点，元素.children
④获取子元素的第一个子节点，找不到返回null，包含所有节点。元素.firstChild
⑤获取子元素的最后一个子节点，找不到返回null，包含所有节点。元素.lastChild
⑥获取子元素的第一个子元素节点，找不到返回null，包含所有节点。元素.firstElementChild。但是IE9有兼容性问题
⑦获取子元素的最后一个子元素节点，找不到返回null，包含所有节点。元素.lastElementChild。但是有IE9兼容性问题
⑧获取下一个兄弟节点 元素.nextSibling，包含元素节点和元素节点
⑨获取上一个兄弟节点 元素.previousSibling，包含元素节点和元素节点
⑩获取下一个兄弟元素节点 元素.nextElementSibling，只获取元素节点,但是IE9有兼容性问题
⑪获取上一个兄弟元素节点 元素.previousElementSibling，只获取元素节点,但是IE9有兼容性问题
⑫动态创建元素节点 document.createElement(‘tagName’)，
添加节点 将一个节点添加到父节点
父节点.appendChild(子节点)，在原来的子元素后边追加元素
父元素.insertBefore(字节点，指定元素)，在父元素的指定元素之前插入一个元素
⑬删除节点
父节点.removeChild(删除的元素)
⑭克隆节点
元素节点.cloneNode()，
参数为空或false，则只复制标签，不复制内容
参数为true，且复制标签内容