JavaScript DOM 事件（三）

最新推荐文章于 2024-06-08 16:17:53 发布

DreamTL

最新推荐文章于 2024-06-08 16:17:53 发布

阅读量536

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript HTML

本文链接：https://blog.youkuaiyun.com/DreamTL/article/details/69788670

HTML 同时被 2 个专栏收录

4 篇文章

订阅专栏

JavaScript

3 篇文章

订阅专栏

本文介绍了一段JavaScript代码，该代码通过遍历并获取页面上的所有li元素，利用正则表达式检查每个元素的文本值是否以特定字符串开头，并据此修改文本。此方法展示了如何结合DOM操作与正则表达式的实际应用。

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

点击每个li节点，若li节点的文本值没有以^^ 开头，则加上，有则去掉

<ul id="city">
    <li id="bj" name="beijing">北京</li>
    <li id="sh" name="beijing">上海</li>
    <li id="zz" name="beijing">郑州</li>
</ul>

具体实现代码如下：

window.onload = function(){
    var liNodes = document.getElementsByTagName("li");
    for(var i=0; i<liNodes.length; i++){
        liNodes[i].onclick = function(){
            var val = this.firstChild.nodeValue;
            //使用正则表达式来判断是否以^^ 开头
            var reg = /^\^{2}/g;
            if(reg.test(val)){
                // 使用replace方法进行去除^^开头
                val = val.replace(reg, "");
            }else{
                val = "^^"+ val;
            }
            //nodeName nodeType nodeValue 节点的属性
            this.firstChild.nodeValue = val;
        }
    }
}