js-bom和dom笔记

js-bom

  • window.onload()

    jsx 复制代码
    window.onload()=function(){}

    文档页面内容完全加载完成会触发该事件

    jsx 复制代码
    document.addEventlistener('DOMContentLoaded',function(){})//dom加载完成后执行,ie9以上支持
  • 调整窗口大小事件

    窗口大小发生变化则触发,常用window.innerWidth作响应式布局

    jsx 复制代码
    window.addEventListener('resize',function(){
    })
  • 定时器(回调函数,事件)

    只调用一次的定时器

    jsx 复制代码
    setTimeout(function(){},2000);//2000ms
    setTimeout('fn()',2000);
    jsx 复制代码
    window.clearTimeout(timer);

    重复调用的定时器

    jsx 复制代码
    setInterval(function(),3000);
    clearInterval(timer);

    定义全局变量var timer = null;

  • 同步和异步

    同步任务在主线程上执行,形成执行栈

    异步任务通过回调函数实现(包括普通事件:click,resize;资源加载:load,error;定时器),他们的相关回调函数会放在任务队列中

    先同步,再异步,同步任务重复获取异步任务并执行,这种机制为事件循环

  • location

    • 统一资源定位符

    location常见属性

    location对象方法

  • 字符串操作

    jsx 复制代码
    .substr(起始的位置,几个字符);//第二个参数省略默认取得所有剩余字符
    var arr=p.split('=');//将p的=俩边分割为俩部分存入数组
  • navigator

    判断用户pc和手机终端实现跳转

  • history

  • offset属性元素位置

  • client属性元素大小

  • 立即执行函数

    jsx 复制代码
    (function(){})();
    (function(a,b){})(2,3);//传递参数
    (function(){}())
  • scroll属性滚动距离

    jsx 复制代码
    div.addEventListener('srcoll',function(){
    })//滚动事件
    window.pageYoffset
  • mouseover和mouseenter

    mouseover事件经过自身和子盒子都会触发,mouseenter只会经过自身盒子触发

    mouseenter和mouseleave都不会冒泡

  • 本地存储

    1.sessionStorage

    jsx 复制代码
    sessionStorage.setItem(key,value);
    sessionStorage.getItem(key)
    sessionStorage.removeTtem(key)
    sessionStorage.clear()

    2.localStorage

    生命周期永久有效,除非手动删除,关闭页面也会存在;可以多窗口共享;以键值对形式存储

    jsx 复制代码
    localStorage.setItem(key,value);
    localStorage.getItem(key)
    localStorage.removeTtem(key)
    localStorage.clear()

js-dom

文档页面从上往下加载,得先有标签,因此把script写在标签下面

console.dir()打印元素对象

  • 获取元素的方式

    一般来说获取的元素大小写敏感

    jsx 复制代码
    getElementById('')//通过id
    
    var li=document getElementsByTagName('li')//通过标签名
    li[0]//标签li的第一个对象
    
    getElementsByClassName('box')//通过类名
    box[0]//类名box的第一个对象
    
    document.querySelector('.box')//指定选择器的第一个元素对象
    document.querySelector('#box')
    document.querySelector('li')
    document.querySelectorAll('li')//指定选择器的所有元素对象
  • 获取body和html

    jsx 复制代码
    document.body
    document.documentElement
  • 注册事件

    事件三要素:事件源,事件类型,事件处理程序

    以上方法具有唯一性,后注册的处理函数会覆盖前面的。

    推荐可叠加的新方法(不用带on):

    jsx 复制代码
    bt.addEventListener('click',function(){})

    iE9以下使用attchEvent

  • 删除事件

    传统方法删除事件

    jsx 复制代码
    div.οnclick=null;//在点击事件内添加则该按钮点击一次即失效

    addEventListener删除事件

    注册事件不能使用匿名函数

    jsx 复制代码
    div.addEventLitsener('click',fn)
    div.removeEventListener('click',fn)
    function fn(e){
    	e.type;
    }

    ie9以下使用detachEvent()

  • 改变元素内容

    jsx 复制代码
    demo.innerHTML=//包括html标签,空格,换行
    demo.innerTetx=//去除html标签,空格,换行
    input.value='被点击了';
  • 格式化日期年月日

  • 禁用按钮button

    jsx 复制代码
    btn.disabled=true;//按钮无法再被点击
  • className

    jsx 复制代码
    this.className='change';//不保留原来的类
    this.className='first change';//保留原来的类名first,即多类名选择器
  • 排他思想

  • 自定义属性获取

    jsx 复制代码
    div.属性//获取元素自身属性
    div.getAttribute('index')
    div.setAttribute('index',2)//修改属性值
    div.setAttribute('class','container')
    div.removeAttribute()//移除属性值

    H5规定:自定义属性以data-开头

    jsx 复制代码
    <div data-index="1"></div>
    div.dataset.index或div.getAttribute('data-index')
  • 节点操作

    父节点,子节点

    jsx 复制代码
    close.parentNode//close最近的父节点
    close.childNodes//lose所有的子节点包含元素节点和文本节点等
    close.children//close所有元素节点
    close.children.length-1//close最后一个节点的索引号
    close.firstElementChild//close第一个元素节点

    兄弟节点

    jsx 复制代码
    div.nextSibling//下一个兄弟节点,包含元素节点,文本节点等
    div.previousSibling//前一个
    以下兼容性问题:ie9以上支持
    div.nextElementSibling//下一个兄弟元素节点
    div.previousElementSibling//前一个

    创建节点

    jsx 复制代码
    li=createElement('li');//创建节点
    ul.appendChild(li);//在ul已有节点后插入li
    ul.prepend(li);//在ul已有节点前插入li
    ul.insertbefore(li,ul.children[0]);//在ul的第一个孩子前插入li

    删除节点

    jsx 复制代码
    ul.removeChlid(ul.children[0]);

    克隆节点

    jsx 复制代码
    ul.cloneNode(true);//深度拷贝,复制节点及里面所有子节点
    ul.cloneNode(false);//括号内为空或false,浅拷贝不克隆子节点
  • document.write()和innerHTML

    页面文档流加载完后调用document.write()会导致页面重绘

    creatElement()创建多个元素效率稍低一点,但是结构更清晰

    innerHTML创建多个元素时,不要拼接字符串,采用数组形式拼接效率更高,但结构稍复杂

  • 动态创建数组

  • dom事件流

    冒泡阶段 从子到父

    目标阶段

    捕获阶段 从父到子

    onclick和attachEbentListener只能得到冒泡阶段

    addEventListener第三个参数是true则处于捕获阶段

    有些事件没有冒泡

  • 事件对象

    event包含一系列属性

    jsx 复制代码
    e=e||window.event;//为兼容ie678,一般不考虑
    jsx 复制代码
    e.target//返回点击的元素
    this//返回绑定的元素

    retuen false也能阻止默认行为(如a链接跳转)

  • 鼠标事件对象

  • 键盘事件对象

    onkeypress不识别功能键(左右箭头,shift),但区别大小写(keyCode),其他俩个相反

    执行顺序:keydown,keypress,keyup

  • 事件委托

    也称事件代理

    原理:不是每个子节点单独设置事件监听器,而是设置在父结点上,如何利用冒泡原理影响设置每个子节点,提高了程序的性能

  • 阻止默认事件的一些示例(禁止右键菜单,阻止表单提交等)

.forEach((item,index)=>{})

相关推荐
k0933几秒前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang135822 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning22 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人32 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00133 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
Yawesh_best42 分钟前
思源笔记轻松连接本地Ollama大语言模型,开启AI写作新体验!
笔记·语言模型·ai写作
子非鱼9211 小时前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石1 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙
小马哥编程1 小时前
【前端基础】CSS基础
前端·css