DOM

dom

doccment 文档对象 理解: 在js中如何看待html标签

html

js如何操作html元素?

• js如何操作html元素? 选择器
• 1.选中html元素,返回 dom 对象
• 2.该元素以对象的方式存在,class id ...html属性;将作为 dom 对象下的属性
• 3.所有的html元素 都有相同的原型链从HTMLElement-->Element-->Node-->EventTarget-->Object-->null

操作html元素的目的是什么呢?

• 通过事件驱动: 实现页面动态交互

什么是事件驱动?

• 浏览器对用户行为,通过事件处理函数进行响应的处理;就是事件驱动
• document 中默认所有的事件属性,初始化赋值为null,换句话默认不处理如何事件
• 对某一个元素中的某一个事件,绑定函数后,表示当用户对该元素做出该行为时,会有一定的响应
• 浏览器响应用户:通过执行事件处理函数中代码

总结

• 事件是解决用户有浏览器交互问题
• 交互是一问一答方式
• 默认:用户有很多行为,元素不做出任何响应
• 事件处理函数: 用户有行为,元素通过函数做出响应
• 响应:回答

如何实现动态的交互?

• 1.在事件处理函数内部: 对元素进行CURS(增删改查)操作
• 2.在事件处理函数内部,对元素进行属性赋值修改操作,以及css样式变更操作
• 3.在事件处理函数内部,创建元素,新增属性,新增css,变更css将js新增元素添加到页面上
  • 新增元素 dom(appendChild,replaceChild...) dom字符串(innerHTML)

节点操作

curs

• 增:
  • html字符串模板: dom.innerHTML += HTML模板字符串
  • parent.appendChild()
  • parent.inserChild()
• 删:
  • parent.removeChild(子元素)
• 改:
  • replaceChild(new,old) 用新的替换旧的
• 查询:
  • document.getElement...

元素节点

• dom对象
• 可以通过选择器获取
• document.querySelectorAA() 获取

属性节点

• dom.getAttribute(属性字符) 获取属性 获取dom下属性赋值
• dom.setAttribute(属性,newValue) 设置属性 给dom下的属性设置或者修改;如果没有属性就是添加属性
• dom.removeAttribute(属性名) 删除属性 删除dom下属性

文本节点

• 新增
• dom.innerHTML = 文本内容

关系性节点查找

• 目标元素查找相关的元素,目标元素就是你操作的元素
• 父 dom.parentElement dom.parntNode
• 子集合 dom.children
• 相邻兄弟 上一个 previousElementSibling 下一个 nextElementSibling

事件

什么是事件

• 事件:表示用户的行为;作用:解决用户与浏览器之间交互问题
• 事件绑定问题:
  • 哪些内容可以绑定事件?
    • window document html元素 span...
  • 绑定事件有几种方式?
    • 1:直接绑定到htm了上

    <div onclick="alert('直接处理')"></div>
    

    • 问题:不能实现将特别长的js代码都卸载html元素内部,导致元素太沉重了
    • 2:将元素上js代码移动到js中,解决了html代码沉重问题

    <div id='div' onclick='clickHandle()'></div>
    <script>
        function clickHandle(){
            alert('直接处理')
        }
    </script>
    

    • 问题:加巨了html与js的耦合性,降低代码的管理和维护
    • 3:同dom属性方式绑定,解决高耦合问题

    <div id='div'></div>
    <script>
        function clickHandle(){
            alert('直接处理')
        }
        div.onclick = clickHandle
    </script>
    

    • 如果用这种方式,进行项目的版本选代,导致覆盖之前版本的事件处理问题
    • 给一个元素只能绑定一个事件处理函数,绑定多了覆盖问题
    • 4:通过添加事件句柄方式addEventListener方式,解决同一个元素不能绑定多个事件处理函数问题

    <div id='div'></div>
    <script>
        function clickHandle(){
            alert('直接处理')
        }
        function click(){alert('第二个函数')}
        div.addEventListener('click',clickHandle)
        div.addEventListener('click',click2)
    </script>
    

    • addEventListener 优势:

    <!--
        1.可以给同一个元素添加多个事件处理函数
        2.在事件流中可以设置默认是冒泡行为还是捕获行为
        3.添加事件处理函数可以通过removeEventListener移出事件句柄
    -->
    

    • addEventListener弊端:
      • 不兼容低版本IE
    • 5:解决添加事件句柄兼容性问题

    <div id='div'></div>
    <script>
        addEvent(div,'click',function()({
            alert('解决兼容性问题')
        },true)
        function addEvent(dom,eventName,handle){ 
            // dom元素下是否有 addEventListerner属性 区分低版本IE 其他浏览器
            if(dom.addEventListener){
                dom.addEventListener(eventName,handle)
            }else{
                eventName = 'on'+eventName
                dom.attacEvent(eventName,handle)
            }
        }
        // 写法二
        function addEvent(dom,event,callback,eventStream){ 
            if(dom.addEventListener){
                dom.addEventListener(event,callback,eventStream)
            }else{
                dom.attacEvent(on+event,callback,eventStream)
            }
        }
    </script>
    

    • 6:事件流
      • 冒泡: 以目标元素为主,触发所有祖籍元素中处理的相同事件:目标元素-->父元素-->祖籍元素
      • 捕获: 从祖籍元素到目标元素相同的事件,事件处理函数执行:祖籍元素-->父元素-->目标元素
      • 注意:
        • 1.事件触发,与事件处理俩个问题:
        • 2.事件可以随时触发,事件处理:根据需求处理
        • 3.同一个元素,事件机制,只有一个;要么冒泡要么捕获
        • 4.冒泡捕获与html结构有关,与页面效果无关
    • 7:如何阻止事件冒泡
      • 事件对象.stopPropagation()
      • 事件处理函数

事件处理函数的作用是什么

• 解决用户需要看到的效果问题

事件对象的作用是什么

• 事件对象:事件处理函数形参自动接收
• 记录触发事件的所有行为
• 谁在什么时间 什么位置 发生了什么事件 等信息
• event.target 获取谁触发事件
• event.type 触发什么事件
• event.clientX/clientY 获取在哪里触发事件
• event.keyCode 获取是哪一个键触发事件
• ...

dom事件的级别划分?

• 0 级 dom.on事件 问题: 覆盖
• 1 级
• 2 级 addEventListener 问题: 兼容性问题 推荐使用

掌握事件知识点头:

• 1.从如何处理事件开始
• 2.事件句柄
• 3.事件流 事件机制 冒泡捕获 阻止冒泡
• 4.阻止默认事件