HTML5核心
@ 姜波 | 星期五,六月 21 日,2019 年 | 2 分钟阅读 | 更新于 星期五,六月 21 日,2019 年

DOM元素

获取单个元素

var obj=document.querySelector("li");

获取多个元素

var obj=document.querySelectorAll("li");

类名操作

<input type="button" name="" value="添加类名" class="add">
<input type="button" name="" value="移除类名" class="remove">
<input type="button" name="" value="切换类名" class="toggle">
<input type="button" name="" value="是否包含类名" class="contains">
//获取页面中元素
var  add_btn=document.querySelector(".add");
var  remove_btn=document.querySelector(".remove");
var  toolge_btn=document.querySelector(".toggle");
var  contains_btn=document.querySelector(".contains");

//添加类名
add_btn.onclick=function() {
    div_obj.classList.add("bg");
}

//移除类名
remove_btn.onclick=function () {
    div_obj.classList.remove("bg");
}

//切换类名
toolge_btn.onclick=function() {
    div_obj.classList.toggle("bg");
}

//是否包含类名
contains_btn.onclick=function() {
    div_obj.classList.contains('bg');
}

自定义属性

<div class="nav" data-test="" data-test-abc="" data-hh="">123</div>
var nav=document.querySelector(".nav");
nav.dataset.test="test";
nav.dataset.TestAbc="TestAbc";
nav.dataset["hh"]="呵呵";

文件读取

文件读取

<input type="file" name="">
var input_file=document.querySelector("input");
input_file.onchange=function() {
    var files=this.files;
    var file=files[0];

    //创建读取器
    var reader=new FileReader();
                            
    //将数据读取成二进制方式
    reader.readAsBinaryString(file);
    reader.onload=function(){
        console.log(reader.result);
    }
}
var input_file=document.querySelector("input");
input_file.onchange=function() {
    var files=this.files;
    var file=files[0];
    var reader=new FileReader();
                            
    //将数据读取成文本形式
    reader.readAsText(file);
    reader.onload=function(){
        console.log(reader.result);
    }
}
input_file.onchange=function() {
    var files=this.files;
    var file=files[0];
    var reader=new FileReader();
         
    //将数据读取成url形式
    reader.readAsDataURL(file);  	   	    
    reader.onload=function(){
        console.log(reader.result);
    }
}

读取图片显示

<input type="file">
var file_btn=document.querySelector("input");
file_btn.onchange=function() {
    var file=this.files[0];
                            
    //判断后缀名是否合法
    var filename=file.name.substring(file.name.lastIndexOf("."));
    var imgs=[".png",".jpg","gif",".ico"];
    var flag=false;
    for(var i=0; i<imgs.length; i++) {
        if(imgs[i]==filename) {
            flag=true;
            break;
        }
    }
    if(flag) {
        var reader=new FileReader();
        reader.readAsDataURL(file);
        reader.onload=function() {
            var img=document.createElement("img");
            img.src=reader.result;
            document.body.appendChild(img);
        }
    }else {
        alert("文件类型不正确,请重新选择");
    }
}

地理定位

获取一次当前位置

window.navigator.geolocation.getCurrentPosition(success,error);

//成功获取地理位置时候的回调函数
function success (msg,position) {
    console.log(msg,position);
}

//地理位置获取失败时候的回调函数
function error (msg) {
    console.log(msg);
}

实时获取地理位置信息

window.navigator.geolocation.watchPosition(success,error);
function success (msg,pt) {
    console.log(msg,pt);
}
function error (msg) {
    console.log(msg);
}

多媒体

操作多媒体

<video src="1.mp4"></video>
<input type="button" name="" value="播放" class="bt1">
<input type="button" name="" value="暂停" class="bt2">
<input type="button" name="" value="快进" class="bt3">
<input type="button" name="" value="停止" class="bt4">
var video=document.querySelector("video");
var bt1=document.querySelector(".bt1");
var bt2=document.querySelector(".bt2");
var bt3=document.querySelector(".bt3");
var bt4=document.querySelector(".bt4");

video.addEventListener("canplay",function(){
    //点击播放
    bt1.onclick=function(){
        video.play();
    }

    //点击暂停
    bt2.onclick=function(){
        video.pause();
    }
    
    //点击快进
    bt3.onclick=function(){
        video.playbackRate=2;
    }

    //停止
    bt4.onclick=function(){
        video.load();
    }
})

网络状态

网络状态

//获取当前网络状态
var state=window.navigator.onLine;
if(state) {
    alert("您好,当前处于联网状态");
}else {
    alert("当前处于断网状态");
}

网络状态获取事件

//当联网的时候触发该事件
window.ononline=function () {
    alert("在线");
}

//当断网的时候触发该事件
window.onoffline=function() {
    alert("断网");
}

本地存储

localStorage/sessionStorage

<input type="button" name="" class="bt1" value="添加">
<input type="button" name="" class="bt2" value="删除">
<input type="button" name="" class="bt3" value="获取">
<input type="button" name="" class="bt4" value="清空">
<input type="button" name="" class="bt5" value="索引获取">
var bt1=document.querySelector(".bt1");
bt1.onclick=function() {
    window.localStorage.setItem("name","zs");
}

var bt2=document.querySelector(".bt2");
bt2.onclick=function() {
    window.localStorage.removeItem("name");
}

var bt3=document.querySelector(".bt3");
bt3.onclick=function(){
    window.localStorage.getItem("name");
}

var bt4=document.querySelector(".bt4");
bt4.onclick=function(){
    window.localStorage.clear();
}

var bt5=document.querySelector(".bt5");
bt5.onclick=function(){
	window.localStorage.key(1)
}
html
保存为图片

公众号

Image text

QQ

Image text

微信

Image text

微信打赏

Image text

社交链接