JavaScript DOM 事件（三）

点击每个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;
        }
    }
}

 

备注：这里使用了正则表达式来进行匹配字符

//g : 全局

^ 因为是特殊字符，所以需要进行转义

效果如下：