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 ...
随机推荐
- STM32程序异常——中断处理要谨慎
问题背景 最近有一个新项目(车载项目),板子上除了原来的ARM + STM32F030K6Tx又多了一个8bit的mcu的单片机,这可真是嵌入式全家福了. 系统的主要核心工作是由arm来完成,但是在开 ...
- 绝世好题（DP）
题目链接:绝世好题 暴力就不用说了,和lis神似,O(n2)妥妥的挂掉,但可以得大部分分(好像是90,80)... 考虑优化,来一发非正解的优化: #include<bits/stdc++.h& ...
- Luogu P1084 疫情控制 | 二分答案 贪心
题目链接 观察题目,答案明显具有单调性. 因为如果用$x$小时能够控制疫情,那么用$(x+1)$小时也一定能控制疫情. 由此想到二分答案,将问题转换为判断用$x$小时是否能控制疫情. 对于那些在$x$ ...
- （二）FastDFS 高可用集群架构学习---搭建
一.单group 单磁盘 的 FastDFS 集群 a.前期准备 1.系统软件说明: 名称 说明 CentOS 7.x(安装系统) libfastcommon FastDFS分离出的一些公用函数包 F ...
- Pod 生命周期和重启策略
Pod 在整个生命周期中被系统定义为各种状态,熟悉 Pod 的各种状态对于理解如何设置 Pod 的调度策略.重启策略是很有必要的. Pod 的状态 状态值 描述 Pending API Server ...
- swoole、swoft环境配置
一.服务器环境 1.lnmp wget http://soft.vpser.net/lnmp/lnmp1.5.tar.gz -cO lnmp1.5.tar.gz && tar zxf ...
- dart系列之:dart语言中的变量
目录 简介 dart中的变量 定义变量 变量的默认值 Late变量 常量 总结 简介 flutter是google在2015年dart开发者峰会上推出的一种开源的移动UI构建框架,使用flutter可 ...
- Pytest使用pytest-html和allure生成测试报告
Pytest-html 1.安装命令pip3 install pytest-html,如下图: 执⾏后,会在当前⽬录下⽣成 ⼀个report.html的⽂件,打开后会展示详细的测试报告,执行该命令py ...
- mybatis替换成mybatisplus后报错mybatisplus Invalid bound statement (not found):
项目原来是mybatis,之后由于生成代码不方便,觉得替换成mybatisplus,引入mybatisplus后,启动项目报错mybatisplus Invalid bound statement ( ...
- c++学习笔记2（const关键词的用法）
定义常量指针 优势(便于类型检查,define无类型检查(目前不是很理解)) (函数参数为常量指针时,可避免函数内部不小心改变参数指针所指的地方,如有出现此类语句,编译则会报错) strcpy:复制字 ...