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学习的更多相关文章

  1. 从直播编程到直播教育：LiveEdu.tv开启多元化的在线学习直播时代

    2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...

  2. Angular2学习笔记（1）

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  3. ABP入门系列（1）——学习Abp框架之实操演练

    作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...

  4. 消息队列——RabbitMQ学习笔记

    消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...

  5. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  6. Unity3d学习 制作地形

    这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...

  7. 《Django By Example》第四章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...

  8. 菜鸟Python学习笔记第一天：关于一些函数库的使用

    2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...

  9. 多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁，Atomic原子类)

    前言:刚学习了一段机器学习,最近需要重构一个java项目,又赶过来看java.大多是线程代码,没办法,那时候总觉得多线程是个很难的部分很少用到,所以一直没下决定去啃,那些年留下的坑,总是得自己跳进去填 ...

随机推荐

  1. Educational Codeforces Round 95 (Rated for Div. 2) C. Mortal Kombat Tower (DP)

    题意:你和基友两人从左往右轮流打怪兽,强怪用\(1\)表示,垃圾用\(0\)表示,但基友比较弱,打不过强怪,碰到强怪需要用一次魔法,而你很强,无论什么怪都能乱杀,基友先打,每人每次至少杀一个怪兽,最多 ...

  2. ASP.Net Core 5.0 MVC中AOP思想的体现(五种过滤器)并结合项目案例说明过滤器的用法

    执行顺序 使用方法,首先实现各自的接口,override里面的方法, 然后在startup 类的 ConfigureServices 方法,注册它们. 下面我将代码贴出来,照着模仿就可以了 IActi ...

  3. Kubernets二进制安装(6)之部署主控节点服务--etcd

    Etcd是Kubernetes集群中的一个十分重要的组件,用于保存集群所有的网络配置和对象的状态信息. 整个kubernetes系统中一共有两个服务需要用到etcd用来协同和存储配置,分别是 网络插件 ...

  4. IFIX 数据源 节点 标签 域名

    一个动画,前景颜色 数据源如上图 点 ,,, 进入选择界面,如下 Fix32  应该是统一的前缀,自动添加上的 然后就是我们的节点名字,启动ifix的时候显示的那个节点名字 标签应该就是我们的 变量/ ...

  5. 记一次getshell

    水文涉及的知识点: Oday的挖掘 可以执行命令,但是有WAF , 命令执行的绕过 机器不出网,无法反弹 Echo写文件,发现只要写入php文件,后缀就重名为*,如1.php 变成1.* 通过上传 l ...

  6. css position sticky All In One

    css position sticky All In One css sticky & 吸顶效果 demo https://codepen.io/xgqfrms/pen/PoqyVYz ref ...

  7. GitHub Ribbons : 谈网站的安全性-资源链接如何 预防/实现 爬虫的批量下载！

    GitHub Ribbons : 谈网站的安全性-资源链接如何 预防/实现 爬虫的批量下载! 预防方法: 1. 使用随机数字符串,拼接URL! https://camo.githubuserconte ...

  8. You Don't Know the Hack tech in the frontend development

    You Don't Know the Hack tech in the frontend development 你所不知道的前端黑科技 css in js animation https://www ...

  9. element ui 停止维护了

    ️‍♂️ element ui 停止维护了 最近看到有人说 element ui 已经停止维护了,还有点不相信; 不过到 github 验证一下,好像是真的呀 4 个月,没有任何更新了 https:/ ...

  10. React & CSS Modules & CSS in JS

    React & CSS Modules & CSS in JS https://codesandbox.io/s/css-modules-name-mangling-ck1eo CSS ...