【前端】课程练习心得

最新推荐文章于 2025-05-30 15:39:29 发布

m0_61374145

最新推荐文章于 2025-05-30 15:39:29 发布

阅读量65

点赞数

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/m0_61374145/article/details/128600605

版权

文章介绍了DOM操作的关键点，包括通过标签名、类名和ID获取元素，使用querySelector和querySelectorAll的区别。强调了事件处理中this的指向以及如何阻止a标签的默认跳转行为。同时，讨论了事件注册的方法，如onclick，以及在多元素操作中的应用示例。

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

前言

近期学习了DOM，记录一些要点，方便提醒自己记下重要的知识点。主要内容为我认为要注意的地方和一些练习。

一.获取元素

1.通过标签名和类名获取的其中的全部内容返回类型都是伪数组，主要使用 document.querySelectorAll('选择器') 获取一组元素。

<body>
<h1 class='a'>这是标题</h1>
<h2>标题</h2>
<h2>标题2</h2>
<script>
    var domArr = document.getElementsByTagName('h1');
    var domArr1 = document.getElementsByClassName('a');
    var domArr2 = document.querySelectorAll('h2')//返回获取到的所有h2
</script>
</body>

2.通过id获取内容，返回本身所有内容，不合并为数组。 document.querySelector('选择器') 获取单个元素，获取的元素唯一，不是伪数组。

<body>
<h1 id='b'>标题</h1>
<h2>111</h2>
<script>
var idDom = document.getElementById('b');
var a=document.querySelector("*"); //返回获取到的第一个元素
</script>
</body>

二.this指向

事件处理中的this指向事件源，直接通过this进行事件源的操作。

<body>
<button>按钮</button>
<script>
var btn=document.querySelector('button');
btn.onclick=function(){
    this.style.color='blue';//点击按钮，字变蓝色
}
</script>
</body>

三.阻止a标签默认跳转行为

1.可以在事件处理程序最后加上return false；

<body>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.qq.com">腾讯</a>
    <a href="http://www.360.com">360</a>
    <h1>
        点击链接
    </h1>
    <script>
        var aDoms=document.querySelectorAll('a');
        var h1=document.querySelector('h1');
        for(var i=0;i<aDoms.length;i++){
            aDoms[i].onclick=function(){
                var url=this.href;
                var text=this.innerText;//innerText获取对应的文本信息
                console.log(url,text);
                h1.innerHTML="<em>"+text+"</em>-"+url;//innerHTML获取相应的文本和属性信息
                return false;//阻止a链接跳转
            }
        }
    </script>

2.给a标签的href设置属性值为javascript。

<a href="javascript:">链接</a>

四.注册事件

1.事件源.事件类型（让事件源绑定事件类型）=事件处理程序（函数）事件类型可以是鼠标点击(onclick)、鼠标移入(onmouseenter)等。

<body>
<button>按钮</button>
<script>
var btn=document.querySelector('button');
btn.onclick=function(){
    alert('1');
}//鼠标点击按钮出现弹窗1
</script>
</body>

2.当有多个事件源需要操作时，可以使用for循环遍历。此案例为点击切换图片。

<body>
    <img src="">//用于接收切换的图片
    <a href="./images/1.jpg">图片1</a>
    <a href="./images/2.jpg">图片2</a>
    <a href="./images/3.jpg">图片3</a>
    
</body>
<script>
    var imgDom=document.querySelector('img');
    var aArr=document.querySelectorAll('a');
    for(var i=0;i<aArr.length;i++){
        aArr[i].onclick=function(){
            var srcStr=this.href;
            imgDom.src=srcStr;
            return false;//阻止a链接跳转
        }
    }

3.当多个事件源名称一致但只想操作其中一个时，可以使用 document.querySelectorAll('事件源')[下标值]来操作。

<body>
  <button>添加</button>
  <button>获取</button>
  <script>
    var setBtn = document.querySelector('button');
    var getBtn = document.querySelectorAll('button')[1];//第二个button