JavaScript中的BOM和DOM操作

一、课前实例

#  闭包函数的运用var arr = [];
undefined
for (var i=0;i<=4;i++){function outter(i){function f(){console.log(i)}return f}f = outter(i)arr.push(f)
};arr
(5) [ƒ, ƒ, ƒ, ƒ, ƒ]
arr[0]()
0arr[1]()
1arr[2]()
2arr[3]()
3arr[4]()
4arr[5]()
VM455:1 Uncaught TypeError: arr[5] is not a functionat <anonymous>:1:7

二、BOM操作

1、window对象

# window对象
window对象指代的就是浏览器窗口window.innerHeight  浏览器当前窗口的高度
900
window.innerWidth   浏览器当前窗口的宽度
1680# 新建窗口打开页面 第二个参数"_self"or"_blank",第三个参数写新建的窗口的大小和位置
# 扩展父子页面通信window.opener()  了解
window.open("https://www.baidu.com","_blank","height=200px,width=200px,top=100px,left=100px")window.close()  # 关闭当前页面

2、window子对象

window.navigator.appName
"Netscape"window.navigator.appVersion
"5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36"
window.navigator.userAgent   # 掌握  用来表示当前是否是一个浏览器
"Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36""""
扩展:仿爬措施1.最简单最常用的一个就是校验当前请求的发起者是否是一个浏览器
userAgent
"Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36"如何破解该措施在你的代码中加上上面的user-agent配置即可
"""window.navigator.platform
"Win32"# 如果是window的子对象 那么window可以省略不写

2、history对象

# 对应的就是你浏览器左上方的两个的箭头
window.history.back()  回退到上一页
window.history.forward()  前进到下一页
window.history.go(1)  刷新页面

3、location对象

window.location.href  # 获取当前页面的url
window.location.href=url  # 跳转到指定的页面
window.location.reload()  # 重新加载

4、弹出框

#  警告框
alert('111')
undefined
#  确认框
confirm('111')
false
confirm('111')
true
#  提示框
prompt('111')
"222"

5、计时器

#  只执行一次
function say(){alert("hello")
}
undefined
var t = setTimeout(say,3000)   // 毫秒为单位 3秒之后自动执行say函数
var t2 = setTimeout("say()",3000)  // 也可使用字符串
undefined
clearTimeout(t)  // 取消定时任务  如果你想要清除定时任务 需要使用变量指代定时任务#  循环执行
function say(){alert("123")
}
function show(){var t = setInterval(say,3000)  // 每隔3秒执行一次function inner(){clearInterval(t)  // 清除定时器}setTimeout(inner, 9000)  // 9秒中之后触发清除定时器
}
show()
undefined

三、DOM操作

1、简介

"""
DOM树的概念所有的标签都可以称之为是节点JavaScript 可以通过DOM创建动态的 HTML：JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应DOM操作需要用关键字document起手
"""

在这里插入图片描述

2、查找节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div  id="d1"></div><div class="d2"><p>111</p><p>222</p></div><div class="d3"></div>
</body>
</html>/*
当你用变量名指代标签对象的时候 一般情况下都推荐你书写成
xxxEledivEleaElepEle
*/#  直接查找
var d1Ele = document.getElementById("d1")  # 注意这里拿到的是唯一
undefined
d1Ele
<div id="d1"></div>var d2Elv = document.getElementsByClassName("d2")[0]  # 注意这里拿到的是一个数组
undefined
d2Elv
<div class="d2">…</div>var p1Ele = document.getElementsByTagName("p")  # 注意这里拿到的是一个数组
undefined
p1Ele
HTMLCollection(2) [p, p]#  间接查找语法								 含义
childNodes							获取所有的子节点，除了元素还有文本等
children							获取所有元素子节点，不包含文本
parentNode							获取父节点
previousSibling						获取上一个兄弟节点，包含文本
previousElementSibling				 获取上一个兄弟元素节点，不包含文本
nextSibling						    获取下一个兄弟节点，包含文本
nextElementSibling					获取下一个兄弟元素节点，不包含文本
firstChild							获取第一个子节点，包含文本
firstElementChild					获取第一个子节点，不包含文本
lastChild							获取最后一个子节点，包含文本
lastElementChild					获取父元素最后一个元素节点。不包含文本var p1Ele = d2Ele.childNodes
undefined
p1Ele
NodeList(5) [text, p, text, p, text]var p1Ele = d2Ele.children
undefined
p1Ele
HTMLCollection(2) [p, p]var p1Ele = d2Ele.children[0]
undefined
p1Ele
<p>…</p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">111</font></font></p>p1Ele.parentNode
<div class="d2">…</div>
p1Ele.parentElement
<div class="d2">…</div>d2Ele.firstChild
#text
d2Ele.firstElementChild
<p>…</p>

3、节点操作

#  创建节点，设置属性，插入位置
var imgEle = document.createElement("img")  # 创建标签
undefined
imgEle
<img>imgEle.src = "https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=181710682,445782850&fm=26&gp=0.jpg"  # 给标签设置默认的属性imgEle.name = "劫"   # 原有的属性可以点的方式直接设置imgEle
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=181710682,445782850&fm=26&gp=0.jpg" name="劫">imgEle.username = "图片"   # 自定义的属性没办法点的方式直接设置imgEle
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=181710682,445782850&fm=26&gp=0.jpg" name="劫"># setAttribute既可以设置自定义的属性也可以设置默认的书写
imgEle.setAttribute("username", "图片")
undefined
imgEle
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=181710682,445782850&fm=26&gp=0.jpg" name="劫" username="图片"># 标签内部添加元素(尾部追加)
var d2Ele = document.getElementsByClassName("d2")[0]
undefined
d2Ele
<div class="d2">…</div>
d2Ele.appendChild(imgEle)
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=181710682,445782850&fm=26&gp=0.jpg" name="劫" username="图片">/*
创建a标签
设置属性
设置文本
添加到标签内部添加到指定的标签的上面
*/
var aEle = document.createElement('a')aEle
<a></a>
aEle.href = 'https://www.xiaomi.com/'
"https://www.xiaomi.com/"
aEle
<a href="https://www.xiaomi.com/"></a>aEle.innerText = '点我有你好看!'  # 给标签设置文本内容
"点我有你好看!"
aEle
<a href="https://www.xiaomi.com/">点我有你好看!</a>
var d2Ele = document.getElementsByClassName('d2')[0]
undefined
var p1Ele = document.getElementsByTagName('p')[0]
undefined
d2Ele.insertBefore(aEle,p1Ele)  # 添加标签内容指定位置添加
<a href="https://www.xiaomi.com/">点我有你好看!</a>aEle.innerText="小米"
"小米"
aEle.target = "_blank"
"_blank"
aEle
<a href="https://www.xiaomi.com/" target="_blank">…</a>"""
额外补充appendChild()removeChild(要删除的子节点)replaceChild(新的子节点, 某个子节点)setAttribute()  设置属性getAttribute()  获取属性removeAttribute()  移除属性
"""# innerText与innerHTML
d2Ele.innerText  # 获取标签内部所有的文本
"小米111222"d2Ele.innerHTML  # 内部文本和标签都拿到"<a href="https://www.xiaomi.com/" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">小米</font></font></a><p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">111</font></font></p><p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">222</font></font></p><img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=181710682,445782850&amp;fm=26&amp;gp=0.jpg" name="劫" username="图片">"d2Ele.innerText = 'heiheihei'
"heiheihei"
d2Ele.innerHTML = 'hahahaha'
"hahahaha"d2Ele.innerText = '<h1>heiheihei</h1>'  # 不识别html标签
"<h1>heiheihei</h1>"
d2Ele.innerHTML = '<h1>hahahaha</h1>'  # 识别html标签
"<h1>hahahaha</h1>"

4、获取元素的值

#适用于input、select、textarea标签var x=document.getElementById('input')
var y=document.getElementById('select')
var z=document.getElementById('textarea')x.value
y.value
z.value# 如何获取用户上传的文件数据
let fileEle = document.getElementById('d3')
fileEle.value  # 无法获取到文件数据
"C:\fakepath\02_测试路由.png"fileEle.files  # 得到的是数组
FileList {0: File, length: 1}0: File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}length: 1__proto__: FileListfileEle.files[0]  # 获取文件数据
File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}

5、class操作

var d2Ele = document.getElementsByClassName('d2')[0]
undefined
d2Ele
<div class="d2">…</div>d2Ele.classList  # 获取标签所有的类属性
DOMTokenList ["d2", value: "d2"]d2Ele.classList.add("clo1")  # 添加类属性
undefined
d2Ele.classList  
DOMTokenList(2) ["d2", "clo1", value: "d2 clo1"]d2Ele.classList.remove("clo1")  # 移除某个类属性
undefined
d2Ele.classList
DOMTokenList ["d2", value: "d2"]d2Ele.classList.contains("clo1")  # 验证是否包含某个类属性
false
d2Ele.classList.contains("d2") 
trued2Ele.classList.toggle("xxx")  # 有则删除无则添加
true
d2Ele.classList.toggle("xxx")
false
d2Ele.classList.toggle("xxx")
true
d2Ele.classList.toggle("xxx")
false

6、CSS操作

var p1Ele = document.getElementsByTagName('p')[0]
undefined
p1Ele
<p>…</p>
p1Ele.style.color="yellow"  #  设置字体颜色
"yellow"
p1Ele.style.fontSize="20px"  #  设置字体大小
"20px"
p1Ele.style  #  查看样式
CSSStyleDeclaration {0: "color", 1: "font-size", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
p1Ele.style.backgroundColor="red"  #  设置背景颜色
"red"
p1Ele.style.border="2px solid blue"  #  设置边框
"2px solid blue"#  总结
/*
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
*/

7、事件

// HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时执行一段JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。# 1、常用事件
onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框										时,代表已经输入完了,我们可以对它进行验证.onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改										变时触发.（select联动）onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车										按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。# 2、绑定方式
#方式一：
<div id="div1" onclick="changeColor(this);">我是div，点我</div>
<script>function changeColor(ths) {ths.style.backgroundColor="green";}
</script>注意：
this是实参，表示触发事件的当前元素。
函数定义过程中的ths为形参。#方式二：
<div id="div1">来，点亮我的绿</div>
<script>var oDiv = document.getElementById('div1');oDiv.onclick = function() {this.style.backgroundColor = 'red';}
</script>//script标签既可以放在head内 也可以放在body内
//但是通常情况下都是放在body内的最底部# 等待浏览器窗口加载完毕之后再执行代码
window.onload = function () {// 第一种绑定事件的方式function func1() {alert(111)}// 第二种let btnEle = document.getElementById('d1');btnEle.onclick = function () {alert(222)}}

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

Linux 在VMWARE中安装JAVA以及配置jdk环境
目录一、使用SSH传输jdk到Linux的demo文件夹下二、打开SSH窗口或者（Linux的终端窗口）操作 ： 2.1打开Linux终端 2.2输入命令su root 开启root权限 2.3成功root ：~变成# 三、Linux的JDK安装 3.1查看当前Linux系统是否已…...
2024/4/30 17:37:39
回归平均值效应
现在的生活和工作中，越来越多的人认同这样一个事实：正面反馈（在表现好的时候，表扬和奖励）比负面反馈（在其表现差的时候，批评和惩罚）更加能够激励一个人取得进步。打击式教育和辱骂式…...
2024/4/30 21:10:21
day13--sql--统计，分组，分页***
sql的查询-排序*** （1）什么是排序 order by （2）如何排序》》数据库的查询(排序:order by) SELECT * FROM 表名 ORDER BY 排序字段 ASC(升序)|DESC(降序); （3）特点指定列指定升序或者降序 order by 排序…...
2024/4/23 8:51:49
Linux 在VMWARE中安装Mysql以及配置mysql环境
目录一、使用SSH传输mysql到Linux的demo文件夹下二、打开SSH窗口或者（Linux的终端窗口）操作 ： 2.1打开Linux终端 2.2输入命令su root 开启root权限，输入密码 2.3成功root ：~变成# 三、Linux的Mysql安装配置 …...
2024/4/27 22:08:42
Amazon SageMaker助力行者AI实现游戏内容过滤准确率96%
[2020年9月22日] 记者从行者AI（成都潜在人工智能科技有限公司旗下品牌，xingzhe.ai）获悉，该公司利用亚马逊云服务（AWS）旗下的全托管机器学习服务Amazon SageMaker开发的游戏内容过滤服务，对不恰当…...
2024/4/7 13:30:04
Linux 在VMWARE中安装Tomcat以及配置Tomcat环境目录一、使用SSH传输Tomcat到Linux的demo文件夹下二、打开SSH窗口或者（Linux的终端窗口）操作： 2
目录一、使用SSH传输Tomcat到Linux的demo文件夹下二、打开SSH窗口或者（Linux的终端窗口）操作 ： 2.1打开Linux终端 2.2输入命令su root 开启root权限，输入密码 2.3成功root ：~变成# 三、Linux的Tomcat安装配置 …...
2024/4/22 18:40:27
破解 excel 表格加密高版本不行
https://blog.51cto.com/b217dgy/1324929 https://blog.csdn.net/diyiday/article/details/85340776...
2024/4/14 4:35:51
docker容器安装配置及创建容器
一、什么是docker Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中，然后发布到任何流行的 Linux或Windows 机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口…...
2024/4/23 3:56:38
我们搞开发的为什么会感觉到累
昨天下班坐公车，听到一个和我年纪相仿的哥们儿打电话，隐约听到电话那边好像是他女朋友问他现在饿不饿，他说“我已经饿的不饿啦”。饿的不饿了，听起来很幽默，对我很有触动，我在思考，我此时站在…...
2024/4/24 7:26:32
[实用技巧]推荐一些非常棒的前端网站
前言有时候，提高效率的办法，比如收藏一些好用的网站。这么多年下来，收藏夹里面躺着一些好用的网站，来掘金的时候，收获了很多知识，这时候准备回馈点东西给你们。如果部分国外网站访问不了的，请…...
2024/4/23 3:09:14
AWD准备的一些脚本和工具及其使用方法
目录赛前准备代码审计工具seay源码审计系统chip脚本自动上传不死马杀不死马ssh工具waf现场操作结语最近一段时间去打了一次省赛的线下，虽然体验不怎么好，但有些准备的小东西还是很有用的，写下来分享一下：赛前准备代码审计工具 …...
2024/4/30 20:19:38
华为和H3C--VRP基础和基本的操作
华为和H3C – VRP基础和基本的操作一、华为的产品线 1、华为和H3C的区别 1）华为网络设备供应商面向大型企业和运营商网络使用 2）H3C 华为和3COM公司合资成立公司叫做H3C 面向中小型企业使用华为的认证H3C在做 2、华为的产品线 1）路由器A…...
2024/4/7 9:52:53
Channel和 Unsafe
Channel简介 channel是netty网络IO操作抽象出来的一个接口，主要功能有：网络IO的读写，客户端发起连接、主动关闭连接，链路关闭，获取通信双方的网络地址等，还提供了与netty框架相关的操作，如获取c…...
2024/4/12 12:27:54
Python中的__init__.py文件
Python中的__init__.py文件__init__.py的作用init.py的作用当一个包被导入的时候，_init_.py文件会被首先执行 #c1.py from t.c1 import a print(a)#t.c1.py__all__ [a,c]a 2 b 3 c 4#t.__init__.py import sys a this is a __init__.py file print(a)最后执…...
2024/4/22 3:06:18
用numpy库手写算子四: avgPool
用numpy库手写算子四: avgPool 前言我们经常可以调用pytorch,tensorflow库等来实现我们的神经网络，但是有的时候需要开发自己的框架，这个时候就得了解每一个算子的计算规则，了解这些计算规则也有助于我们了解他们的计算特性，然…...
2024/4/19 15:44:33
我来到博客大世界啦！
[TOC]新人大家好，我是虫虫blabla，B站同名B站链接，今天我入驻博客啦！ 我有一定的c基础，我会上传一些我编写的c程序。做完的有：猜数字正在做的：tlry（类2D生存游戏） 我会…...
2024/4/24 6:24:39
解决魅族17横屏全屏会有白边问题
解决魅族17横屏全屏会有白边问题问题描述：魅族17横屏显示时，右侧导航栏会出现白色原因分析：1，没有做Android P 系统的齐刘海适配，导致右侧导航栏会出现白色。在Android P版本中，通过DisplayCutout 类&…...
2024/4/23 22:05:52
剑指offer系列试题
每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此。HF作为牛客的资深元老,自然也准备了一些小游戏。其中,有个游戏是这样的:首先,让小朋友们围成一个大圈。然后,他随机指定一个数m,让编号为0的小朋友开始报数。每次喊到m-1的那个小朋友要出列唱首歌,然…...
2024/4/25 16:29:40
常用的函数式接口--Predicate，默认方法negate，or，and，Predicate接口练习--集合信息筛选
黑马程序员常用的函数式接口–Predicate package Lambda_Return;import java.util.function.Predicate;public class PredicateDemo {public static void main(String[] args) {String str"12345";boolean bcheckString(str,(s)->{return s.length()>5;});Sy…...
2024/4/22 3:08:32
梵塔/汉诺塔问题
文章目录问题描述解题思路代码问题描述有三根杆(编号A、B、C)，在A杆自下而上、由大到小按顺序放置64个金盘(如下图)。游戏的目标：把A杆上的金盘全部移到C杆上，并仍保持原有顺序叠好。操作规则：每次只能移动一个盘子，并…...
2024/4/28 9:01:32

JavaScript中的BOM和DOM操作

一、课前实例

二、BOM操作

1、window对象

2、window子对象

2、history对象

3、location对象

4、弹出框

5、计时器

三、DOM操作

1、简介

2、查找节点

3、节点操作

4、获取元素的值

5、class操作

6、CSS操作

7、事件

相关文章

最新文章