1.11笔记 JavaScript应用

DOM基础

DOM的基本操作

查

获取DOM节点

document.getElementById('myId')

document.getElementsByTagName() (注意：Elements是复数)

document.getElementsByClassName()

//CSS选择器

document.querySelector()

document.querySelectorAll()

所有的CSS选择器都适用，例如

querySelector('main a')
querySelector('main *') //*是通配选择器，选择所有元素
querySelector('main>li')

//获取相邻、父子节点

所有子节点：children

父节点：parentNode

上个、下个兄弟节点：previousSibling、nextSibling

改

innerHTML：可以识别字符串中的标签

title.innerHTML = '<strong>标题</strong>'

innerContent：不能识别字符串中的标签

innerText：修改文字内容

增

创建节点：createElement(TagName)

插入到子节点末尾：appendChild()

删

删除自己：Node.remove()

DOM事件

事件绑定

onclick

不支持绑定多个事件处理函数

addEventListener

(事件类型，处理函数，{capture: true | false}，{once: true | false})

第三个参数定义是否该类型的事件捕获阶段传播到该 EventTarget 时触发，默认值为false。

捕获阶段触发：则点击子节点，父节点的事件会先触发，再触发子节点的事件；跟冒泡阶段触发相反。

第四个参数表示事件是否只触发一次。

支持绑定多个事件处理函数，对click事件绑定多个处理函数，后面的不会覆盖前面的，都有效

imgDom.addEventListener('click',function(){})
imgDom.addEventListener('click',function(){})
imgDom.addEventListener('click',function(){})

BOM

navigator.getBattery 获取电量相关信息

navigator.getBattery.then(battery => {
    console.log(battery.charging); //是否在充电
    console.log(battery.level); //电池电量
})

window.confirm() 确认框

更多浏览器API

Ajax

实现Ajax的方法：

1、使用XHR方式

使用步骤：

//1、实例化XMLHttpRequest对象，与服务器信息
let httpRequest = new XMLHttpRequest();
if(!httpRequest){
    alert('浏览器不支持XMLHttpRequest')
} else {
    //2、定义响应后的处理函数 onreadystatechange
    httpRequest.onreadystatechange = function(){
        if(httpRequest.readyState === httpRequest.DONE){
            if(httpRequest.status === 200){
                //处理逻辑
            } else {
                //处理逻辑
            }
        }
    };
    //3、定义请求头
    httpRequest.open(
        "GET"，
        “https://xxx"
    );
    //4、发送请求
    httpRequest.send();
}
​

2、使用fetch

fetch("https://xxx")
.then(function(response){
    return response.json(); //将数据转换为json格式
})
.then(function(myJson){
    console.log(myJson);
})