JavaScript-DOM

最新推荐文章于 2024-10-18 11:12:30 发布

秦倾茜

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量37

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/2301_77434276/article/details/134228782

版权

本文介绍了DOM（文档对象模型）及其在JavaScript中的应用，包括通过标签名、类名、ID获取元素的方法，以及如何使用innerText和innerHTML操作节点。此外，还讲解了JavaScript中的事件处理，如onclick和如何修改元素属性如href和src。

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

DOM简介

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

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

如何通过DOM获取元素节点

通过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标签等等，第三个方法只能作用于表单元素

JS中的事件

用户对前台页面做出的一些操作来触发一些函数

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

//需求:用户点击id为a的元素弹出一个窗口
           //步骤1:获取元素
           // 步骤2: 元素.事件名 = function(){代码体}
           //步骤3 常见的事件名:
           //单击事件 onclick


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


           // //需求2:给所有的p标签加上点击事件下面的写法是错误的需要遍历
           // // document.getElementsByTagName("p");.onclick = function(){
           // //    alert(123);
           // // }
           // var p = document.getElementsByTagName("p");
           // for(var i = 0 ;i<p.length;i++){

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

           // }

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");
           }