关于DOM

最新推荐文章于 2023-09-28 16:02:00 发布

weixin_30815427

最新推荐文章于 2023-09-28 16:02:00 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/BUBU-Sourire/p/11176012.html

本文介绍了Document Object Model（文档对象模型），包括常用的获取元素方法，如根据id、标签名、name属性、类样式名、选择器等获取元素。还阐述了DOM的功能，即通过构造函数构造页面节点对象。此外，介绍了遵循dom level 2标准的DOM事件，包括绑定事件的三种方式、三者区别、事件三阶段等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Document Object Model——文档对象模型

DOM

常用：

document.getElementById("id属性的值");　　根据id属性的值获取元素,返回来的是一个元素对象

document.getElementsByTagName("标签名字");　　根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

document.getElementsByName("name属性的值")；　　根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

document.getElementsByClassName("类样式的名字")；　　根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

document.querySelector("选择器的名字");　　根据选择器获取元素,返回来的是一个元素对象

document.querySelectorAll("选择器的名字")；　　根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象

DOM的功能：

　　页面中的节点，通过构造函数，构造出对象。

DOM 事件

遵循dom level 2 标准

一个容易混淆的例子(DOM level 0)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script>
    function print(){
      console.log('hi')
    }
  </script>
</head>
<body>
  <button id=X onclick="print">A</button>
  <button id=Y onclick="print()">B</button>
  <button id=Z onclick="print.call()">C</button>
  
 <!--  onclick="要执行的代码",等价于 eval("要执行的代码")-->
  
</body>
</html>

X.onclick = print; //print为函数对象
Y.onclick = print(); //undefined
Z.onclick = print.call(); //undefined

绑定事件

三种方式

　　1.对象.on事件名字=事件处理函数

xxx.onclick = function(){console.log(1)}
xxx.onclick = function(){console.log(2)}

//最终输出结果是2
//onclick属性具有唯一性，会覆盖

//解绑：xxx.onclick=null

　　2.对象.addEventListener（"没有on的事件名字"，事件处理函数，false）--false（冒泡） true（捕捉）

xxx.addEventListener('click',function(){console.log(1)})
xxx.addEventListener('click',function(){console.log(2)})

//最终输出1 2   队列
//xxx拥有一个队列，先出现先触发，互不影响
//队列的实质：数组

//解绑：xxx.removeEventListener('click',...)

　　3.对象.attachEvent（"有on的事件名字"，事件处理函数)

xxx.attachEvent("onclick",function(){});

//解绑：对象.detachEvent（“on事件类型”，函数名字）

三者区别：

　　1.支持的浏览器不一样

　　　　addEventListener支持谷歌、火狐、IE11，不支持IE8

　　　　attachEvent支持IE8，不支持IE11、谷歌、火狐

　　2.this不同

　　　　addEventListener中的this是当前绑定事件的对象

　　　　attachEvent中的this是window

事件三阶段：

　　　　事件捕获阶段，事件目标阶段，事件冒泡阶段

  <div id="A">A
    <div id="B">B
      <div id="C">C</div>
    </div>
  </div>
  <!-- 当点击C时，三个函数都会被调用 -->

A.addEventListener('click',function fn1 (){console.log(A),第三个参数})
A.addEventListener('click',function fn1 (){console.log(A),第三个参数})
A.addEventListener('click',function fn1 (){console.log(A),第三个参数})

// fn1 fn2 fn3 的执行顺序
// 不传第三个参数或传false   CBA
// 传true   ABC

*若捕获冒泡在同一处触发，那么按照队列顺序来

阻止冒泡

https://jsbin.com/butuhec/edit?html,css,js,output