day35前端基础之BOM和DOM
day35前端基础之BOM和DOM
BOM操作
简介
BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。
window的子对象
一、window的子对象：navigator对象
navigator.appName # Web浏览器全称
navigator.appVersion # Web浏览器厂商和版本的详细字符串
navigator.userAgent # 客户端绝大部分信息
navigator.platform # 浏览器运行所在的操作系统
二、location对象（#记住）
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
常用属性和方法：
location.href # 获取URL
location.href="http://www.baidu.com" # 跳转到指定页面
location.reload() # 重新加载页面
弹出框
一、弹出框
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
1、警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
用法：
alert('不能')
2.确认框（了解即可）
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
语法：
confirm('确定打开吗？')
3.提示框（了解即可）
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
语法：
prompt(("请在下方输入","你的答案"))
定时器
一、setTimeout()
function f() {
console.log('123')
}
setTimeout(f,3000) # 单位是毫秒，过3000毫秒在执行函数
# 清除定时器（关闭定时器）：
let t = setTimeout(f,5000)
clearTimeout(t) # 不会打印
二、clearTimeout()
function f() {
console.log('123')
}
setInterval(f,2000)
# 清除定时器（关闭定时器）：
let t = setInterval(f,200)
clearInterval(t)
DOM操作
简介
DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
DOM标准规定HTML文档中的每个成分都是一个节点(node)：
文档节点(document对象)：代表整个文档
元素节点(element 对象)：代表一个元素（标签）
文本节点(text对象)：代表元素（标签）中的文本
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
注释是注释节点(comment对象)
JavaScript 可以通过DOM创建动态的 HTML：
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
直接查找（重点****）
直接查找：
document.getElementById 根据ID获取一个标签
document.getElementsByClassName 根据class属性获取
document.getElementsByTagName 根据标签名获取标签合集
一、id查找
</body>
<div id="d1">d1</div>
<div id="de">d2</div>
<script>
var d1 = document.getElementById('d1')
console.log(d1)
</script>
</body>
二、class属性查找
</body>
<div class="c1">d1</div>
<div class="c1 c2">d2</div>
<script>
var d1 = document.getElementsByClassName('c1');
var d1 = document.getElementsByClassName('c1')[0]; # 可以按索引取值
var d1 = document.getElementsByClassName('c1')[1];
console.log(d1)
</script>
</body>
三、标签名查找
</body>
<div class="c1">d1</div>
<div class="c1 c2">d2</div>
<script>
var d1 = document.getElementsByTagName('div')
var d1 = document.getElementsByTagName('div')[0]
var d1 = document.getElementsByTagName('div')[1]
console.log(d1)
</script>
</body>
间接查找
间接查找用法：
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
一、父标签查找
</body>
<div id="d1" class="c1">
dff
<p class="p1">
<span class="span1">span1</span>
</p>
</div>
<div id="d2">
222
</div>
<script>
var span = document.getElementsByClassName('span1')[0]
var div1 = span.parentElement.parentElement # 根据parentElement查找父标签
console.log(div1)
</script>
</body>
二、子元素查找
</body>
<div id="d1" class="c1">
<p class="p1">
<span class="span1">span1</span>
</p>
</div>
<div id="d2">
222
</div>
<script>
// var span = document.getElementsByClassName('span1')[0]
// var div1 = span.parentElement.parentElement
// console.log(div1)
var div1 = document.getElementById('d1')
var p = div1.children[0] # 根据子元素查找，取值用索引
console.log(p)
</script>
</body>
节点操作
例子1：
<body>
<div id="d1">
</div>
<script>
1.创建img标签
var img = document.createElement('img');
var div = document.getElementById('d1')
2.设置属性，点语法只能添加标签自带的属性
img.src = '1234.png';
img.alt = '1234.png';
#添加自定义属性需要用setAttribute
img.setAttribute('name','meng') # 自定义添加属性
img.removeAttribute('name','meng') # 删除属性
console.log(img.getAttribute('name')) # 获取信息
3.把img标签放到div里面
div.append(img)
console.log(img)
</script>
</body>
例子2：
</body>
<div id="d1">
</div>
<script>
1.创建标签
var div = document.getElementById('d1');
var a = document.createElement('a');
2.设置属性
a.href = 'http://www.baidu.com';
a.target = '_blank';
3.给a标签添加文本
a.innerText = 'span>点我哦</span>'; # 把所有的内容都当成文本了
a.innerHTML = 'span>点我哦</span>'; # 可以识别标签
div.append(a);
console.log(a)
</script>
</body>
获取值操作
</body>
<p>
用户名：<input type="text" id="d1" value="meng">
</p>
<p>
密码：<input type="password" id="d2" value="123456">
</p>
<select name="" id = "city">
<option value="迪迦">动画</option>
<option value="赛罗" selected>动漫</option> # 默认这个
</select>
<script>
var username = document.getElementById('d1').value;
console.log(username)
var password = document.getElementById('d2').value;
console.log(password)
var city = document.getElementById('city').value;
console.log(city)
</script>
</body>
js class操作
用法：
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
代码：
<div id="d1" class="c2">
</div>
<script>
# 先找到标签
var div = document.getElementById('d1')
# 增加class
div.classList.add('c1')
# 删除
div.classList.remove('c2')
console.log(div.classList.contains('c3')) # 判断是否有该class
# 有一个是添加，有两个为删除
div.classList.toggle('c2')
div.classList.toggle('c2')
</script>
</body>
js 操作css
</body>
<div id="d1" class="c1">div</div>
<script>
var div = document.getElementsByTagName('div')[0]
div.style.color = 'red';
div.style.fontSize = '34px'
div.style.border = '3px solid red' # 设置全体边框
div.style.borderLeft = '3px solid blue' # 只设置左边框
</script>
</body>
绑定事件
绑定方法一：
</body>
<button onclick="f1()">点我</button>
<script>
function f1() {
alert(123)
}
</script>
</body>
第二种绑定方法：
</body>
<button class="btn">点我</button>
<script>
var btn = document.getElementsByClassName('btn')[0];
btn.onclick = function () {
alert(123)
}
</script>
</body>
加载事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () { # 等所有的执行完后，在执行这串代码
var btn = document.getElementsByClassName('btn')[0];
btn.onclick = function () {
alert(123)
}
}
</script>
</head>
<body>
<button class="btn">点我</button>
</body>
开关灯示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
width:200px;
height: 200px;
border-radius: 50%;
}
.bg_green{
background: green;
}
.bg_red{
background: red;
}
</style>
</head>
<body>
<div id="d1" class="bg_green bg_red "></div>
<button class="btn">点我</button>
<script>
var btn = document.getElementsByClassName('btn')[0]
var div = document.getElementById('d1')
btn.onclick = function () {
div.classList.toggle('bg_red')
}
</script>
</body>
</html>
input获取焦点事件
</body>
<input type="text" id="d1" value="点我呀">
<script>
var inp = document.getElementById('d1');
# 获取焦点事件
inp.onfocus = function () {
inp.value = ''
}
# 失去焦点事件
inp.onblur = function () {
inp.value = '点我干啥'
}
</script>
</body>
省市联动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="pro">
</select>
<select name="" id="city">
</select>
<script>
# 拿到数据
var pro = document.getElementById('pro')
var city = document.getElementById('city')
var data = {
"河北省": ["廊坊", "邯郸"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"],
}
for (var key in data){ # key ==>河北省，北京，山东
# 创建省的option
var option = document.createElement('option') # 相当于<option ></option>
# 设置属性
option.value = key; # <option value='河北省'></option>
option.innerText = key; # <option value='河北省'>河北省</option>
# 把option放到select中， id=pro
pro.append(option)
}
pro.onchange = function () {
# 拿到当前的省
var currentPro = this.value;
var currentCityList = data[currentPro]; # ["廊坊", "邯郸"]
city.innerText = ''; # 每次执行都清空一次
for (var i = 0;i<currentCityList.length;i++){
var option = document.createElement('option'); # <option ></option>
option.value = currentCityList[i]; # 拿到数组的值
option.innerText = currentCityList[i]; # 拿到数组的值，添加值
# 把option放到select中，id=city
city.append(option)
}
}
</script>
</body>
</html>
day35前端基础之BOM和DOM的更多相关文章
- JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...
- 前端基础之BOM和DOM day52
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互 ...
- day 47 前端基础之BOM和DOM
前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些 ...
- 前端基础之BOM和DOM
关于网页交互:BOM和DOM javaScript分为ECMAScript,DOM,BOM . BOM(Browser object Model)是指浏览器对象模型,它使JavaScript有能力 ...
- 前端基础之BOM和DOM(响应式布局、计时器、搜索框、select联动)
一.BOM和DOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进 ...
- Python学习（二十二）—— 前端基础之BOM和DOM
转载自http://www.cnblogs.com/liwenzhou/p/8011504.html 一.前言 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没 ...
- 前端基础之BOM和DOM和三个小示例(计时器、搜索框、select联动)
一.BOM和DOM JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进 ...
- 前端基础 之 BOM和DOM
浏览目录 背景 BOM window对象 window的子对象 DOM HTML DOM树 查找标签 节点操作 事件 一.背景 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些 ...
- 前端基础之BOM和DOM操作
目录 BOM和DOM定义 windows对象 windows的子对象 navigator对象 screen对象 history对象 location对象 弹出框 警告框 确认框 提示框 计时相关 se ...
随机推荐
- Ubuntu Python2 和 Python3 共存 切换
例如 你写了代码 创建一个文件 在终端 vim test.py 然后写入代码 print "hello world" 接着运行代码 python test.py 会输出 hello ...
- minimum-depth-of-binary-tree leetcode C++
Given a binary tree, find its minimum depth.The minimum depth is the number of nodes along the short ...
- x64 InlineHook 黑魔法
目录 x64 InlineHook 黑魔法 为什么不能用X86 的HOOK方式? 原理:jmp + rip 进行寻址6字节方式跳转 手动InlineHook 临时地址x(找一块空内存) 计算偏移 源地 ...
- Arthas在线java进程诊断工具 在线调试神器
tag: java 诊断 堆栈 在线调试 耗时 死锁 arthas 阿里巴巴 Arthas (阿尔萨斯) Arthas 是 Alibaba 开源的Java诊断工具,深受开发者喜爱. 官网文档:http ...
- split，cdn，shell脚本，tmux，记一次往国外服务器传大文件的经历
需求是这样的:将一个大概680M的Matlab数据文件传到国外某所大学的服务器上,服务器需要连接VPN才能访问,由于数据文件太大,而且如果我直接ssh连过去或者用ftp传输,那么中间很可能中断. ps ...
- 了解一下Git的常用语句
简单学习了一下Git,整理了一点常用语句 http连接 git clone https://仓库地址 连接githup cd shop 进入文件夹 git config --global user.n ...
- 《Python语言程序设计》【第1周】Python基本语法元素
实例:温度转化 #TempConvert.py 单行注释 ''' TemConvert.py ''' # 多行注释 TempStr = input("请输入带有符号的温度值: ") ...
- mongodb(一)
文档是 MongoDB 的核心,类似于 SQLite 数据库(关系数据库)中的每一行数据.多个键及其关联的值放在一起就是文档.在 Mongodb 中使用一种类 json 的 bson 存储数据,bso ...
- 【Rancher相关问题】Rancher 2.5.8 及以下版本，提示Alert: Component controller-manager,scheduler is unhealthy.
问题描述 如图,Rancher2.5.8版本提示 controller-manager,scheduler 不健康,管理的k8s集群版本1.21.1 解决方法 在Master节点执行如下命令: sed ...
- [hdu7020]Array
(这是一个线性的做法) 显然对于合法的区间,众数是唯一的,因此不妨枚举众数,将众数标记为1.其余数标记为-1,此时问题即求有多少个区间和大于0 考虑暴力的做法:从左到右枚举右端点,记当前前缀和为$to ...