草庐IT

【JavaScript】50_终篇_编程进阶与BOM编程概览（3k字+）

魔天伦哦 2023-03-28 原文

12、节点的复制

使用 cloneNode() 方法对节点进行复制时，它会复制节点的所有特点包括各种属性

这个方法默认只会复制当前节点，而不会复制节点的子节点

可以传递一个true作为参数，这样该方法也会将元素的子节点一起复制

在本案例中，像li是一个节点，里面的“孙悟空”是一个子节点，需要使用true来一块复制上

<body>
<button id="btn01">点我一下</button>

<ul id="list1">
<li id="l1">孙悟空</li>
<li id="l2">猪八戒</li>
<li id="l3">沙和尚</li>
</ul>

<ul id="list2">
<li>蜘蛛精</li>
</ul>

<script>
//点击按钮后，将id为l1 的元素添加到list2中
const list2 = document.getElementById('list2')
const l1 = document.getElementById('l1')
const btn01 = document.getElementById("btn01")

btn01.onclick = function(){
const new1 = l1.cloneNode(true)//用来对节点进行复制

new1.id = 'new1';
list2.appendChild(new1)//将一元素添加到父节点的末尾
}
</script>
</body>

13、直接修改css样式

修改样式的方式：元素.style.样式名 = 样式值

如果样式名中含有-，则需要将样式表修改为驼峰命名法

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}
</style>
</head>
<body>
<button id="btn">点我一下</button>
<hr>
<div class="box1"></div>

<script>
//点击按钮后，修改box1的宽度
const btn = document.getElementById('btn')
const box1 = document.querySelector('.box1')

btn.onclick = function(){
//修改box1的样式
//修改样式的方式：元素.style.样式名 = 样式值
//如果样式名中含有-，则需要将样式表修改为驼峰命名法
//background-color ---> backgroundColor
box1.style.width = '400px'
box1.style.height = '400px'
box1.style.backgroundColor = 'yellow'
}
</script>
</body>

14、读取css样式

getComputedStyle()

  • 它会返回一个对象，这个对象中包含了当前元素所有的生效的样式
  • 参数：
  1. 要获取样式的对象
  2. 要获取的伪元素
  • 返回值： 返回的一个对象，对象中存储了当前元素的样式
  • 注意： 样式对象中返回的样式值，不一定能来拿来直接计算 所以使用时，一定要确保值是可以计算的才去计算
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 200px;
background-color: #bfa;
}

.box1::before {
content: 'hello';
color:red
}
</style>
</head>
<body>
<button id="btn">点我一下</button>

<hr>

<div class="box1"></div>

<script>
const btn = document.getElementById("btn")
const box1 = document.querySelector(".box1")

btn.onclick = function(){
const styleObj = getComputedStyle(box1)

console.log(styleObj.width)
console.log(styleObj.left)

console.log(parseInt(styleObj.width) + 100 + 'px')
console.log(styleObj.backgroundColor)

const beforeStyle = getComputedStyle(box1,'::before')
console.log(beforeStyle.color)//返回的是rgb数值

console.log(box1.firstElementChild)
}
</script>
</body>

15、其他读取样式的方式

元素.clientHeight

元素.clientWidth

  • 获取元素内部的宽度和高度（包括内容区和内边距）

元素.offsetHeight

元素.offsetWidth

  • 获取元素的可见框的大小（包括内容区、内边距和边框）
元素.scrollHeight
元素.scrollWidth

- 获取元素滚动区域的大小
元素.offsetParent
  • 获取元素的定位父元素
  • 定位父元素：离当前元素最近的开启了定位的祖先元素， 如果所有的元素都没有开启定位则返回body
元素.offsetTop
元素.offsetLeft

- 获取元素相对于其定位父元素的偏移量
元素.scrollTop
元素.scrollLeft

- 获取或设置元素滚动条的偏移量
<style>
#box1 {
width: 200px;
height: 200px;
padding: 50px;
margin: 50px;
border: 10px red solid;
background-color: #bfa;
overflow: auto;
}

#box2 {
width: 100px;
height: 500px;
background-color: orange;
}
</style>
</head>
<body>
<button id="btn">点我一下</button>
<hr>
<div>
<div id="box1">
<div id="box2"></div>
</div>
</div>

<script>
const btn = document.getElementById('btn')
const box1 = document.getElementById('box1')

btn.onclick = function(){
console.log(box1.scrollHeight)
console.log(box1.scrollWidth)

console.log(box1.offsetParent)

console.log(box1.offsetLeft)
console.log(box1.offsetTop)

console.log(box1.scrollTop)
}
</script>
</body>

16、间接修改css样式

除了直接修改样式外，也可以通过修改class属性来间接的修改样式

通过class修改样式的好处：

  1. 可以一次性修改多个样式
  2. 对JS和CSS进行解耦

元素.classList

是一个对象，对象中提供了对当前元素的类的各种操作方法

元素.classList.add() ：向元素中添加一个或多个class

元素.classList.remove()： 移除元素中的一个或多个class

元素.classList.toggle() ：切换元素中的class

元素.classList.replace()： 替换class

元素.classList.contains() ：检查class

<style>
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
}


.box2{
background-color: yellow;
width: 300px;
height: 500px;
border: 10px greenyellow solid;
}
</style>
</head>
<body>
<button id="btn">点我一下</button>
<hr>
<div class="box1 box3 box4"></div>

<script>
//点击按钮后，修改box1的宽度
const btn = document.getElementById("btn")
const box1 = document.querySelector(".box1")

btn.onclick = function(){
//除了直接修改样式外，也可以通过修改class属性来间接的修改样式
// box1.className += 'box2'

// box1.classList.add('box2','box3','box4')
// box1.classList.add('box1')

// box1.classList.remove('box2')
box1.classList.toggle('box2')
// box1.classList.replace('box2')

let result = box1.classList.contains('box3')
console.log(result)
}
</script>
</body>

17、事件对象

event 事件

  • 事件对象
  • 事件对象是有浏览器在事件触发时所创建的对象， 这个对象中封装了事件相关的各种信息
  • 通过事件对象可以获取到事件的详细信息 比如：鼠标的坐标、键盘的按键..
  • 浏览器在创建事件对象后，会将事件对象作为响应函数的参数传递， 所以我们可以在事件的回调函数中定义一个形参来接收事件对象
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 300px;
height: 300px;
border: 10px greenyellow solid;
}
</style>
</head>
<body>
<div id="box1"></div>

<script>
const box1 = document.getElementById("box1")

box1.onmousemove = event => {
console.log(event)
}

box1.addEventListener("mousemove",event => {
console.log(event.clientX,event.clientY)
box1.textContent = event.clientX + ',' + event.clientYs
})
</script>
</body>

18、事件的冒泡

在DOM中存在着多种不同类型的事件对象

多种事件对象有一个共同的祖先 Event

  • event.target 触发事件的对象
  • event.currentTarget 绑定事件的对象（同this）
  • event.stopPropagation() 停止事件的传导
  • event.preventDefault() 取消默认行为

事件的冒泡（bubble）

  • 事件的冒泡就是指事件的向上传到
  • 当元素上的某个事件被触发后，其祖先元素上的相同事件也会同时被触发
  • 冒泡的存在大大的简化了代码的编写，但是在一些场景下我们并不希望冒泡存在 不希望事件冒泡时，可以通过事件对象来取消冒泡
在事件的响应函数中：

event.target :

表示的是触发事件的对象

this 绑定事件的对象

event.stopPropagation()

取消事件的传导

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 300px;
height: 300px;
background-color: greenyellow;
}

#box2 {
width: 250px;
height: 250px;
background-color: #ff0;
}

#box3 {
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>

<a id="chao" href="https://lilichao.com">超链接</a>

<script>
const box1 = document.getElementById("box1")
const box2 = document.getElementById("box2")
const box3 = document.getElementById("box3")
const chao = document.getElementById("chao")

chao.addEventListener('click',(event) =>{
event.preventDefault();
alert('被点了一下')
})

box1.addEventListener('click',function (event){
alert(event)
console.log(event.target)//event.target 表示的是触发事件的对象
console.log(this)//this 绑定事件的对象
console.log(event.currentTarget)

alert("hello 我是box1")
})

box2.addEventListener('click',function(event){
event.stopPropagation()
alert('我是box2')
})

box3.addEventListener('click',function(event){
event.stopPropagation()//取消事件的传导
alert('我是box3')
})
</script>
</body>

BOM编程

1、初识BOM

BOM

  • 浏览器对象模型
  • BOM为我们提供了一组对象，通过这组对象可以完成对浏览器的各种操作
  • BOM对象：
  • Window —— 代表浏览器窗口（全局对象）
  • Navigator —— 浏览器的对象（可以用来识别浏览器）
  • Location —— 浏览器的地址栏信息
  • History —— 浏览器的历史记录（控制浏览器前进后退）
  • Screen —— 屏幕的信息
  • BOM对象都是作为window对象的属性保存的，所以可以直接在JS中访问这些对象
<script>
console.log(history)
</script>

2、navigator

  • Navigator —— 浏览器的对象（可以用来识别浏览器）

userAgent

返回一个用来描述浏览器信息的字符串

<script>
console.log(navigator.userAgent)

let sBrowser
const sUsrAg = navigator.userAgent

if (sUsrAg.indexOf("Firefox") > -1) {
sBrowser = "Mozilla Firefox"
// "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
} else if (sUsrAg.indexOf("SamsungBrowser") > -1) {
sBrowser = "Samsung Internet"
// "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36
} else if (
sUsrAg.indexOf("Opera") > -1 ||
sUsrAg.indexOf("OPR") > -1
) {
sBrowser = "Opera"
// "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
} else if (sUsrAg.indexOf("Trident") > -1) {
sBrowser = "Microsoft Internet Explorer"
// "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
} else if (sUsrAg.indexOf("Edge") > -1) {
sBrowser = "Microsoft Edge (Legacy)"
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
} else if (sUsrAg.indexOf("Edg") > -1) {
sBrowser = "Microsoft Edge (Chromium)"
// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.64
} else if (sUsrAg.indexOf("Chrome") > -1) {
sBrowser = "Google Chrome or Chromium"
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
} else if (sUsrAg.indexOf("Safari") > -1) {
sBrowser = "Apple Safari"
// "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
} else {
sBrowser = "unknown"
}

alert(`You are using: ${sBrowser}`)
</script>

3、location

location 表示的是浏览器地址栏的信息

  • 可以直接将location的值修改为一个新的地址，这样会使得网页发生跳转
  • location.assign() 跳转到一个新的地址
  • location.replace() 跳转到一个新的地址（无法通过回退按钮回退）
  • location.reload() 刷新页面，可以传递一个true来强制清缓存刷新
  • location.href 获取当前地址
<body>
<button id="btn">点我一下</button>
<input type="text" name="username" id="">

<script>
const btn = document.getElementById("btn")
btn.addEventListener('click',() => {
console.log(location.href)//当前地址
// location = 'https://www.lilichao.com'//使得点击按钮后，发生跳转，实现标签a的功能，通过JavaScript
// location.assign('https://www.lilichao.com')
location.replace('https://www.lilichao.com')
})
</script>
</body>

4、history

history.back()

  • 回退按钮

history.forward()

  • 前进按钮

history.go()

  • 可以向前跳转也可以向后跳转
<body>
<button id="btn">点我一下</button>

<script>
const btn = document.getElementById('btn')

btn.onclick = () => {
console.log(history.length)
history.back()
history.forward()
history.go(-1)
}
</script>
</body>

5、定时器

通过定时器，可以使代码在指定时间后执行

  • 设置定时器的方式有两种：

setTimeout()

  • 参数：
  1. 回调函数（要执行的代码）
  2. 间隔的时间（毫秒）
  • 关闭定时器

clearTimeout()

setInterval()

每间隔一段时间代码就会执行一次

  • 参数：
  1. 回调函数（要执行的代码）
  2. 间隔的时间（毫秒）
  • 关闭定时器

clearInterval()

<body>
<h1 id="num"></h1>

<script>
// const timer = setTimeout(()=>{
// alert('我是定时器中的代码')
// },3000)//只执行一次

// clearTimeout(timer)

const numH1 = document.getElementById('num')

let num = 0
const timer = setInterval(() => {
num++
numH1.textContent = num

if(num === 200){
clearInterval(timer)
}
},3000)
</script>
</body>

6、深入理解定时器

定时器的本质

就是在指定时间后将函数添加到消息队列中

setInterval() 没间隔一段时间就将函数添加到消息队列中

但是如果函数执行的速度比较慢，它是无法确保每次执行的间隔都是一样的

<script>
console.time()

setTimeout(function(){
console.timeEnd()
console.log('定时器执行了')
},3000)

//使程序卡6s
const begin = Date.now()
while(Date.now() - begin < 6000){}


console.time("间隔")
setInterval(function(){
console.timeEnd('间隔')

console.log('定时器执行了~')
alert('定时器执行~')

console.time('间隔')
},3000)


/*
希望可以确保函数每次执行都有相同间隔
*/

// console.time("间隔")
// setTimeout(function fn() {
// console.timeEnd("间隔")
// alert("哈哈")

// console.time("间隔")
// // 在setTimeout的回调函数的最后，在调用一个setTimeout
// setTimeout(fn, 3000)
// }, 3000)


setTimeout(()=>{
console.log(11111)
}, 0)

console.log(222222)
</script>

7、事件循环

事件循环（event loop）

  • 函数在每次执行时，都会产生一个执行环境
  • 执行环境负责存储函数执行时产生的一切数据
  • 问题：函数的执行环境要存储到哪里呢？
  • 函数的执行环境存储到了一个叫做调用栈的地方
  • 栈，是一种数据结构，特点 后进先出
  • 队列，是一种数据结构，特点 先进先出

调用栈（call stack）

- 调用栈负责存储函数的执行环境
- 当一个函数被调用时，它的执行环境会作为一个栈帧
插入到调用栈的栈顶，函数执行完毕其栈帧会自动从栈中弹出

```html
<script>
function fn(){
let a = 10
let b = 20

function fn2(){
console.log('fn2')
}

fn2()

console.log('fn~')
}

fn()

console.log(1111)
</script>
```

  • 队列，是一种数据结构，特点 先进先出

消息队列

  • 消息队列负责存储将要执行的函数
  • 当我们触发一个事件时，其响应函数并不是直接就添加到调用栈中的。
  • 因为调用栈中有可能会存在一些还没有执行完的代码
  • 事件触发后，JS引擎是将事件响应函数插入到消息队列中排队
<body>
<button id="btn">点我一下</button>
<button id="btn02">点我一下2</button>

<script>
function fn(){
let a = 10
let b = 20

function fn2(){
console.log('fn2')
}

fn2()

console.log('fn~')
}

fn()

console.log(1111)

const btn = document.getElementById("btn")
const btn02 = document.getElementById("btn02")

btn.onclick = function(){
alert(1111)
const begin = Date.now()

while(Date.now() - begin < 3000){
}
}

btn02.onclick = function () {
alert(2222)
}
</script>
</body>
进阶JavaScriptbrsectiongt事件对象子节点绑定事件前端JavaScript前端开发指尖人生

有关【JavaScript】50_终篇_编程进阶与BOM编程概览（3k字+）的更多相关文章

  1. ruby - 寻找通过阅读代码确定编程语言的ruby gem？ - 2

    几个月前，我读了一篇关于ruby​​gem的博客文章，它可以通过阅读代码本身来确定编程语言。对于我的生活，我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗？ 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem？，我们在StackOverflow上找到一个类似的问题：

  2. 网络编程套接字 - 2

    网络编程套接字网络编程基础知识理解源`IP`地址和目的`IP`地址理解源MAC地址和目的MAC地址认识端口号理解端口号和进程ID理解源端口号和目的端口号认识`TCP`协议认识`UDP`协议网络字节序socket编程接口`sockaddr``UDP`网络程序服务器端代码逻辑：需要用到的接口服务器端代码`udp`客户端代码逻辑`udp`客户端代码`TCP`网络程序服务器代码逻辑多个版本服务器单进程版本多进程版本多线程版本线程池版本服务器端代码客户端代码逻辑客户端代码TCP协议通讯流程TCP协议的客户端/服务器程序流程三次握手（建立连接）数据传输四次挥手（断开连接）TCP和UDP对比网络编程基础知识

  3. ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗？ - 2

    我完全不是程序员，正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3，但我想知道我是否应该升级到Ruby1.9，因为我真的没有任何升级的“遗留”成本。缺点是什么？我是否会遇到与普通gem的兼容性问题，或者甚至其他我不太了解甚至无法预料的问题？ 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem，请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问，您可以在以下位置查看:http://www.railsplugins.or

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby - 如何以编程方式删除实例上的 "singleton information"以使其编码(marshal)？ - 2

    我创建了一个由于“在运行时执行的单例元类定义”而无法编码的对象(这段代码的描述是否正确？)。这是通过以下代码执行的:#defineclassXthatmyusesingletonclassmetaprogrammingfeatures#throughcallofmethod:break_marshalling!classXdefbreak_marshalling!meta_class=class我该怎么做才能使对象编码正确？是否可以从对象instance_of_x的classX中“移除”单例组件？我真的需要一个建议，因为我们的一些对象需要通过Marshal.dump序列化机制进行缓存。

  6. Ruby 元编程问题 - 2

    我正在查看Ruby日志记录库Logging.logger方法并从sourceatgithub提出问题与这段代码有关:logger=::Logging::Logger.new(name)logger.add_appendersappenderlogger.additive=falseclass我知道类 最佳答案 这实际上删除了方法(当它实际被执行时)。这是确保close不会被调用两次的保障措施。看起来好像有嵌套的“class 关于Ruby元编程问题，我们在StackOverflow上找到一

  7. ruby - Paperclip:以编程方式分配图像并设置其名称 - 2

    使用Paperclip，我想从这样的URL抓取图像:require'open-uri'user.photo=open(url)问题是我最后得到一个像“open-uri20110915-4852-1o7k5uw”这样的文件名。有什么方法可以更改user.photo上的文件名？作为一个额外的变化，Paperclip将我的文件存储在S3上，所以如果我可以在初始分配中设置我想要的文件名就更好了，这样图像就会上传到正确的S3key。像这样:user.photo=open(url),:filename=>URI.parse(url).path 最佳答案

  8. ruby - 如何以编程方式检查证书是否已被吊销？ - 2

    我正在开发一个xcode自动构建系统。在执行一些预构建验证时，我想检查指定的证书文件是否已被撤销。我了解securityverify-cert验证其他证书属性但不验证吊销。我如何检查撤销？我正在用Ruby编写构建系统，但我对任何语言的想法都持开放态度。我阅读了这个答案(Openssl-Howtocheckifacertificateisrevokedornot)，但指向底部的链接(DoesOpenSSLautomaticallyhandleCRLs(CertificateRevocationLists)now?)进入的Material对我的目的来说有点过于复杂(用户上传已撤销的证书是一

  9. ruby - 如何保持我不常用的编程语言技能 - 2

    关闭。这个问题是off-topic.它目前不接受答案。想改进这个问题吗？Updatethequestion所以它是on-topic用于堆栈溢出。关闭11年前。Improvethisquestion我不经常使用ruby​​-通常它加起来相当于每两个月或更长时间编写一次脚本。我的大部分编程都是使用C++进行的，这与ruby​​有很大不同。由于我与ruby​​之间的差距如此之大，我总是忘记语言的基本方面(比如解析文本文件和其他简单的东西)。我想每天练习一些基本的东西，我想知道是否有一些我可以订阅的网站，并且会向我发送当天的Ruby问题或类似的东西。有人知道这样的站点/Internet服务吗？

  10. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

随机推荐