黑马dom&bom预习


为了应付俩招新而学学黑马

结果学着学着忘记原先目的了。。。

既然都记了这么多了

对象

构造函数首字母大写

this!

!(https://gitee.com/darren-greenhand//picture/raw/master/image-20210330213907799.png)

其实函数也能遍历到,但是很少用

内置对象

对象分:自定义,内置,浏览器对象

前俩是ES里的,浏览器对象是JS独有的

内置对象就是JS自带的,提供了最常用的和最基本的功能

可以查询MDN文档

Math

Math.random()返回一个随机小数 0<= x < 1

MDN提供了以此为基础的得到各种随机数的方法

DOM

元素是标签

节点:所有内容,标签,属性,。。。

DOM把所有内容看作对象

因为文档页面从上往下加载,所以script

如果没有

小心不要把伪数组当初对象哟

document.querySelector 返回指定选择器的第一个元素对象

document.querySelectorAll

获取body直接document.body,HTML 是documentElement

事件基础

事件是可以被JS侦测到的行为

是一种触发–响应机制

改变内容

innerHTML是W3C推荐的

所以标签的属性在DOM中被当作属性

记得表单里显示的内容是value属性

修改样式

行内样式(优先级最高)

循环精灵图

onfocus

onblur

提前准备好另一个类,然后修改类名

element.className = “change”

这会覆盖原先的类名

不想覆盖则 .className += “ new”

排他思想

先清除其他所有,再给自己设置

onmouseovr onmouseout

获得属性

.removeAttribute(‘index’)

display none/block

自定义属性(在页面而不是服务器存储并使用数据)

ie11以上才有dataset,一般使用getAttribute

节点操作

获得节点

dir方法用来对一个对象进行检查(inspect),并以易于阅读和打印的格式显示。

console.log({f1: 'foo', f2: 'bar'})
// Object {f1: "foo", f2: "bar"}

console.dir({f1: 'foo', f2: 'bar'})
// Object
//   f1: "foo"
//   f2: "bar"
//   __proto__: Object

上面代码显示dir方法的输出结果,比log方法更易读,信息也更丰富。

该方法对于输出DOM对象非常有用,因为会显示DOM对象的所有属性。

父子关系

node.parentNode(离元素最近的父级节点,找不到返回null)

.node.childNodes()集合(包含元素节点和文本节点等等),用nodetype加以筛选

非官方但是被广泛支持:.children(集合)

.firstChild .lastChild 这个会返回(元素节点或文本节点,超坑的是换行也是一个文本节点!)

兼容性问题👇IE9

.firstElementChild

.lastElementChild

兄弟节点用的很少

实际开发写法还是用ol.children[0]和ol.children[ol.children.length-1]或者自己知道数量

.node.nextSibling

.node.previousSibling

这俩也会看到文本节点

兼容性问题👇IE9

.node.nextElementSibling

node.previousElementSibling

创建添加节点

document.createElement(‘li’)

node.appendChild(child) node 父级 child子级

这是后面追加元素

node.insertBefore()

删除节点

node.removeChild() 删的必须是子元素,

复制添加节点

new = node.cloneNode()

事件高级

注册事件

删除事件

事件流

事件对象

兼容性问题 e = e||window.event

event有个类似this的属性 currentTarget,没啥鬼用

兼容性问题处理👇

阻止默认行为

或者直接return false; 谁都能用但是return后的代码不执行,而且只用于传统的注册方式

直接preventDefault吧,

阻止冒泡

event.stopPropagation(); 兼容性问题。。

event.cancelBubble;老版本

事件委托

配合e.target就很牛逼

常用事件

禁止右键和选中文字

然而做得好的网站也不知道用什么方法防住了偷取内容。。

鼠标事件对象

MouseEvent

mousemove 鼠标移动1px就会触发

记得css修改img为position: absolute

键盘数据对象

如果一直按着,down和press会一直输出。。

BOM

所以不要声明名叫name的全局变量

常见事件

窗口加载

调整窗口大小

只要大小像素变化就会触发resize

定时器

拯救男主角 clearTimeout(timerID)

倒计时!

JS执行队列

如定时器3秒,就是3秒后吧事件放到任务队列中

location对象

传递参数

navigator.userAgent对象存储了用户使用的浏览器的信息

history对象

网页特效

offset系列

在用后面俩的时候记得加上 + ‘px’

没有带定位的父亲则以一直网上找直到。。body

拖动模态框

电商放大图

大图片是一个图片,overflow:hidden

client系列

可视区

立即执行函数

无需调用,立马自己执行的函数,第二个小括号可以看成是调用函数

最大的作用是独立创建了个作用域

  1. (function () {} ) ()

    如 (function (a.b) {console.log(a+b); } ) (1,2) //传参

  2. (function () {} () )

很多flexble核心源码是有关这个的

Scroll系列

onscroll事件,滚动事件

总结


文章作者: Darren
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Darren !
评论
  目录