dom

YYYYYYYY
179 阅读4分钟

dom

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

html

js如何操作html元素? 选择器

  • 1.选中html 元素，返回 dom对象
  • 2.该元素以对象的方式存在 在class ID。。。HTML属性：将作为dom对象下的属性
  • 3 所有的html元素怒 都具有相同的原型链从 HTMLElement-->Element-->Node-->EventTaget-->object-->null

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

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

什么是事件驱动？

浏览器对用户行为，通过事件处理函数进行响应的处理，就是事件驱动 domcument 中默认所有的事件属性，初始化赋值为 null 换句话默认不处理任何事件 对某一个元素中的某一个事件 绑定函数后 表示当用户对该元素怒做出该行为行为时，会有一定的响应。 浏览器向应用户，通过执行事件处理函数中代码。 总结 事件是解决用户对浏览器交互问题 交互是一问一答方式 默认：用户有很多行为，元素不作出任何响应 事件处理函数：用户有行为，元素通过函数做出响应 响应：回答

如何实现动态的交互？

1.在事件处理函数内部：对元素进行CUES操作 2.在事件处理函数内部：对元素进行属性赋值修改操作，以及css样式变更操作 3.在事件处理函数内部，创建元素，新增属性，新增css，变更css 将js新增元素添加到页面上 新增元素 dom对象（appendChilid，replaceChild...）dom字符串（innerHTML开，，）

节点操作

curn

增： html字符串模板：dom.innerHTML +=HTML模板字符串 parentn.appendChild(); parentn.inserChild(); 删除： parentn.removeChild(); 改： replaceChild(new,old)用新的替换旧的 查询 document.getElement....

元素节点

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

属性节点

创建 document.createAttribute("name") 获取 dom.getAttribute（属性字符） 获取dom 元素 属性的赋值 修改 dom.setAttribute（属性，newValue）给dom下属性设置或者修改值 如果没有这个属性：就是添加并赋值 相当于创建 dom.setAttribute（新的值没有出现过，newValue） 删除 dom.removeAttribute（属性名） 删除dom下的属性

文本节点

dom.innerHTML=文本内容

关系型节点查找

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

事件

什么是事件？

事件：表示用户的行为 作用：解决用户与浏览器之间交互问题

事件绑定问题 那些内容可以被绑定？

window document html元素 span。。。。 绑定事件有几种方式 1.直接绑定在html上 1.

问题：不能实现将特别长的js代码都写在html元素内部，导致元素太沉重了 2.将元素上js 代码移动到js中

<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 click2(){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,eventStream){
         // dom元素下是否有 addEventListener 属性 区分 低版本ie 其他浏览器
        if(dom.addEventListener){
            dom.addEventListener(eventName,handle,eventStream)
        }else{
            eventName = "on"+eventName;
            dom.attachEvent(eventName,handle,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.阻止默认事件

avatar
文章
阅读
粉丝