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 ...
随机推荐
- mysql 的安装方式
一.rpm包安装方式 mysql-community-client-5.7.18-1.el7.x86_64.rpm 客户端 mysql-community-devel-5.7.18-1.el7.x86 ...
- 『学了就忘』Linux基础命令 — 29、关机和重启
目录 1.sync数据同步 2.shutdown命令 3.reboot命令 4.halt和poweroff命令 5.init命令 1.sync数据同步 sync命令的基本信息如下: 命令名称:sync ...
- Ubuntu 安装 mysql 报错 "update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在"
解决方法: sudo cp /etc/mysql/my.cnf /etc/mysql/mysql.cnf 偷梁换柱-! 如果想更新mysql的源方法如下: wget http://dev.mysql. ...
- Java oop三大特性（封装，继承，多态）
封装 顾名思义,就是将数据封装起来,提高数据的安全性.我们程序都是要追求"高内聚,低耦合".高内聚就是类的内部数据操作细节自己完成,不允许外部干涉,低耦合:仅暴露少量的方法给外部使 ...
- 【Java】String、StringBuffer、StringBuilder
java.lang.String类 概述 String:代表字符串.Java 程序中的所有字符串字面值(如 "abc" )都作为此类的实例实现 String声明为final,不可被 ...
- RDD的缓存
RDD的缓存/持久化 缓存解决的问题 缓存解决什么问题?-解决的是热点数据频繁访问的效率问题 在Spark开发中某些RDD的计算或转换可能会比较耗费时间, 如果这些RDD后续还会频繁的被使用到,那么可 ...
- 7.深入TiDB：range 范围计算优化
本文基于 TiDB release-5.1进行分析,需要用到 Go 1.16以后的版本 我的博客地址:https://www.luozhiyun.com/archives/605 这篇文章首先会回顾一 ...
- 暑假算法练习Day6
最近开始了实验室的生活,并且学习了bullet journal.希望接下来的每一天都能完成所有的任务. 1012 数字分类 (20 分) 给定一系列正整数,请按要求对数字进行分类,并输出以下 5 个数 ...
- Django 小实例S1 简易学生选课管理系统 7 修改个人信息
Django 小实例S1 简易学生选课管理系统 第7节--修改个人信息 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 用户模块除了注册登录之外,还 ...
- scrapy的安装，scrapy创建项目
简要: scrapy的安装 # 1)pip install scrapy -i https://pypi.douban.com/simple(国内源) 一步到位 # 2) 报错1: building ...