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 ...
随机推荐
- 矩阵中的路径 牛客网 剑指Offer
矩阵中的路径 牛客网 剑指Offer 题目描述 请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径.路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向左,向右,向上,向下 ...
- hdu 1058 Humble Numbers（构造？枚举？）
题意: 一个数的质因子如果只是2,3,5,7中的若干个.则这个数叫做humble number. 例如:1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 15, 16, 1 ...
- Language Server for Java™ 1.0 在VS Code上正式发布！
Nick Zhu form Senior Program Manager, Developer Division at Microsoft 今天,我们很高兴与大家宣布:Language Server ...
- 五（一）、spring 声明式事务注解配置
一.事务概述: 事务就是一系列的动作, 它们被当做一个单独的工作单元. 这些动作要么全部完成, 要么全部不起作用:比如 用户购买图书:购买动作之前需要确认 ①图书的数量是否足够:②用户账号余额是否足够 ...
- aardio 开发桌面应用，这几点必须要掌握！
1. 前言 大家好,我是安果! 上一篇文章写到可以通过 aardio 结合 Python 开发桌面应用,有些小伙伴后台给我留言,说 Aardio 资料太少,希望我能补充一些实用的功能 实用 | 利用 ...
- webpack 打包样式资源
webpack 打包样式资源 webpack.config.js配置文件内容为: // 用来拼接绝对路径的方法 const {resolve} = require('path') module.exp ...
- Linux mem 2.4 Buddy 内存管理机制
文章目录 1. Buddy 简介 2. Buddy 初始化 2.1 Struct Page 初始化 2.2 Buddy 初始化 3. 内存释放 4. 内存分配 4.1 gfp_mask 4.2 nod ...
- mysql-5.7.30安装
1.由于在线安装受制于网络环境,所以选择tar包编译安装. 首先去mysql镜像站下载mysql-5.7.30-linux-glibc2.5-x86_64.tar.gz2.上传到linux服 ...
- 2021 陇剑杯wp
前言 这比赛应该叫应急响应比赛,而且flag交三次就不能交了,就因为我交错一道题然后差一道进线下,气死了. Jwt 2.1 jwt 题目提示 2.2 搜索username得到 10087#admin ...
- sqlalchemy 执行sql
关键需要使用text from sqlalchemy import create_engine, text sql = 'SELECT * FROM my_table WHERE account_id ...