前端——JS之BOM与DOM与事件

BOM与DOM操作

BOM：浏览器对象模型(Browser Object Model) 用js代码操纵浏览器
DOM：文档对象模型(Document Object Model) 用js代码操纵标签

BOM操纵

window对象

window.innerHeight  //获取浏览器窗口高度
window.innerWidth  //获取浏览器窗口宽度

//打开一个新的浏览器窗口
window.open('https://www.bilibili.com/',
            '',
            'height=400px,width=400px,top=400px,left=400px')  
//第一个参数为网址，第二个参数写空即可，第三个参数写新窗口的大小跟打开位置

window.close()  //关闭当前页面

window子对象

window.navigator.appName  //查看浏览器名
window.navigator.appVersion  //查看浏览器版本号
window.navigator.userAgent  //用来表示当前是否是一个浏览器
window.navigator.platform //查看运行浏览器的操作系统

//window的子对象可以省略window不写——> navigator.userAgent

BOM

history对象

window.history.back() //使当前页面回退到上一次浏览的页面
window.history.forward() //使当前页面跳转到回退之前的页面
//就是浏览器窗口左上角的左右箭头的功能

location对象

window.location.href  //获取当前浏览器页面的url
window.location.href = url //使当前浏览器页面跳转到指定url
window.location.reload() // 刷新当前页面

弹出框

//警告框
alert('这是警告框') //undefined
//确认框
confirm('这是确认框') //返回值true(确认)、false(取消)
//提示框
prompt('这是提示框','这是默认值') //返回值就是用户输入的内容

计时器

<!--
setTimeout() 只执行一次
setInterval() 每隔多少秒执行一次，循环执行
两种计时器均已毫秒为单位

let t1 = setTimeout(func,time) func代表函数  time代表定时器时间
let t2 = setInterval(func,time)
clearTimeout(t1)
clearInterval(t2)
清除两种定时器，必须要有变量指代的定时任务才能清除
-->
<script>
	function func1() {
        alert('111')
    }
    let t = setTimeout(func1,3000); //以毫秒为单位，三秒后自动执行函数func1
    clearTimeout(t) //清除定时任务，必须要有变量指代的定时任务才能清除

    function func2() {
        alert('222')
    }
    function show() {
        let t2 = setInterval(func2,3000); // 每3秒执行一次
        function inner() {
            clearInterval(t2) //清除定时器
        }
        setTimeout(inner,9000)
    }
    show()
</script>

DOM操纵

DOM的概念

/*
DOM树的概念：所有的标签都可以称之为节点

JavaScript 可以通过DOM创建动态的 HTML：

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

DOM操作需要用关键字document起手
*/

查找标签

/*
id查找  直接返回值
类查找  返回数组
标签查找 返回数组
*/
document.getElementById('标签的id') //返回一个值
document.getElementsByClassName('标签的class')  //返回一个数组
document.getElementsByTagName('标签') //返回一个数组

let divEle = document.getElementsByTagName('div')[1] //根据情况来索引取值

间接查找

let pEle = document.getElementsByClassName('c1')[0] //根据情况来索引取值
pEle.parentElement //拿到当前节点的父节点(父节点->body->html)
pEle.parentElement.parentElement...

let divEle = document.getElementById('d1')
divEle.children  //拿到当前节点下的所有子标签（返回一个数组）
divEle.children[0]
divEle.firstElementChild //获取当前节点下第一个子节点
divEle.nextElementSibling //当前节点同级的下一个节点
divEle.previousElementSibling //当前节点同级的上一个节点

节点操作

/*
通过DOM操作动态的创建img标签
*/
let imgEle = document.createElement('img') //创建标签
imgEle.src = '图片路径' //给标签设置默认属性，无法设置自定义属性
imgEle.setAttribute('username','yumi') //既可以设置自定义属性，又可以设置默认属性

let divEle = document.getElementById('d1')
divEle.appendChild(imgEle) //标签内部添加元素(追加再尾部)

/*
创建文本标签
*/
let aEle = document.createElement('a')
aEle.href = 'https://www.bilibili.com/'

aEle.innerText = 'B站' //给标签设置文本内容

let divEle = document.getElementById('d1')
let pEle = document.getElementById('d2')
divEle.insertBefore(aEle,pEle) //添加标签内容，指定位置添加

/*
额外补充
	appendChild()
		removeChild()
		replaceChild()
	
setAttribute()  设置属性
	getAttribute()  获取属性
	removeAttribute()  移除属性
*/

// innerText与innerHTML的区别
/*
读的区别：
innerText：获取标签内所有的文本
innerHTML：获取内部文本以及所有标签

写的区别：
innerText：不识别html标签，直接作为一串的字符输出
innerHTML：能够始别html标签
*/

获取值操作

let seEle = document.getElementById('d2')
seEle.value //获取用户操作的数据（无法获取文件数据）

let fileEle = document.getElementById('d3')
fileEle.files //返回值为数组
fileEle.files[0]  //获取文件数据

class、css操作

let divEle = document.getElementById('d1')
divEle.classList //获取当前标签所有的类属性
//["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]

divEle.classList.remove('bg_red') //移除某个类属性
divEle.classList.add('bg_red') //添加类属性
divEle.classList.contains('c2') //验证该标签是否包含某个类属性
divEle.classList.toggle('bg_red') //类属性存在则删除，不存在则添加


//DOM操作css
let pEle = document.getElementsByTagName('p')[0]
pEle.style.color = 'skyblue' //以style为起手再进行css样式的修改
pEle.style.backgroundColor = 'yellow'
pEle.style.border = '3px solid red'

事件

达成事先设定的条件就会自动触发的动作

<!--绑定事件的两种方法-->
<!--方法一：onclick-->
<button onclick='func1()'>按钮1</button>
<button id='btn2'>按钮2</button>

<scripe>
	function func1() {
    	alert('按钮1的点击事件结果')
    }
    
    <!--方法二：查找标签-->
    let btnEle = document.getElementById('btn2')
    btnEle.onclick = function() {
    	alert('按钮2的点击事件结果')
    }
</scripe>

<!--
script标签既可以放在head内也可以放在body内
通常都放在body内的最底部，确保在html部分代码全部加载完后在执行js代码
-->

案例一：开关灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 400px;
            width: 400px;
            border-radius: 50%;
            background-color: pink;
        }
        .bg_blue {
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <div id="d1" class="c1 bg_blue"></div>
    <button id="d2">变色</button>

<script>
        let divEle = document.getElementById('d1');
        let btnEle = document.getElementById('d2');
        btnEle.onclick = function () {
            divEle.classList.toggle('bg_blue')
        }
</script>
</body>
</html>

案例二：input框获取/失去焦点

<input type='text' value='请输入名字：' id='d1'>

<script>
	let inpEle = document.getElementById('d1');
    // 获取焦点事件
    inpEle.onfocus = function() {
        inpEle.value = ''  //  点value就是获取   等号赋值就是设置
    }
    //失去焦点事件
    inpEle.onblur = function() {
        inpEle.value = '请输入名字：'
    }
</script>

案例三：定时器

<input type="text" id="d1">
<button id="d2">开始</button>
<button id="d3">结束</button>

<script>
    let t = null;
    function show() {
        let inpEle = document.getElementById('d1');
        let currenTime = new Date();
        inpEle.value = currenTime.toLocaleString()
    }
    let startBtnEle = document.getElementById('d2');
    let endBtnEle = document.getElementById('d3');

    startBtnEle.onclick = function () {
        if(!t) { // 限定开启定时器的个数唯一
            t = setInterval(show, 1000)
        }
    };
    endBtnEle.onclick = function () {
        clearInterval(t);
        t=null
    }
</script>

案例四：省市联动

<span>省</span>
<select name="" id="d1">
    <option value="" disabled selected>---请选择---</option>
</select>
<span>市</span>
<select name="" id="d2">
    <option value="" disabled selected>---请选择---</option>
</select>

<script>
    let proEle = document.getElementById('d1');
    let cityEle = document.getElementById('d2');
    data = {
        "浙江": ["台州", "温州",'绍兴','杭州'],
        "北京": ["朝阳区", "海淀区",'昌平区'],
        "山东": ["威海市", "烟台市",'临沂市','青岛'],
        '上海':['浦东新区','静安区','黄浦区','外滩'],
        '深圳':['南山区','宝安区','福田区']
    };
    for (let key in data) {
        // 1 创建option标签
        let opEle = document.createElement('option');
        // 2 设置文本
        opEle.innerText = key;
        // 3 设置value
        opEle.value = key;
        // 4 将创建好的option标签添加到第一个select中
        proEle.appendChild(opEle)
    }
    proEle.onchange = function () {
        let currentPro = proEle.value;
        let cityList = data[currentPro];
        cityEle.innerHTML = '';
        for (let i=0; i < cityList.length; i++) {
            let currentCity = cityList[i];
            // 1 创建option标签
            let opEle = document.createElement('option');
            // 2 设置文本
            opEle.innerText = currentCity;
            // 3 设置value
            opEle.value = currentCity;
            // 4 将创建好的option标签添加到第一个select中
            cityEle.appendChild(opEle)
        }
    }
</script>

window.onload事件

给页面上的元素绑定事件时，必须等文档加载完毕才能绑定事件
window.onload事件在文件加载过程结束的时候触发。文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。
注意：.onload()函数存在覆盖现象。

posted @ 2020-05-18 16:45 群青-Xi 阅读(215) 评论(0) 编辑收藏举报

刷新页面返回顶部

群青-Xi

Hello Python

前端——JS之BOM与DOM与事件

BOM与DOM操作

BOM操纵

window对象

window子对象

history对象

location对象

弹出框

计时器

DOM操纵

DOM的概念

查找标签

间接查找

节点操作

获取值操作

class、css操作

事件

案例一：开关灯

案例二：input框获取/失去焦点

案例三：定时器

案例四：省市联动

window.onload事件

公告