点击事件获取当前元素索引 js点击事件获取标签属性

转载

mob64ca13f7ecc9 2024-04-18 13:28:48

文章标签 点击事件获取当前元素索引 javascript 类名 HTML html 文章分类 数据仓库大数据

一.获得标签中的内容

注：先写标签，再写JS

使用document.getElementById(标签中的id名字)
使用document.getElemrntsTagName(标签名)，返回一个对象数组
如果有父元素，先使用getElementById(标签中的id名字)获得父元素，然后在使用上面的语句获得子元素
使用document.body获得body元素，使用document.html获得html元素

使用querySelector（类名也就是class属性）
使用querySelectorAll（类名也就是class属性）

注：如果在函数中我们要更改类名的话，使用的属性名应该是 CalssName

<div class="fatherbox">
        <ul class="servelist">
            <li>商品介绍</li>
            <li>规格与包装</li>
            <li>售后与保障</li>
            <li>商品评价</li>
        </ul>

        <div class="showarea"></div>
    </div>

    
    
    <!-- JS 代码位置 -->
    <script>
        var li_list = document.querySelector(".servelist");
        var li = li_list.querySelectorAll("li");
        console.log(li);
    </script>

二.处理事件

利用上述函数获得事件源（标签）
触发事件过程，比如点击（onclick）

点击事件获取当前元素索引 js点击事件获取标签属性_html

调用函数

var btn = document.getElementById("btn")
btn.onclick = function() {
	事件内容
}

三.处理事件 - 修改内容

使用标签.innerText = 修改内容注：修改内容中我们可以改变标签的属性，如图片的内容，img.src = "图片路径"

var btn = document.getElementById("btn");
var text = document.getElementById("text")

btn.onclick = function() {
	text.innerText = 修改内容
}

使用标签.innerHTML= 修改内容 这个函数 可以识别HTML标签，意思就是在修改内容中我们可以写入HTML标签
如 <strong> 太粗了 </strong>
如果要修改CSS中的属性，要在函数中使用元素.style.属性来修改
或者使用元素.style.类名，也就是在CSS中重写一个类，在这个类中写入新的属性
然后再函数中使用this.ClassName = “新类名”，就可以改变了
注：如果想保留原来类中的属性，则使用this.ClassName = 旧类名新类名