dom_bom学习
1. bom是什么?
browser object model(浏览器对象模型)
在浏览器中 window
指的就是bom对象
//网页重定向
// window.location.href="http://www.sina.com"
//浏览器可视区的宽度
console.log(window.innerWidth);
//当前浏览器窗口的宽度
console.log(window.outerWidth);
//浏览器可视区的高度
console.log(window.innerHeight);
//当前浏览器窗口的高度
console.log(window.outerHeight);
2. Dom是什么?
document object model(文档对象模型)
window.document: 通过这种方式来获取文档对象
但是我们的编程是面向浏览器编程,而浏览器对于我们编程来说就是window
对象;
所以说在实际开发过程中window是可以省略的;
document
3. 给浏览器的内容显式区域输出内容
document.write("hello world");
4. 浏览器的编码问题
//浏览器默认使用的编码是根据计算机所在的地区决定了(安装系统时所选择的国家/地区决定)
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置网页的编码-->
<meta charset="UTF-8">
<title>输出内容到页面</title>
</head>
<body>
<script>
document.write("hello world中国你好");
</script>
</body>
</html>
5. js获取网页中的元素
5.1 根据ID获取网页中的元素
//根据ID获取网页元素
let p1Element = document.getElementById("p1");
5.2 根据class名称获取网页中的元素
//根据class名称获取元素,返回的是一个集合
let c1Elements = document.getElementsByClassName("c1")
5.3 根据标签名称获取网中的元素
let ps = document.getElementsByTagName("p")
6. 使用选择器获取网页中的元素
//querySelector: 只能选择一个元素,如果后面的选择器匹配到了多个元素,则返回第一个
document.querySelector(".c1");
//querySelectorAll: 可以选择多个元素,返回nodeList对象
let elements = document.querySelectorAll(".c1");
7. 改变元素的内容
s1.innerHTML="<i>你好</i>世界" //会解析其中的标签
s1.innerText = "<i>你好</i>世界" //会原样输出
8. 改变元素的样式(了解)
样式属性和css一样
const s1 = document.getElementById("s1")
//如果属性是一个单词组成的,则直接写属性
// s1.style.color="#f00"
//如果属性是由两个单词组成的,那么把单词去掉 - ,变成小驼峰命名法;
s1.style.backgroundColor = "red"
9. js添加属性
s1.setAttribute("myname", "admin")
s1.setAttribute("class", "cc")
10. 移除属性
s1.removeAttribute("class")
11. js中的事件
事件的4要素:
- 事件源(谁在哪个元素上触发事件)
- 事件的类型
- 事件的触发时机
- 事件的内容(触发了事件之后要做什么)
11.1 绑定事件的方式
<!--通过标签的onclick属性绑定事件-->
<button onclick="doClick()">点我呀</button>
<script>
//事件触发之后调用的事件函数
function doClick() {
console.log("hello")
}
</script>
//获取元素
const btn1 = document.getElementById("btn1")
//给元素绑定事件
btn1.onclick = function () {
console.log("hello")
}
12. 页面加载事件
//页面加载事件(页面加载之后触发onload事件)
onload = function () {
const s1 = document.getElementById("s1")
s1.style.color = "#f00"
}
13. 点击事件与双击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击事件与双击事件</title>
</head>
<body>
<!--绑定点击事件-->
<button onclick="doClick()">点我呀</button>
<!--绑定双击事件-->
<button ondblclick="doClick2()">用力点我呀</button>
<script type="text/javascript">
function doClick() {
console.log("点击事件被触发了")
}
function doClick2() {
console.log("双击事件被触发了")
}
</script>
</body>
</html>
14. 鼠标事件
let box1 = document.getElementById("box1");
//鼠标划入
box1.onmouseover = function () {
console.log("onmouseover")
}
//鼠标移动
box1.onmousemove = function () {
console.log("onmousemove")
}
//鼠标移出
box1.onmouseout = function () {
console.log("onmouseout")
}
//鼠标按下
box1.onmousedown = function () {
console.log("onmousedown")
}
//鼠标松开
box1.onmouseup = function () {
console.log("onmouseup")
}
15. 键盘事件
<input type="text" onkeydown="keyDown()" onkeyup="keyUp()" placeholder="请输入杨幂最喜欢的人">
<script>
function keyDown() {
console.log("按键按下")
}
function keyUp() {
console.log("按键松开")
}
</script>
16. 操作改变的事件
<select onchange="change(this)">
<option value="admin1">admin1</option>
<option value="admin2">admin2</option>
<option value="admin3">admin3</option>
<option value="admin4">admin4</option>
</select>
<script>
function change(obj) {
console.log(obj.selectedIndex)
}
</script>
17. 鼠标的焦点事件
<input id="ipt" type="text" placeholder="请输入名称">
<script>
let ipt = document.getElementById("ipt")
ipt.onfocus = function () {
console.log("获取焦点")
}
ipt.onblur = function () {
console.log("失去焦点")
}
</script>
18. 表单事件
<form action="#" onsubmit="login()">
<input type="text" placeholder="请输入用户名">
<input type="text" placeholder="请输入密码">
<input type="submit" value="登录">
</form>
<script>
function login() {
console.log("表单提交了...")
}
</script>
19. js操作元素
19.1 创建节点与添加子节点与添加属性
let box = document.getElementById("box")
//创建一个节点 h1
let h1 = document.createElement("h1")
//添加属性
h1.setAttribute("name","admin")
//创建文本节点
let textNode = document.createTextNode("好好学习");
//给h1追加文本节点
h1.appendChild(textNode)
//给box追加h1节点
box.appendChild(h1)
19.2 节点与属性的移除
//调用节点的remove方法直接移除元素
h1.remove()
//移除属性
h1.removeAttribute("name")
19.3 节点内容的修改
innerText: 给里面追加文本(不会解析标签)
innerHTML:给里面追加文本(会解析标签)
19.4 获取节点的值
let d1 = document.getElementById("d1")
let btn = document.querySelector("#btn");
btn.onclick = function () {
//标签对象.value 获取值
console.log(d1.value)
}
dom_bom学习的更多相关文章
- 从直播编程到直播教育:LiveEdu.tv开启多元化的在线学习直播时代
2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...
- Angular2学习笔记(1)
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
- ABP入门系列(1)——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- 消息队列——RabbitMQ学习笔记
消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Unity3d学习 制作地形
这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...
- 《Django By Example》第四章 中文 翻译 (个人学习,渣翻)
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...
- 菜鸟Python学习笔记第一天:关于一些函数库的使用
2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...
- 多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类)
前言:刚学习了一段机器学习,最近需要重构一个java项目,又赶过来看java.大多是线程代码,没办法,那时候总觉得多线程是个很难的部分很少用到,所以一直没下决定去啃,那些年留下的坑,总是得自己跳进去填 ...
随机推荐
- hdu5497 Inversion
Problem Description You have a sequence {a1,a2,...,an} and you can delete a contiguous subsequence o ...
- codeforces578C. Weakness and Poorness
time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...
- 【转】Redis数据备份和重启恢复
一.对Redis持久化的探讨与理解 目前Redis持久化的方式有两种: RDB 和 AOF 首先,我们应该明确持久化的数据有什么用,答案是用于重启后的数据恢复.Redis是一个内存数据库,无论是RDB ...
- OpenStack-知识点补充
登录计算节点查看进程 [root@compute ~]# ps aux | grep kvm root 824 0.0 0.0 0 0 ? S< 10:19 0:00 [kvm-irqfd-cl ...
- VS中使用TreeView的Checked属性问题
VS中使用TreeView,当需要用到Checked属性,并需要同步子节点和父节点的Checked属性时,若使用AfterCheck事件会导致死循环,这里我使用的是NodeMouseClick事件.代 ...
- Gitlab忘记root用户密码解决办法
一.Gitlab忘记root用户密码,重置用户密码和查看用户ID号方法 1.Gitlab查看用户id号的方法1)方法1:通过api接口查询接口查询地址:http://gitlab的url/api/v ...
- leetcode 2 两数相加 考虑溢出
先用int存了结果然后出错,int溢出了. 真是憨批嗷. 不用考虑保存结果,直接一位一位计算就行. 感觉被描述误导了. /** * Definition for singly-linked list. ...
- Linux错误记录贴
add-apt-repository 不要写成 add-apt-repository service 不要写成 sevice 总之在打命令的时候要注意不要拼错单词 对于ls命令权限不够我们可以先su ...
- Watch the Wifi: Visually Stunning Look at the Digital World Invading Cities (video)
http://singularityhub.com/2011/04/01/watch-the-wifi-visually-stunning-look-at-the-digital-world-inva ...
- React Big Changes All in One
React Big Changes All in One React 重大更新 React Versions React 版本变更 https://reactjs.org/versions/ sema ...