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 ...
随机推荐
- 用C++实现的数独解题程序 SudokuSolver 2.7 及实例分析
引言:一个 bug 的发现 在 MobaXterm 上看到有内置的 Sudoku 游戏,于是拿 SudokuSolver 求解,随机出题,一上来是个 medium 级别的题: 073 000 060 ...
- IDM使用教程：利用IDM下载百度网盘文件
IDM是什么 其实我使用IDM下载器只是为了方便网页版百度网盘直接下载大于40M文件而已,大家知道文件过大必须打开客户端才能下载,这点对于我的破电脑感觉很烦躁,每次要等待它慢悠悠打开,然后动用我的超级 ...
- Vue&Element开发框架中增加工作流处理，工作流的各个管理页面的界面处理
我在起前面的几篇随笔中,大概介绍了工作流的一些场景化处理,包括如何把具体业务表单组件化,并在查看和编辑界面中,动态加载组件内容,以及对于查看申请单的主页面,把审批.取消.发起会签.会签.批示分阅.阅办 ...
- （数据科学学习手札130）利用geopandas快捷绘制在线地图
本文示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 在上一篇文章中,我为大家介绍了不久前发布的 ...
- makefile编译子目录
make子目录常用方法 一般是 SUB_DIR = lib_src service .PHONY: subdirs $(SUB_DIR) subdirs: $(SUB_DIR) $(SUB_DIR): ...
- [atAGC045C]Range Set
首先我们可以把所有位置都变为1,因此不妨假设$a\le b$ 一个字符串$s$合法当且仅当:将其中每一段长度不小于$a$的0变成1后,存在一段1的长度都不小于$b$ 证明:我们称$S_{a,b}$为通 ...
- docker 配置redis并远程访问
我安装的是这个镜像 docker.io/redis docker pull docker mkdir docker cd docker mkdir redis cd redis mkdir data ...
- Date相关类
Date相关类 SimpleDateFormat类中format()和parse()方法 parse 字符串 --> 日期 format 日期 --> 字符串 Date类中getTime( ...
- 提升 RTC 音频体验 - 从搞懂硬件开始
前言 RTC(实时音视频通信)技术的快速发展,助力了直播.短视频等互动娱乐形式的普及:在全球疫情持续蔓延的态势下,云会议需求呈现爆发式增长,进一步推动了 RTC 行业的快速发展.为了给客户提供稳定可靠 ...
- 为了拿捏 Redis 数据结构，我画了 40 张图（完整版）
大家好,我是小林. Redis 为什么那么快? 除了它是内存数据库,使得所有的操作都在内存上进行之外,还有一个重要因素,它实现的数据结构,使得我们对数据进行增删查改操作时,Redis 能高效的处理. ...