认识DOM和简单的单击事件

最新推荐文章于 2024-07-20 20:57:29 发布

Paranoid_truggle

最新推荐文章于 2024-07-20 20:57:29 发布

阅读量180

点赞数

文章标签： dom操作

本文链接：https://blog.csdn.net/Paranoid_truggle/article/details/119111329

版权

DOM是JavaScript操作HTML文档的关键，它将网页拆分为可操作的对象模型。通过理解DOM节点，包括文档节点、元素节点、属性节点和文本节点，开发者可以自由地修改网页内容。此外，事件是实现JS与HTML交互的重要方式，捕捉用户的特定交互行为。

摘要由CSDN通过智能技术生成

DOM

js通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作WEB页面
文档
文档表示的就是整个HTML网页文档
对象
对象表示要将网页中的每一个部分都转换为了一个对象
模型
使用模型来表示对象之间的联系，这样方便获取对象
节点
节点 Node—构成HTML文档的最基本的单元
常用的节点分为四类
文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

  <button id="btn">我是一个按钮 </button>
  <script>
/* <!--    浏览器已经为我们提供了文档节点对象这个属性是window属性
          可以在页面中直接使用，文档节点代表整个网页
          document就代表整个网页
*/
  // 获取到button这个对象
  var btn=document.getElementById("btn");
  console.log(btn);
  //修改按钮的文字,修改HTML内部的代码
console.log(btn.innerHTML);
btn.innerHTML='I m Button'
  </script>

事件
就是文档或者浏览器窗口发生的一些特定的交互瞬间
js和HTML之间的交互是通过事件实现的

<!--我们可以在事件对应的属性中设置一些js代码
      这样当事件被触发时，这些代码将会执行
      onclick点击事件
      ondblclick双击事件
  -->
<!--这种写法我们称为结构和行为耦合，不方便维护，不推荐使用-->
<!--<button id="btn" onclick="alert('讨厌，你点我干什么')">我是一个按钮 </button>-->
<button id="btn" onclick="">我是一个按钮</button>
<script>
  /* 事件
  *   	就是文档或者浏览器窗口发生的一些特定的交互瞬间 点击，鼠标移动，关闭窗口
	    js和HTML之间的交互是通过事件实现的
  * */


//  可以为按钮的对应事件绑定处理函数的形式来响应事件
//  当事件触发时，对应的函数将会被调用
  var btn =document.getElementById("btn")
  //绑定一个单击事件
  //像这种为单击事件绑定的函数，我们称为单击响应函数
  // btn.οnclick=function(){
  //   alert("你还点。。。。");
  // }
  btn.onmousemove=function(){
    alert("你还点。。。。");
  }
</script>