Javascript基础中DOM总结

原创已于 2022-03-01 12:59:55 修改 · 104 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #html5

于 2021-09-27 11:15:43 首次发布

本文详细介绍了JavaScript中获取DOM元素的各种方法，包括通过id、tagName和类名，以及使用querySelector和querySelectorAll选择器。同时，讲解了事件的基础知识，如事件源、事件类型和事件处理程序，并展示了如何给元素添加和取消事件。此外，还讨论了如何操作元素的属性，包括获取、设置和移除属性。最后提到了HTML5的data-属性及其使用，并对比了innerText和innerHTML属性的区别。内容涵盖了网页交互和DOM操作的核心概念。

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

获取元素

id获取元素：

语法：document.getElementById('id的值');

tagName获取元素集合：

语法：document.getElementsByTagName('div'); //伪数组

类名获得元素集合：

语法：document.getElementsByClassName("类名") //伪数组

选择器：

获取单个：

语法：document.querySelector('选择器');

获取一组：

语法：document.querySelectorAll('选择器');

事件基础

事件三要素

事件源：被触发的元素，比如点击的按钮
事件类型：如何触发的事件，比如:点击按钮 onclick
事件处理程序：事件发生后的结果。

给元素注册事件

语法：事件源.事件类型 = 事件处理程序;
- 事件源→ 触发的那个元素
- 事件类型→ 点击 onclick
- 事件处理程序→ 函数
作用：获取元素，元素添加事件

例如：

<button id = “btn”>我是一个按钮</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
    alert("燃烧我的卡路里");
}
</script>

(此时点击button按钮，就会出现“燃烧我的卡路里的提示框”)

取消a标签的默认行为

方式一：事件处理程序中最后设置return false;

  <a id="link" href="https://www.baidu.com">点击</a>
  <script>
    var link = document.getElementById('link');
    link.onclick = function(){
        alert('你好');
        // 方式1：取消a点击后的默认跳转行为 return false;
        return false;
    };
  </script>

方式二：设置a标签的href属性值为：javascript: ;

<a href="javascript:;">点击2</a>
<a href="javascript:alert(123)">请点击看效果3</a>
<a href="javascript:js_method();"></a>
  <!-- 扩展：通过a可以打开打电话应用 -->
  <a href="tel:">打电话</a>
  <!-- 扩展：通过a可以打开电子邮件应用 -->
  <a href="mailto:">打开邮件</a>

操作元素的属性：

方法一：

获取：

语法：元素.属性名；

设置：

语法：元素.属性名=值

方式二：

获取属性值：

语法：getAttribute('属性','属性值')

注意：方式一，方式二不能混合使用，用方式一设置的属性不能使用getAttribute

设置属性及属性值：

语法：setAttribute('属性','属性值')

移除属性：

语法：removeAttribute("属性")

案例：

<div id="a"  index="1" class="hezi"></div>
    <script>
        var div = document.querySelector("div")
        //1、获取元素的属性值
        //（1）element.属性
        console.log(div.id);
        console.log(div.className);//注意:获取元素类名时,使用className获取
        console.log(div.index);//undefined

        //element.getAttribute('属性')  程序员自己添加的属性我们称为自定义属性 
        console.log(div.getAttribute("index")); //1
        console.log(div.getAttribute("id")); //a

        //element.setAttribute("属性 " , "属性值")  主要针对于自定义属性
        div.setAttribute("index",2);
        div.setAttribute("class","head"); //特殊记忆  **单独设置类名时用class**  不用className
        console.log(div.getAttribute("class")); // head  特殊记忆  获取**自己设置的类名时用class**  不用className
        //3、移除属性 removeAttribute(属性)   
        div.removeAttribute("index");

html5新增属性 data- 作用 ----- 自定义属性

定义值方法：div.setAttribute("data-index", 20);

取值方法： 获得的元素.dataset（得到一个所有data开头定义的对象的集合）

获取特定的值：获得的元素.dataset.[' ']（获得的是以data开头的属性）

存值：dataset.[' ']=值

其他属性：

className操作类名

<div id="box" class="a"></div>
<script>
 var div = document.getElementById('box');
 // 获取类名
 console.log(div.class); // undefined
 console.log(div.className);  // a
 // 设置类名
 div.className = 'b';
 console.log(div.className);  //b
</script>