JavaScript DOM事件与属性

最新推荐文章于 2024-02-28 16:07:09 发布

2302_79704390

最新推荐文章于 2024-02-28 16:07:09 发布

阅读量41

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2302_79704390/article/details/134104048

版权

什么是API？

       应用程序编程接口（Application Programming Interface，API）是软件系统预先定义的接口，
       用于软件系统不同组成部分的衔接。每一种开发语言都有自己的API。
       例如console.log方法。就是JS的一个API。

文档对象模型（Document Object Model，DOM）用于处理HTML文档的编程接口。
翻译：对HTML内部的标签进行处理。

通过DOM节点获取HTML元素的4种方法

方法1:通过标签名获取元素

var a = document.getElementsByTagName("h3");

此时就已经获取到了页面上所有的h3标签注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.

方法2:通过class名获取元素

var b = document.getElementsByClassName("a");

此时就已经获取到了页面上所有的class为a标签注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.

方法3:通过name获取元素

var c = document.getElementsByName("b");

此时就已经获取到了页面上所有的class为a标签注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.

方法4:通过id获取元素

因为id是唯一标识符所以返回的是一个元素,可以直接处理

var d = document.getElementById("c");

如何操作节点

常见的操作节点的三个属性：

1.innerText表示给标签内部重新赋值或取值这里是文本值

                   2.innerHtml表示给标签内部重新赋值或取值这里是html值


                   注意以上2个方法只能作用于非表单元素例如 h标签 a标签 p标签等等

第三个方法只能作用于表单元素
                   例如input

                   方法3： value表示给标签内部重新赋值或取值这里是html值

如何操作节点的样式

如何改变一个节点的样式:

步骤1.思考需要修改什么样式

步骤2.去css里面查看该样式的单词

步骤3.按照提示来

步骤4.通过节点.style.xxx 表示取值或赋值

例如我要修改字体颜色
p.style.color = "red";
console.log(p.style.color)
例如我要修改背景色
p.style.backgroundColor = "green"

以上写法的缺点: 麻烦每次只能修改一个样式

如果样式很多,我们可以先将其封装到一个css里面

p.className = "abcd";//表示给该元素赋予一个class为abcd的属性

js中的事件管理

js中的事件: 用户对前台页面做出的一些操作来触发一些函数

例如用户的单击双击等等等等

需求:用户点击id为a的元素弹出一个窗口

步骤1:获取元素

步骤2: 元素.事件名 = function(){代码体}

步骤3 常见的事件名:

单击事件 onclick

document.getElementById("a").onclick = function(){
              alert(123);
             }
需求2:给所有的p标签加上点击事件  需要遍历

var p = document.getElementsByTagName("p");
             for(var i = 0 ;i<p.length;i++){

              p[i].onclick = function(){
              alert(456);
              }

             }

双击事件

document.getElementById("a").ondblclick = function(){
alert(123);
}

鼠标移入事件悬浮事件

需求:鼠标放上图片图片就放大2倍鼠标移出就恢复原状

鼠标移入事件onmouseover

document.getElementsByTagName("img")[0].onmouseover = function(){
              document.getElementsByTagName("img")[0].style.width = "400px";
              document.getElementsByTagName("img")[0].style.height = "400px";
             }

鼠标移出事件onmouseout

document.getElementsByTagName("img")[0].onmouseout = function(){
              document.getElementsByTagName("img")[0].style.width = "200px";
              document.getElementsByTagName("img")[0].style.height = "200px";
             }

输入账号,失去焦点就需要数据校验

账号：<input type="text" id="aaa" /> <span id="bbb"></span>

js的属性

js获取元素的属性：

元素的常见属性: id class src href

需求:点击按钮让这个a标签的href改成跳转到第二个页面
需求点击按钮,进入下一张图片
           document.getElementById("abc").onclick = function(){
               document.getElementById("a").setAttribute("href" , "2_如何通过DOM获取元素节点.html");
               document.getElementById('b').setAttribute("src","img/2.PNG");
           }



点击开始点名按钮来回切换
           document.getElementById("btn").onclick = function(){
               if(document.getElementById("btn").innerText=="开始点名"){
                   document.getElementById("btn").innerText = "停止点名"
               }else{
                   document.getElementById("btn").innerText = "开始点名"
               }
           }

例如：

<head>
       <meta charset="utf-8">
       <title></title>
       <style>
           font{
               border: 1px solid red ;
           }
       </style>
   </head>
   <body>
       <font id="1">张三1</font>
       <font id="2">张三2</font>
       <font id="3">张三3</font>
       <font id="4">张三4</font>
       <font id="5">张三5</font>
       <hr>
       <button id="btn">开始点名</button>

       <script>

           document.getElementById("btn").onclick = function(){
               if(document.getElementById("btn").innerText=="开始点名"){
                   document.getElementById("btn").innerText = "停止点名"
                   //让5个名字对应的font标签的背景色改变
                   var r =Math.ceil(Math.random()*5);//(0,5)
                   document.getElementById(r).style.backgroundColor = "red";

               }else{
                   document.getElementById("btn").innerText = "开始点名"
               }

           }

       </script>
   </body>