加载中...

DOM （文件对象模型）

什么是DOM对象

将HTML结构以DOM树形式表现，document是最外层对象，其他标签是其子对象， 可以利用这些JS对象实现特效或与用户交互

上图：白色的是元素节点，比如div（主要是操作这个）、绿色是属性节点，比如href、黄色是文本节点，就是文字


只获取对应匹配的第一个

  • const nav = document.querySelector('.nav') 直接用CSS定义时的样子，括号里必须有''
  • 如果没有匹配到返回的是null

获取多个对应匹配生成的NodeList对象集合（伪数组）

  • const lis = document.querySelectorAll('ul li') 直接用CSS定义时的样子，括号里必须有''
  • 必须用for循环才能把nodeList上的对象弄出来

在下面追加DOM元素

  • ul.appendChild(li)

在兄弟的上面追加DOM元素

  • ul.insertBefore(li，ul.children[0])

克隆DOM元素.cloneNode(布尔值)
删除DOM元素.removeChild(要删的元素)


DOM的属性

格式化 HTML标签的文字

  • 元素.innerText 例：div.innerText = '不能识别HTML代码'
  • 元素.innerHTML 例：div.innerHTML = '<strong>可以识别HTML代码</strong>'

添加CSS属性（ 有带" - "的属性规定用小驼峰抓取 ）

  • 元素.style.borderTop = '2px sikud red' background-color 像这种

获取HTML滑轮滑度有多少px（可以=赋值和修改）

  • document.documentElement.scrollTop

获取盒子的长宽


HTML上给标签自定义选择器data-uname、sth等，DOM元素对象获取自定义的属性

<li data-lili="自定义属性">列表3</li>

const obj = document.querySelector('li:nth-child(3)')
console.log(obj.dataset.lili); `返回：自定义属性`

DOM的方法

给标签添加、替换、删除类属性，(前提是CSS上已经设置了该标签的CSS属性)

追加一个类，元素.classList.add('不用加.的类名')
切换一个类，元素.classList.toggle('不用加.的类名')
删除有一个类，元素.classList.remove('不用加.的类名')
- 上述三个是新特性，旧的标签变化只有属性使用 => div.className = '.类名' `新的class覆盖旧的，想要加多一个用className = '.nav .box'`

classList.add()的运用场景 轮播图上的小圆点亮灯，li是用nth-child(random)随机选取的，每取一次就可以用元素.classList.add()添加一次

找DOM对象的亲戚 document.getElementById()

返回<li> 元素父节点: document.getElementById("item1").parentNode


事件监听 addEventListener

就是HTML标签受到鼠标点击后、经过后、点击输入文字后等操作之后能触发函数功能的操作


语法

增加事件： DOM对象.addEventListener('事件类型'，function(e){}，默认false冒泡)
解绑事件：DOM对象.removeEventListener('事件类型'，函数名(要先自己定义变量）)

传统on语法：

增加事件： ul.onclick = function (e) {}
解绑事件： DOM对象.onclick = null

  • addEventListener事件类型不会覆盖会依次执行，可设置是否冒泡
  • 传统on会覆盖事件，只能用冒泡流

注意区分事件解绑和： 阻止元素默认行为是阻止a标签的点击默认跳转，在函数体里 e.preventDefault()

三步： DOM对象、事件类型、触发函数


DOM 事件类型

鼠标事件：

  • 鼠标点击 'click'
  • 鼠标经过 'mouseenter' 旧版本mouseover会有冒泡效果，不建议使用
  • 鼠标离开 'mouseleave' 旧版本mouseout会有冒泡效果，不建议使用

焦点事件(搜索光标）：

  • 点击光标后 'focus'
  • 失去光标后 'blur'

键盘事件

  • 键盘按下后 'keydown'
  • 键盘弹起来后 'keyup'

文本输入事件

  • 文本输入的文字，输入就有触发并且能拿到文字 'input' console.log(input.value)就能拿到文字

M端(手机)事件

  • 手指触摸DOM时 'touchstart'
  • 手指上滑DOM时 'touchmove'
  • 手指上滑离开时 'touchend'

函数就是赋值了给事件类型的名字 click就是里面定义的匿名函数的名字


window事件类型

'load', 让html先加载事件（在script上设置 ）

<script>
// 让HTML先加载
  window.addEventListener('load',function(){  
      const co = document.querySelector('.nav')
      co.style.backgroundColor = 'red'
  })
  </script>

scroll 滑动轮滑检测事件

window.addEventListener('scroll',function(){  
    // 查看HTML(documentElement)的滑动高度scrollTop, 滑动右度scrollLeft
    const top = document.documentElement.scrollTop
    console.log(top);
})

document.documentElement.scrollTop 可以用=赋值也可以修改


e 事件对象

事件监听发生后 会产生一些数据，用一个对象把这些数据存放起来，这个对象叫事件对象

事件对象的一般常用属性

  • 获取当前事件类型 e.type
  • 获取光标相对于浏览器在再上角的位置 e.clientX/clientY
  • 获取光标相对于当前DOM元素左上角的位置 e.offsetX/offsetY
  • 用户按下键盘后的值是什么 e.key

事件对象中的 e.key属性的使用场景


冒泡和捕获

在html里有父级标签 和 子集标签，假设两个标签都有设置鼠标点击事件，

  • 如果点击子级触发了效果之后，父级也触发了效果 就叫冒泡
  • 如果点击父级触发了效果之后，子级也触发了效果 就叫捕获

阻止冒泡的方法用 事件对象e方法 e.stopPropagation() 

<style>
.par {
    width: 200px;
    height: 200px;
    background-color: pink;
}
.son {
    width: 50px;
    height: 50px;
    background-color: green;
}
</style>

<body>
    <div class="par">
        <div class="son">
        </div>
    </div>

    <script>
        const par = document.querySelector('.par')
        const son = document.querySelector('.son')
        document.addEventListener('click', function () {
            alert('我是爷爷')
        },false)  // 这里默认是false， 改成true就会变成捕获流
        par.addEventListener('click', function (e) {
            alert('我是爸')
            e.stopPropagation()  // ⭐⭐⭐阻止冒泡的e方法
        },false)  // 这里默认是false， 改成true就会变成捕获流
        son.addEventListener('click', function () {
            alert('我是儿')
        },false)  // 这里默认是false， 改成true就会变成捕获流
    </script>
</body>

事件委托

利用冒泡原理，解决同个父级标签下子级标签点击后都会到父级上触发的技巧
优点：

  • 减少事件监听注册次数，提高性能
  • e.target 获得冒泡源对象（即刚刚点击的子级DOM对象）
  • e.target.tagName 获得冒泡源的标签名 （如 OL、UL、LI 是大写的标签名）
  • HTML上自定义id <li data-id="2"> , js 上拿到id const i = e.target.dataset.id

tab 用时间委托实现

<style>
    ul {
        width: 300px;
        height: 300px;
        border: 1px solid black;
    }
    .select {
        color: pink;
    }
</style>


<body>
    <ul class="nav">
        <li data-id="0">第一个</li>
        <li data-id="1">第二个</li>
        <li data-id="2">第三个</li>
    </ul>


    <script>
        const ul = document.querySelector('ul')
        ul.onclick = function (e) {
            if(document.querySelector('ul .select')){
                document.querySelector('ul .select').classList.remove('select')
            }
            e.target.classList.add('select')
            console.log(e.target.dataset.id);

        }

    </script>
</body>
posted @ 2023-03-24 00:57  1502god  阅读(123)  评论(0)  编辑  收藏  举报
-->