前端之JS BOM、DOM操作及事件

最新推荐文章于 2024-07-01 20:30:00 发布

一切随心走_水瓶

最新推荐文章于 2024-07-01 20:30:00 发布

阅读量326

点赞数

分类专栏： python 文章标签： js

本文链接：https://blog.csdn.net/wcg920212/article/details/108754739

版权

python 专栏收录该内容

107 篇文章 7 订阅

订阅专栏

文章目录

1、 BOM操作

1.1、定义

BOM：Browser Object Model，浏览器对象模型

BOM的结构图：
在这里插入图片描述
从上图可以看出来：
1、DOM对象也是BOM的一部分
2、window对象是BOM的顶层（核心）对象*

需要注意的是：
1、在调用window对象的方法和属性时，可以省略window，例如：window.document.location可以简写为document.location
2、全局变量也是windows对象的属性，全局的函数时window对象的方法

1.2、对象history、navigator、screen

1、history对象包不包含浏览器的历史
history.back() //后退一页，等同于history.go(-1)
history.forward() //前进一页，等同于history.go(1)
history.go(0) //0是刷新
用的不多。因为浏览器中已经自带了这些功能的按钮：

2、navigator对象包含了浏览器相关信息
navigator.appName　　// Web浏览器全称
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

3、可以用screen对象得到可用的屏幕宽读和高度
screen.availWidth  //可用的屏幕宽度
screen.availHeight  //可用的屏幕高度

案例：

================page11.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>第一个页</p>
<a href="page22.html">点我进入下一页</a>
</body>
</html>


================page22.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>第二个页</p>
<a href="page33.html">点我进入下一页</a>
</body>
</html>


================page33.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function back() {
            window.history.back()
        }
    </script>
</head>
<body>
<p>第三个页</p>

<input type="button" value="点我进入上一页" onclick="back()">

</body>
</html>

1.3、localtion对象

location.href  //获取URL
location.href="URL" // 跳转到指定页面
location.reload() //重新加载页面

1.4、弹出系统对话框

alert(1)是window.alert(1)的简写，因为它是window的子方法

系统对话框有三种:
alert("hello world"); //不同浏览器中的外观是不一样的
confirm("hello html");  //兼容不好
prompt("输入用户名: ");   //不推荐使用

# 示例
var x=confirm("你确定吗")
console.log(x)

var username=prompt("输入用户名: ")
console.log(username);

1.5、打开关闭窗口

1、open("url地址","新窗口的位置_blank或者_self"，"新窗口的特征")
window.open("http://www.baidu.com","_blank", "width=400, height=400")

2、close()关闭当前窗口
var x=window.open("http://www.baidu.com","_blank", "width=400, height=400")
x.close()

1.6、浏览器窗口内部的高度和宽度

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

1.7、定时器

1.setTimeOut()
只在指定时间后执行一次，通常用于延迟执行某方法或功能

//定时器 异步运行  
function say(){  
    alert("hello");  
}  
//使用方法名字执行方法  
var t1 = setTimeout(hello,1000);  
var t2 = setTimeout("hello()",3000); //使用字符串执行方法  
clearTimeout(t2); //去掉定时器


2.setInterval()
在指定时间为周期循环执行，通常用于刷新表单，对于一些表单的假实时指定时间刷新同步，动画效果等

//实时刷新时间单位为毫秒  
var t3 = setInterval(say,3000);   
var t4 = setInterval('say()',3000);   

clearInterval(t3);
clearInterval(t4);

2、 DOM操作

2.1、定义

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）,DOM标准规定HTML文档中的每个成员都是一个节点(node)，HTML DOM树如下图：
在这里插入图片描述

2.2、查找节点

2.2.1、直接查找

document.getElementById           #根据ID获取唯一一个标签
document.getElementsByClassName   #根据class属性获取一系列标签
document.getElementsByTagName     #根据标签名获取一系列标签

2.2.2、间接查找

语法	含义
childNodes	获取所有的子节点，除了元素还有文本等
children	获取所有元素子节点，不包含文本
parentNode	获取父节点
previousSibling	获取上一个兄弟节点，包含文本
previousElementSibling	获取上一个兄弟元素节点，不包含文本
nextSibling	获取下一个兄弟节点，包含文本
nextElementSibling	获取下一个兄弟元素节点，不包含文本
firstChild	获取第一个子节点，包含文本
firstElementChild	获取第一个子节点，不包含文本
lastChild	获取最后一个子节点，包含文本
lastElementChild	获取父元素最后一个元素节点，不包含文本

2.3、增加节点

1、创建新节点
var divEle = document.createElement('div');

2、追加一个子节点（放到最后）
somenode.appendChild(新的子节点);

3、插入一个子节点（插入到某个节点前）
somenode.insertBefore(新的子节点,某个节点);

2.4、删除、替换节点

somenode.removeChild(要删除的子节点);
somenode.replaceChild(新的子节点, 某个子节点);

2.5、修改/设置节点属性

1、获取文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

2、设置文本节点的值：
var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

3、attribute操作
var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

4、自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

2.6、获取元素的值

# 适用于input、select、textarea标签

var x=document.getElementById('input')
var y=document.getElementById('select')
var z=document.getElementById('textarea')

x.value
y.value
z.value

2.7、class操作

var x=document.getElementById('div1')

x.classList.remove('col1')
x.classList.add('col1')
x.classList.contains('col1')
x.classList.toggle('col1')

2.8、css操作

obj.style.backgroundColor="red"

JS操作CSS属性的规律：

1、对于没有中横线的CSS属性一般直接使用style.属性名即可，如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2、对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可，如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

3、事件

3.1、事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为
简单理解： 触发— 响应机制

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作

3.2、事件三要素

事件源：触发事件的元素
事件类型：例如 click 点击事件
事件处理程序：事件触发后要执行的代码(函数形式)，事件处理函数

案例代码

<body>
    <button id="btn">唐伯虎</button>
    <script>
        // 点击一个按钮，弹出对话框
        // 1. 事件是有三部分组成  事件源  事件类型  事件处理程序   我们也称为事件三要素
        //(1) 事件源 事件被触发的对象   谁  按钮
        var btn = document.getElementById('btn');
        //(2) 事件类型  如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        //(3) 事件处理程序  通过一个函数赋值的方式 完成
        btn.onclick = function() {
            alert('hello world');
        }
    </script>
</body>

3.3、执行事件的步骤

在这里插入图片描述
案例代码

<body>
    <div>123</div>
    <script>
        // 执行事件步骤
        // 点击div 控制台输出 我被选中了
        // 1. 获取事件源
        var div = document.querySelector('div');
        // 2.绑定事件 注册事件
        // div.onclick 
        // 3.添加事件处理程序 
        div.onclick = function() {
            console.log('我被选中了');
        }
    </script>
</body>

3.4、常见的鼠标事件

在这里插入图片描述

3.5、注册事件（2种方式）

在这里插入图片描述

3.6、事件监听

addEventListener()事件监听（IE9以后支持）
在这里插入图片描述
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数

attacheEvent()事件监听（IE678支持）

eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行
在这里插入图片描述

<button>传统注册事件</button>
<button>方法监听注册事件</button>
<button>ie9 attachEvent</button>
<script>
    var btns = document.querySelectorAll('button');
    // 1. 传统方式注册事件
    btns[0].onclick = function() {
        alert('hi');
    }
    btns[0].onclick = function() {
            alert('hao a u');
        }
   // 2. 事件侦听注册事件 addEventListener 
   // (1) 里面的事件类型是字符串 必定加引号 而且不带on
   // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
    btns[1].addEventListener('click', function() {
        alert(22);
    })
    btns[1].addEventListener('click', function() {
            alert(33);
    })
    // 3. attachEvent ie9以前的版本支持
    btns[2].attachEvent('onclick', function() {
        alert(11);
    })
</script>

事件监听兼容性解决方案
封装一个函数，函数中判断浏览器的类型：
在这里插入图片描述

3.7、删除事件（解绑事件）

在这里插入图片描述

<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
divs[0].onclick = function() {
    alert(11);
    // 1. 传统方式删除事件
    divs[0].onclick = null;
}
// 2. removeEventListener 删除事件
divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
function fn() {
    alert(22);
    divs[1].removeEventListener('click', fn);
}
// 3. detachEvent
divs[2].attachEvent('onclick', fn1);

function fn1() {
    alert(33);
    divs[2].detachEvent('onclick', fn1);
}
</script>

删除事件兼容性解决方案
在这里插入图片描述

3.8、DOM事件流

html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子
当你单击一个div时，同时你也单击了div的父元素，甚至整个页面

那么是先执行父元素的单击事件，还是先执行div的单击事件?

在这里插入图片描述
比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document

当时的2大浏览器霸主谁也不服谁！
IE 提出从目标元素开始，然后一层一层向外接收事件并响应，也就是冒泡型事件流
Netscape（网景公司）提出从最外层开始，然后一层一层向内接收事件并响应，也就是捕获型事件流

最终，w3c 采用折中的方式，平息了战火，制定了统一的标准 —--— 先捕获再冒泡
现代浏览器都遵循了此标准，所以当事件发生时，会经历3个阶段

DOM 事件流会经历3个阶段：

1、捕获阶段
2、当前目标阶段
3、冒泡阶段

我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡
在这里插入图片描述

事件冒泡

<div class="father">
    <div class="son">son盒子</div>
</div>
<script>
// onclick 和 attachEvent（ie） 在冒泡阶段触发
// 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 
// son -> father ->body -> html -> document
var son = document.querySelector('.son');
// 给son注册单击事件
son.addEventListener('click', function() {
    alert('son');
}, false);
// 给father注册单击事件
var father = document.querySelector('.father');
father.addEventListener('click', function() {
    alert('father');
}, false);
// 给document注册单击事件，省略第3个参数
document.addEventListener('click', function() {
    alert('document');
})
</script>

事件捕获

<div class="father">
    <div class="son">son盒子</div>
</div>
<script>
// 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发
// document -> html -> body -> father -> son
var son = document.querySelector('.son');
// 给son注册单击事件，第3个参数为true
son.addEventListener('click', function() {
    alert('son');
}, true);
var father = document.querySelector('.father');
// 给father注册单击事件，第3个参数为true
father.addEventListener('click', function() {
    alert('father');
}, true);
// 给document注册单击事件，第3个参数为true
document.addEventListener('click', function() {
    alert('document');
}, true)
</script>

3.9、事件对象

3.9.1、什么是事件对象

事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象

比如：
1、谁绑定了这个事件。
2、鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置
3、键盘触发事件的话，会得到键盘的相关信息，如按了哪个键

3.9.2、事件对象的使用

事件触发发生时就会产生事件对象，并且系统会以实参的形式传给事件处理函数
所以，在事件处理函数中声明1个形参用来接收事件对象
在这里插入图片描述

3.9.3、事件对象的兼容性处理

事件对象本身的获取存在兼容问题：

1、标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到
2、在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找
在这里插入图片描述

只要“||”前面为false, 不管“||”后面是true 还是 false，都返回 “||” 后面的值
只要“||”前面为true, 不管“||”后面是true 还是 false，都返回 “||” 前面的值

<div>123</div>
<script>
    var div = document.querySelector('div');
div.onclick = function(e) {
    // 事件对象
    e = e || window.event;
    console.log(e);
}
</script>

3.9.4、事件对象的属性和方法

在这里插入图片描述

3.9.5、e.target 和 this 的区别

this 是事件绑定的元素（绑定这个事件处理函数的元素）
e.target 是事件触发的元素

常情况下terget 和 this是一致的，
但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）
	这时候this指向的是父元素，因为它是绑定事件的元素对象，
	而target指向的是子元素，因为他是触发事件的那个具体元素对象

<div>123</div>
<script>
    var div = document.querySelector('div');
div.addEventListener('click', function(e) {
    // e.target 和 this指向的都是div
    console.log(e.target);
    console.log(this);

});
</script>

事件冒泡下的e.target和this

<ul>
    <li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script>
    var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
    // 我们给ul 绑定了事件  那么this 就指向ul  
    console.log(this); // ul

    // e.target 触发了事件的对象 我们点击的是li e.target 指向的就是li
    console.log(e.target); // li
});
</script>

3.10、阻止默认行为

html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转

<a href="http://www.baidu.com">百度</a>
<script>
    // 2. 阻止默认行为 让链接不跳转 
    var a = document.querySelector('a');
a.addEventListener('click', function(e) {
    e.preventDefault(); //  dom 标准写法
});
// 3. 传统的注册方式
a.onclick = function(e) {
    // 普通浏览器 e.preventDefault();  方法
    e.preventDefault();
    // 低版本浏览器 ie678  returnValue  属性
    e.returnValue = false;
    // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
    return false;
}
</script>

3.11、阻止事件冒泡

事件冒泡本身的特性，会带来的坏处，也会带来的好处
在这里插入图片描述

<div class="father">
    <div class="son">son儿子</div>
</div>
<script>
        var son = document.querySelector('.son');
// 给son注册单击事件
son.addEventListener('click', function(e) {
    alert('son');
    e.stopPropagation(); // stop 停止  Propagation 传播
    window.event.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
}, false);

var father = document.querySelector('.father');
// 给father注册单击事件
father.addEventListener('click', function() {
    alert('father');
}, false);
// 给document注册单击事件
document.addEventListener('click', function() {
    alert('document');
})
</script>

阻止事件冒泡的兼容性处理
在这里插入图片描述

3.12、事件委托

事件冒泡本身的特性，会带来的坏处，也会带来的好处

什么是事件委托

把事情委托给别人，代为处理

事件委托也称为事件代理，在 jQuery 里面称为事件委派
说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行

js事件中的代理：
在这里插入图片描述
事件委托的原理

给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素

事件委托的作用

只操作了一次 DOM ，提高了程序的性能
动态新创建的子元素，也拥有事件

<ul>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
<li>知否知否，点我应有弹框在手！</li>
</ul>
<script>
    // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
    var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
    // e.target 这个可以得到我们点击的对象
    e.target.style.backgroundColor = 'yellow';
})
</script>

3.13、事件委托常用鼠标事件

在这里插入图片描述
案例：禁止选中文字和禁止右键菜单

<body>
    我是一段不愿意分享的文字
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
        })
        // 2. 禁止选中文字 selectstart
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })
    </script>
</body>

3.14、鼠标事件对象

在这里插入图片描述

3.15、获取鼠标在页面的坐标

<script>
    // 鼠标事件对象 MouseEvent
    document.addEventListener('click', function(e) {
    // 1. client 鼠标在可视区的x和y坐标
    console.log(e.clientX);
    console.log(e.clientY);
    console.log('---------------------');

    // 2. page 鼠标在页面文档的x和y坐标
    console.log(e.pageX);
    console.log(e.pageY);
    console.log('---------------------');

    // 3. screen 鼠标在电脑屏幕的x和y坐标
    console.log(e.screenX);
    console.log(e.screenY);
})
</script>

3.16、键盘事件

在这里插入图片描述

<script>
    // 常用的键盘事件
    //1. keyup 按键弹起的时候触发 
    document.addEventListener('keyup', function() {
    console.log('我弹起了');
})

//3. keypress 按键按下的时候触发  不能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keypress', function() {
    console.log('我按下了press');
})
//2. keydown 按键按下的时候触发  能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keydown', function() {
    console.log('我按下了down');
})
// 4. 三个事件的执行顺序  keydown -- keypress -- keyup
</script>

3.17、键盘事件对象

在这里插入图片描述
使用keyCode属性判断用户按下哪个键

<script>
    // 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
    document.addEventListener('keyup', function(e) {
    console.log('up:' + e.keyCode);
    // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
    if (e.keyCode === 65) {
        alert('您按下的a键');
    } else {
        alert('您没有按下a键')
    }
})
document.addEventListener('keypress', function(e) {
    // console.log(e);
    console.log('press:' + e.keyCode);
})
</script>

一切随心走_水瓶

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端之JS BOM、DOM操作及事件

文章目录1、 BOM操作1.1、定义1.2、对象history、navigator、screen1.3、localtion对象1.4、弹出系统对话框1.5、打开关闭窗口1.6、浏览器窗口内部的高度和宽度1.7、定时器2、 DOM操作2.1、定义2.2、查找节点2.2.1、直接查找2.2.2、间接查找2.3、增加节点2.4、删除、替换节点2.5、修改/设置节点属性2.6、获取元素的值2.7、class操作2.8、css操作1、 BOM操作1.1、定义BOM：Browser Object Model，浏览
复制链接

扫一扫