zoukankan      html  css  js  c++  java
  • DOM重点核心

    H5新增元素获取方式

    var box = document.querySelector('选择器')
    var box = document.querySelector('.box')//class选择器
    var box = document.querySelector('#box')//id选择器
    

    querySelector根据指定元素返回第一个元素对象

    var box = document.querySelectorAll('.box')
    

    querySelectorAll()返回指定选择器的所有元素对象集合

    获取特殊元素

    1. 获取body元素
    var bodyEle = document.body
    
    1. 获取HTML元素
    var htmlEle = document.documentElement
    

    常见的鼠标事件

    鼠标事件 触发条件
    onclick 鼠标点击左键触发
    onmouseover 鼠标经过触发
    onmouseout 鼠标离开触发
    onfocus 获得鼠标焦点触发
    onblur 失去鼠标焦点触发
    onmousemove 鼠标移动触发
    onmouseup 鼠标弹起触发
    onmousedown 鼠标按下触发

    innerText 和innerHTML区别

    element.innerText
    

    从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉

    element.innerHTML
    

    起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行

    区别:

    • innerText不识别html标签,非标准,去除空格和换行
    • innerHTML识别html标签,W3C标准,保留空格和换行

    修改样式属性

    element.style //行内样式操作
    element.className //类名样式操作
    

    注意:

    1. JS里面的样式采取驼峰命名方法,比如fontSize、backgroundColor
    2. JS修改style样式操作,产生的是行内样式,css权重比较高
    3. 如果样式修改较多,可以采取操作类名方式更改元素样式
    4. class因为是个保留字,因此使用className来操作元素类名属性
    5. className会直接更改元素的类名,会覆盖原先的类名
    6. 修改元素的className更改元素的样式时,如果想要保留原先的类名,可以采用多类名选择器
    this.className = "first second"
    

    排他思想

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    
    <script>
        //1.获取所有按钮
        var btns = document.getElementsByTagName('button')
        //btn得到的是伪数组,里面的每一个元素btns[i]
        for(var i = 0 ; i < btns.length ; i++){
            btns[i].onclick = function(){
                //(1)先把所有的按钮背景颜色去掉,干掉所有人
                for(var i = 0 ; i < btns.length ; i++){
                    btns[i].style.backgroundColor = ""
                }
                //(2)然后才设置当前的背景颜色,留下我自己
                this.style.backgroundColor = "yellow"
            }
        }
        //2.首先排除其他人,然后才设置自己的样式,这种排除其他人的思想称为排他思想
    </script>
    

    自定义属性的操作

    1. 获取属性值

    • element.属性 获取属性值
    • element.getAttribute('属性');

    区别:

    • element.属性 获取内置属性值(元素本身自带的属性)
    • element.getAttribute('属性'); 主要获得自定义的属性(标准)我们自己定义的属性

    2.设置属性值

    • element.属性 = '值' 设置内置属性值
    • element.setAttribute('属性','值'); 主要针对于自定义属性(标准)

    3.移除属性

    • element.removeAttribute('属性');

    H5自定义属性

    1. H5设置自定义属性

      H5规定自定义属性data-开头作为属性名并且赋值

      比如<div data-index = "1"></div>

      或者使用JS设置

      element.setAttribute('data-index',2)

    2. H5获取自定义属性

      • 兼容性获取 element.getAttribute('data-index');

      • H5新增element.dataset.index 或者 element.dataset['index'] 只能获取data-开头的 ie11才开始支持

        注:如果自定义属性里面有多个-连接的单词,获取的时候采用驼峰命名法,如data-list-name,获取 的时候就是element.dataset.listName

    节点操作

    1. 父级节点
    node.parentNode
    
    • parentNode 属性可返回某节点的父节点,返回最接近的一个父节点
    • 如果指定的节点没有父节点就返回null
    1. 子节点
    parentNode.children(非标准)
    

    parentNode.children是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返回。

    虽然children是一个非标准,但是得到了各个浏览器的支持,因此可以放心使用

    1. 兄弟节点
    node.nextSibling
    

    返回当前元素的下一个兄弟节点,找不到则返回null,包含所有节点

    node.previousSibling
    

    返回当前元素的上一个兄弟节点,找不到则返回null,包含所有节点

    1. 创建节点
    document.createElement('tagName')
    
    1. 添加节点
    1.node.appendChild(child)
    

    node 父级 , child 子级。将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。

    2.node.insertBefore(child,指定元素)
    

    将一个节点添加到指定父节点的指定子节点前面。类似于css里面的before伪元素。

    1. 删除节点
    node.removeChild(child)
    

    从DOM中删除一个子节点,返回删除的节点。

    1. 复制节点
    node.cloneNode()
    

    返回调用该方法的节点的一个副本,也称为克隆节点/拷贝节点。

    注:

    1. 如果括号参数为空或者为false,则是浅拷贝,即只克隆节点本身,不可隆里面的子节点。
    2. 如果括号参数为true,则是深度拷贝,会复制节点本身以及里面所有的子节点。

    三种动态创建元素的区别

    • document.write ()
    • element.innerHTML
    • document.createElement ()

    区别

    1. document.write 是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘

    2. innnerHTML是将内容写入某个DOM节点,不会导致页面全部重绘

    3. innerHTML创建多个元素效率更高(不要拼接字符串,采取数组形式拼接,结构稍微复杂。

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

    总结:不同浏览器下,innerHTML效率要比createElement高

    注册事件(绑定事件)

    注册事件有两种方式:传统方式和方法监听注册方式

    传统注册方式

    • 利用on开头的事件,onclick等
    • <button onclick = "alert('hello')"></button>
    • btn.onclick = function (){ }
    • 特点:注册事件的唯一性
    • 同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数

    方法监听注册方式

    • w3c标准 推荐方式
    • addEventListener () 它是一个方法
    • IE9之前的IE不支持此方法,可使用attachEvent ()代替
    • t特点:同一个元素同一个事件可以注册多个监听器
    • 按注册顺序依次执行

    addEventListener 事件监听方式

    eventTarget.addEventListener(type , listener[,useCapture])
    

    该方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数。

    该方法接收三个参数:

    • type:事件类型字符串,比如click、mouseover,注意这里不要带on
    • listener:事件处理函数,事件发生时,会调用该监听函数
    • useCapture:可选参数,是一个布尔值,默认是false。

    例:

    btn.addEventListener('click',function(){
    	alert('hello');
    })
    //同一个元素,同一个事件可以添加多个侦听器(事件处理程序)
    btn.addEventListener('click',function(){
    	alert('world');
    })
    

    attachEvent 事件监听方式

    eventTarget.attachEvent(eventNameWithOn , callback)
    

    eventTarget.attachEvent () 方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时,指定的回调函数就会被执行。

    该方法接收两个参数:

    • eventNameWithOn:事件类型字符串,比如onclick、onmouseover,这里要带on
    • callback:事件处理函数,当目标触发事件时回调函数被调用

    注:IE8及早期版本支持

    注册事件兼容性解决方案

    function addEventListener (element , eventName , fn) {
               //判断当前浏览器是否支持addEventListener方法
               if(element.addEventListener) {
                   element.addEventListener(eventName , fn);//第三个参数默认是false
               } else if (element.attachEvent) {
                   element.attachEvent('on' + eventName , fn);
               } else {
                   //相当于element.onclick = fn
                   element('on' + eventName) = fn;
               }
           }
    

    兼容性处理的原则:首先照顾大多数浏览器,再处理特殊浏览器

    删除事件

    1. 传统注册方式

      eventTarget.onclick = null;

    2. 方法监听注册方式

    • eventTarget.removeEventListener(type , listener[ , useCapture]);
    element.removeEventListener('click',fn)
    
    • eventTarget.detachEvent(eventNameWithOn , callback);
    element.detachEvent('onclick',fn)
    

    DOM事件流

    事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流

    DOM事件流分为3个阶段:

    1. 捕获阶段
    2. 当前目标阶段
    3. 冒泡阶段

    注意

    1. JS代码中只能执行捕获或者冒泡其中的一个阶段

    2. onclick和attachEvent只能得到冒泡阶段

    3. addEventListener(type,listener[ , useCapture])第三个参数如果是true,表示在事件捕获阶段调用事件处理程序;如果是false(不写默认就是false),表示在事件冒泡阶段调用事件处理程序。

    4. 实际开发中很少使用事件捕获,更关注事件冒泡

    5. 有些事件是没有冒泡的,比如onblur、onfocus、onmouseenter、onmouseleave

    6. 事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙的做某些事情

    事件对象

    eventTarget.onclick = function(event){}
    eventTarget.addEventListener('click',function(event)){}
    //event就是事件对象
    

    ​ 官方解释:event对象代表事件的状态,比如键盘按键的状态、鼠标的位置、鼠标按钮的状态

    ​ 简单解释:事件发生后,跟事件相关想一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event,它有很多属性和方法。

    比如:

    1. 谁绑定了这个事件。
    2. 鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。

    注:这个event是个形参,系统帮我们设定为事件对象,不需要传递实参过去

    当我们注册事件时,event对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数)

    事件对象兼容性问题

    1. 标准浏览器中是浏览器给方法传递的参数,只需要定义形参e就可以获取到
    2. 在IE6~8中,浏览器不会给方法传递参数,如果需要的话,需要到window.event中获取查找

    解决

    e = e || window.event
    

    事件对象的常见属性和方法

    事件对象属性方法 说明
    e.target 返回触发事件的对象 标准
    e.srcElement 返回触发事件的对象 非标准ie6-8使用
    e.type 返回事件的类型 比如click mouseover 不带on
    e.cancelBubble 该属性阻止冒泡 非标准ie6-8使用
    e.returnValue 该属性阻止默认事件(默认行为) 非标准 ie6-8使用 比如不让链接跳转
    e.preventDefault() 该方法阻止默认事件(默认行为) 标准 比如不让链接跳转
    e.stopPropagation() 阻止冒泡 标准

    e.target与this 的区别

    1. e.target 返回的是触发事件的对象(元素)

    2. this返回的是绑定事件的对象

      例:例如点击一个li标签,事件绑定的是ul标签,那么this指向ul,e.target指向点击的那个对象,谁触发了这个事件,点击的是li,e.target指向的就是li

    事件委托(代理、委派)

    事件委托的原理

    不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。(利用事件冒泡的优点)

    例:给ul注册点击事件,然后利用事件对象的target来找到当前点击的li,因为点击li,时间会冒泡到ul上,ul有注册事件,就会触发事件监听器。

    事件委托的作用

    只操作了一次DOM,提高了程序的性能

    常用的鼠标事件

     //1.contextmenu禁用右键菜单
     document.addEventListener('contextmenu',function(e){
     e.preventDefault();
     })
     //2.禁止选中文字 selectstart
     document.addEventListener('selectstart',function(e){
     e.preventDefault();
     })
    

    鼠标事件对象

    鼠标事件对象 说明
    e.clientX 返回鼠标相对于浏览器窗口可视区的X坐标
    e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标
    e.pageX 返回鼠标相对于文档页面的X坐标 IE9+支持
    e.pageY 返回鼠标相对于文档页面的Y坐标 IE9+支持
    e.screenX 返回鼠标相对于电脑屏幕的X坐标
    e.screenY 返回鼠标相对于电脑屏幕的Y坐标

    常用的键盘事件

    键盘事件 触发条件
    onkeyup 某个键盘按键被松开时触发
    onkeydown 某个键盘按键被按下时触发
    onkeypress 某个键盘按键被按下时触发 但是它不识别功能键,比如ctrl shift 箭头等

    注:三个事件的执行顺序是:keydown -- keypress -- keyup

    键盘事件对象

    键盘事件对象 属性 说明
    keyCode 返回该键的ASCII值

    注:onkeydown 和 onkeyup不区分字母大小写,onkeypress区分字母大小写

  • 相关阅读:
    好吧,左小波出山了——ie8兼容indexOf问题
    jmeter负载机运行/添加压力机/分布式
    jmeter操作数据库
    Charles手机抓包设置&无法打开火狐网页设置
    python学习-Day1-接口测试
    动态SQL
    MyBatis缓存
    正则表达式
    MyBatis配置文件的配置说明
    几种数据源的配置
  • 原文地址:https://www.cnblogs.com/actorhuang/p/13596510.html
Copyright © 2011-2022 走看看